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:

      <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 = "";

<a href="" 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">

The Example: