»
EnglishFrenchVietnamese

Print - Four-state of image - JavaScriptBank.com

Full version: jsB@nk » Image » Four-state of image
URL: https://www.javascriptbank.com/four-state-of-image.html

Four-state of image © JavaScriptBank.comMove 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. Images are linkable, of course, though we don't have them linked in this demo.

Full version: jsB@nk » Image » Four-state of image
URL: https://www.javascriptbank.com/four-state-of-image.html



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


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