| Four-State Image Button |
 |
 |
 |
| Written by Andrew Lechlak |
| Saturday, 17 October 2009 06:14 |
|
<!-- 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 --> <!-- STEP ONE: Paste this code into the HEAD of your HTML document --> <HEAD> <!-- This script and many more are available free online at --> <!-- The JavaScript Source!! http://javascript.internet.com --> <!-- Original: CodeLifter.com --> <!-- Web Site: http://www.codelifter.com --> <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> </HEAD> <!-- STEP TWO: Copy this code into the BODY of your HTML document --> <BODY> <!-- This script and many more are available free online at --> <!-- The JavaScript Source!! http://javascript.internet.com --> <!-- Original: CodeLifter.com --> <!-- Web Site: http://www.codelifter.com --> <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_2.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 = "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> <!-- Script Size: 3.38 KB --> http://javascript.internet.com/buttons/four-state-image-button.html |
Contact Information
Recent Project - .Net Recorder