Four-State Image Button

JavaScriptSource Staff Sep 29, 2003

This is an image buttons with a simple style script, attach a few mouse events to an image (or images), and instant four-action buttons. Enjoy!

Move the mouse slowly over each image, press
down the mouse button, then slowly release it.
Exercise the buttons more rapidly to see the full
effect. The image buttons have true four-state
motion. Images are linkable, of course, though
we don't have them linked in this demo.

The JavaScript Source: Buttons: Four-State Image Button

Simply click inside the window below, use your cursor to highlight the script, and copy (type Control-c or Apple-c) the script into a new file in your text editor (such as Note Pad or Simple Text) and save (Control-s or Command-s). The script is yours!!!

<!-- TWO STEPS TO INSTALL FOUR-STATE IMAGE BUTTON:

1.  Copy the coding into the HEAD of your HTML document
  2.  Add the last code into the BODY of your HTML document  -->

<HEAD>

.mouseBeOffMe {
border-top:    10px  solid #000000; 
border-bottom: 10px  solid #000000; 
border-left:   6px   solid #000000; 
border-right:  10px  solid #000000; 
}

.mouseBeOnMe {
border-top:    6px   solid #000000;
border-bottom: 14px  solid #000000; 
border-left:   10px  solid #000000; 
border-right:  6px   solid #000000;
}

.mouseBeDown {
border-top:    13px  solid #000000;
border-bottom: 7px   solid #000000; 
border-left:   10px  solid #000000; 
border-right:  6px   solid #000000;
}

.mouseBeUp {
border-top:    10px  solid #000000;
border-bottom: 10px  solid #000000; 
border-left:   10px  solid #000000; 
border-right:  6px   solid #000000;
}

//-->
</style>
</HEAD>

<BODY>

<table border="0" cellpadding="7" cellspacing="0" bgcolor="#000000">
          <tr>
          <td bgcolor="#000000">
<img src    = "slideshow1_1.jpg"
title       = "This is the Image One Label"
width       = "90"
height      = "90"
border      = "0"
class       = "mouseBeOffMe"
onmouseover = "this.className='mouseBeOnMe'"
onmousedown = "this.className='mouseBeDown'"
onmouseup   = "this.className='mouseBeUp'"
onmouseout  = "this.className='mouseBeOffMe'">

<img src    = "slideshow1_3.jpg"
title       = "This is the Image Three Label"
width       = "90"
height      = "90"
border      = "0"
class       = "mouseBeOffMe"
onmouseover = "this.className='mouseBeOnMe'"
onmousedown = "this.className='mouseBeDown'"
onmouseup   = "this.className='mouseBeUp'"
onmouseout  = "this.className='mouseBeOffMe'">
          </td>
          </tr>
          <tr>
          <td bgcolor="#141414" align="center">
<font color="#EFE7DF" size="2" face="Arial">Move the mouse slowly over each
image, press<br>
down the mouse button, then slowly release it.<br>
Exercise the buttons more rapidly to see the full<br>
effect.  The image buttons have true four-state<br>
motion. Images are linkable, of course, though<br>
we don't have them linked in this demo.</font>
          </td>
          </tr>
          </table>

<p><center>
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>

Did you use this script? Do you like this site? Please link to us!

Leave a Response

(0 comments)

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details

Four-State Image Button

Leave a Response

Attention JavaScript Coders

Go Deeper