Current course:

Javascript Rollovers

A rollover is a screen event that occurs when the mouse is moved over an area of a web page. One way to create this effect is by using Javascript.

Here are my two images:
square design 1    square design 2

The Code:

<head>
      <script type="text/javascript">
            /*This part is for NEW browsers with JavaScript 1.1+ */
            if (document.images){             
                  upimage = new Image(100, 100);
                  upimage.src = "images/tile1.gif"
                  downimage = new Image(100, 100);
                  downimage.src = "images/tile2.jpg";
            } else {
                  upimage = "";
                  downimage = "";
                  document.square = "";
            }
      </script>
</head>

<body>
<a href="http://www.bgsu.edu" onmouseover="document.square.src = downimage.src;" onmouseout="document.square.src = upimage.src;">
      <img src="images/tile1.gif" width="100" height="100" border="1" name="square">
</a>
</body>



The Example: