Roll-Over Button Demo

This demo illustrates how to create a roll-over button with just a bit of HTML and a few lines of JavaScript.



Source Code
<script language="JavaScript">
<!--
  home_img_out = new Image();
  home_img_out.src = "/images/home.gif";

  home_img_over = new Image();
  home_img_over.src = "/images/home_over.gif";
// -->
</script>  
<script language="JavaScript">
<!--
  function display(imgName, imgUrl) {
    if (document.images && typeof imgUrl != 'undefined')
      document[imgName].src = imgUrl.src;
  }
// -->
</script> 

<a href="http://www.4guysfromrolla.com/"
     onmouseover="display('home_img', home_img_over);"
     onmouseout="display('home_img', home_img_out);"
    >
  <img src="/images/home.gif" name="home_img" border="0" />
</a>

[Return to the article...]