Rollover

Code:

<style type="text/css">

#buttonName1 {background-image:url(http://www.google.com/logos/Logo_25blk.gif);}
#buttonName1:hover {background-image:url(http://www.google.com/logos/Logo_25wht.gif);}

#buttonName2 {background-image:url(http://www.google.com/logos/Logo_25blk.gif);}
#buttonName2:hover {background-image:url(http://www.google.com/logos/Logo_25wht.gif);}

#buttonName3 {background-image:url(http://www.google.com/logos/Logo_25blk.gif);}
#buttonName3:hover {background-image:url(http://www.google.com/logos/Logo_25wht.gif);}

a.buttonName {

text-indent:-1000em; /* hides button text */
display:block; float:left; width:75px; height:32px; /* alows fixing button size */
margin-right:10px; /* space after button */
border:1px solid gray; /* button border */
}

a.buttonName {background-color:black;}
a.buttonName:hover {background-color:white;}
</style>

<a id="buttonName1" class="buttonName" href="#">Description1</a>
<a id="buttonName2" class="buttonName" href="#">Description2</a>
<a id="buttonName3" class="buttonName" href="#">Description3</a>


Sample:

Ultra compliant javascript snippet


<script type="text/javascript">
//<![CDATA[

alert("javascript");

//]]>
</script>