# JavaScript Collector

**URL:** <https://forum.kirupa.com/t/javascript-collector/293190>\
**Category:** web dev\
**Created:** [July 24, 2009, 4:09pm UTC](https://forum.kirupa.com/t/javascript-collector/293190 "2009-07-24T16:09:42Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![JavaScriptBank](https://avatars.discourse-cdn.com/v4/letter/j/91b2a8/32.png) [@JavaScriptBank](https://forum.kirupa.com/u/JavaScriptBank)\
**Post date:** [July 24, 2009, 4:09pm UTC](https://forum.kirupa.com/t/javascript-collector/293190/1 "2009-07-24T16:09:42Z")

</div>

[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](http://www.javascriptbank.com/four-state-of-image.html/vi//vi/)

[CENTER][![](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/a/6/a6d8a847b8c0e6e7bcef04d3715c2c42c023fe67.jpeg)](http://www.javascriptbank.com/four-state-of-image.html/vi/)  
Demo: [Four-state of image](http://www.javascriptbank.com/javascript/image/four-state-of-image/preview/vi/)[/CENTER]

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

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

```auto
<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

```auto
<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]

> [@'Copyright'](#):
>
> [CENTER]The Site may provide, or third parties may provide, links to [non-JavaScriptBank.com](http://non-JavaScriptBank.com) Internet World Wide Web sites or resources. Because [JavaScriptBank.com](http://JavaScriptBank.com) has no control over such sites and resources, you acknowledge and agree that [JavaScriptBank.com](http://JavaScriptBank.com) is not responsible for the availability of such external sites or resources, and does not endorse and is not responsible or liable for any content, advertising, products, or other materials on or available from such sites or resources. You further acknowledge and agree that [JavaScriptBank.com](http://JavaScriptBank.com) shall not be responsible or liable, directly or indirectly, for any damage or loss caused or alleged to be caused by or in connection with use of or reliance on any such content, goods or services available on or through any such site or resource.[/CENTER]

[/CENTER]