JavaScript Collector

programming web dev
1

[CENTER][SIZE=“5”]JavaScript Collector[/SIZE][/CENTER]

Four-state of image

Move the mouse slowly over each image, press down the mouse button, then slowly release it. Exercise the buttons more rapidly to see the fulleffect. The image buttons have true four-statemotion. Image… detail

[CENTER]
Demo: Four-state of image[/CENTER]

[SIZE=“4”]How to setup[/SIZE]

Step 1: CSS below for styling thescript, place it into HEAD section
CSS

<style>
<!--

.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>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Step 2: Copy & Paste HTML code below in your BODY section
HTML

<table border="0" cellpadding="7" cellspacing="0" bgcolor="#000000">

          <tr>
          <td bgcolor="#000000">
<img src    = "logojs.gif"
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    = "photo3.jpg"
title       = "This is the Image Two 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    = "photo2.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&#39;t have them linked in this demo.</font>
          </td>
          </tr>

          </table>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

[CENTER]

[/CENTER]