Full version: jsB@nk » Form » Button » HoverButtons Script
URL: https://www.javascriptbank.com/hoverbuttons-script.html
This script takes simple DIV elements and makes them change state when you mouseover, mouseout, and press on them.All you have to do is create your DIV elements, create 3 stylesheet rules, and run a javascript command for each 'class' of button.
Full version: jsB@nk » Form » Button » HoverButtons Script
URL: https://www.javascriptbank.com/hoverbuttons-script.html
<style type="text/css">body{background-color:white;font-size:10pt;font-family:verdana;color:black;padding:10 50 0 50;}td{font-size:10pt;font-family:verdana;color:black;}.code{font:10pt sans-serif;color:maroon;line-height:125%;}.button{width:150px;text-align:left;color:black;font-size:9pt;font-family:verdana;font-weight:bold;background-color:lightgrey;border-color:lightgrey;border-width:2px;border-style:solid;padding:4 6 4 6;}.buttonhover{width:150px;text-align:left;color:black;font-size:9pt;font-family:verdana;font-weight:bold;background-color:darkgray;border-color:darkgray;border-width:2px;border-style:outset;padding:4 6 4 6;}.buttonpress{width:150px;text-align:left;color:black;font-size:9pt;font-family:verdana;font-weight:bold;background-color:darkgray;border-color:darkgray;border-width:2px;border-style:inset;padding:6 6 2 8;}.clz{width:75px;text-align:center;color:black;font-size:9pt;font-family:courier;background-color:#CBE7FF;border-color:#CBE7FF;border-width:1px;border-style:solid;padding:3 5 3 5;}.clzhover{width:75px;text-align:center;color:blue;font-size:9pt;font-family:courier;background-color:#A3D5FF;border-color:#A3D5FF;border-width:1px;border-style:outset;padding:3 5 3 5;}.clzpress{width:75px;text-align:center;color:red;font-size:9pt;font-family:courier;background-color:#A3D5FF;border-color:#A3D5FF;border-width:1px;border-style:inset;padding:3 5 3 5;}.test{width:150px;text-align:left;color:black;font-size:9pt;font-family:verdana;font-weight:bold;background-color:#FFDDFF;border-color:#FFDDFF;border-width:2px;border-style:solid;padding:4 6 4 6;}.testhover{width:150px;text-align:left;color:black;font-size:9pt;font-family:verdana;font-weight:bold;background-color:#FE95FF;border-color:#FE95FF;border-width:2px;border-style:outset;padding:4 6 4 6;}.testpress{width:150px;text-align:left;color:black;font-size:9pt;font-family:verdana;font-weight:bold;background-color:#FE95FF;border-color:#FE95FF;border-width:2px;border-style:inset;padding:6 6 2 8;}</style><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><script language="javascript" title="hoverbuttons.js">function hMse(){this.className=this.cN+"hover";if(typeof this.omv=="function")this.omv();}function oMse(){this.className=this.cN;if(typeof this.omt=="function")this.omt();}function uMse(){this.className=this.cN+"hover";if(typeof this.omp=="function")this.omp();return false;}function dMse(){this.className=this.cN+"press";if(typeof this.omd=="function")this.omd();return false;}function addW3CButtons(which){if(document.getElementsByTagName){var ea=document.getElementsByTagName(which);for(i=0;i<ea.length;i++){if(ea[i].getAttribute('hoverbuttons')){if(document.all)ea[i].onselectstart=function(){return false;}ea[i].cN=ea[i].className;ea[i].style.cursor=(document.all)?'hand':'default';ea[i].omv=ea[i].onmouseover;ea[i].onmouseover=hMse;ea[i].omt=ea[i].onmouseout;ea[i].onmouseout=oMse;ea[i].omp=ea[i].onmouseup;ea[i].onmouseup=uMse;ea[i].omd=ea[i].onmousedown;ea[i].onmousedown=dMse;}}}}addW3CButtons('div');</script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><table cellpadding=0 cellspacing=0 border=0><tr><td><div style="background-color:lightgrey; border-width:1px; border-style:outset; padding:2 2 2 2"><div class="button" hoverbuttons="yes">Example 1</div><div class="button" hoverbuttons="yes">Example 2</div><div class="button" hoverbuttons="yes">Example 3</div><div class="button" hoverbuttons="yes">Example 4</div><div class="button" hoverbuttons="yes">Example 5</div><div class="button" hoverbuttons="yes">Example 6</div><div class="button" hoverbuttons="yes">Example 7</div></div></td></tr></table><table cellpadding=0 cellspacing=0 border=0><tr><td><div style="background-color:#CBE7FF; border-width:1px; border-style:outset; border-color:#CBE7FF; padding:2px"><table cellpadding=0 cellspacing=0 border=0><tr><td><div class="clz" hoverbuttons="yes">Button</div></td><td><div class="clz" hoverbuttons="yes">Button</div></td><td><div class="clz" hoverbuttons="yes">Button</div></td><td><div class="clz" hoverbuttons="yes">Button</div></td></tr><tr><td><div class="clz" hoverbuttons="yes">Button</div></td><td><div class="clz" hoverbuttons="yes">Button</div></td><td><div class="clz" hoverbuttons="yes">Button</div></td><td><div class="clz" hoverbuttons="yes">Button</div></td></tr><tr><td><div class="clz">Button</div></td><td><div class="clz">Button</div></td><td><div class="clz">Button</div></td><td><div class="clz">Button</div></td></tr></table></div></td></tr></table><div class="test" hoverbuttons="yes" onmousedown="window.status='MOUSEDOWN'" onmouseup="window.status='MOUSEUP'" onmouseover="window.status='MOUSEOVER'" onmouseout="window.status='MOUSEOUT'">Button</div><div class="test" hoverbuttons="yes">Button Text</div><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->