JavaScript demonstration

Exercise 12 - Rollover images

  1. In Notepad, delete the header section of JavaScript11.html i.e. delete all program lines between and including <head> and </head>.
  2. In the body section, delete the second row of the table. The table now has only one row and two columns.
  3. Delete the second datum of the remaining row and replace it with the following:
    <td width=350><center>
    <a href="next.html"
    onMouseover="document.vangogh.
    src='images/vangogh1.jpg'"
    onMouseout="document.vangogh.
    src='images/vangogh3.jpg'"><img
    src="images/vangogh3.jpg" height=360 border=0
    name="vangogh"></a></center></td>
  4. Save as JavaScript12.html
  5. Open JavaScript12.html in your browser. When you point at one image, it should rollover to the other. When you remove the cursor from this image, the original picture should reappear.

Order a resource

Home page

Copyright