<< .. Extra Credit Exercise : Demo A : Rollovers : PopUp Window : DropDown Menu : Slideshow1 : Slideshow2 : All Class Demos .. >>

Extra Credit Demo: Rollover Buttons


This button links
to the code for
the HEAD tag.

This button links
to the code for
the BODY tag.

This button links
back to the
rollover page.

Rollover Buttons are each made of two pieces of art. An "up" version, or button that show when you first view the page and a "down" version for when you mouseover the button. When you "mouseout", the button returns to its original version.

This code works best if you know an image editing program, such as Photoshop or Fireworks, so you can create your buttons. However, if you don't know how to create your own buttons, you can use this code to swap out images you might already have.

Click on the buttons to see each part of the javascript code you need to make the rollover buttons work.

  • The 1st button on this page [HOME] is linked to the information you need to put in the head of your HTML document.
  • The second button [PETS] links to the information you need to place in the body of your HTML document.