Rollover Links (Images & Text)

This web page demonstrates creating an image that changes as the mouse rolls over the image.  Also has text changing with OnMouseOver using Cascading Style Sheets.  Right Click here, then choose "Save Taget As" to download the ex_rollover.css file.  Use "View Source" to look at the source code for this page.

Text Links.  Also an example using Cascading Style Sheets (CSS).

Normal Link

CSS Link (Styles)

Just the images.  (Blue)

Just the images.  (Red)

Rollover.  Change the source when the mouse rolls over or out.

Rollover using cached images.  Also play with mouse events.
  • onMouseOver - Red
  • onMouseOut - Blue
  • onMouseDown - Blue w/grey words.  (Hold mouse button down!)
  • onMouseUp. - Grey

Change the source of the image.

Disable button feature. under construction  
Images that appear and disappear. under construction  
Rollover when Images are in Layers (<div> tag) 

IE works fine.
Netscape (as of v4.6) has problems.  I've done some research (look for layers at this link) and cannot find how to load the .src property for images within layers.  The .src shows as a value of "undefiined" and cannot be loaded with an image src.