• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Creating Mouseover Effects

By far the most popular special effect on the Web is the mouseover (also known as a rollover): When the user places his mouse over an image, it gets replaced with a different image. (The usual corollary effect involves restoring the original image when the user moves his mouse off the new image.) Unlike some gimmicky effects that serve no useful purpose, a well-done mouseover can enhance the user's experience of the page by supplying visual cues about image links. For example, the mouseover image could be a "highlighted" version of the image or an arrow that appears alongside the image. You can also use mouseovers to supply extra information about what an image link does. For example, the mouseover could display a text image that offers a description of the link.

The Simplest Mouseover

From what you've learned so far in this chapter, I think you can guess how a mouseover might work: Set up a handler for the MouseOver event that changes the src property of an Image object to display a different file. However, I didn't mention anything about the MouseOver event when I discussed the Image object's events earlier in this chapter. That's because Netscape 4 doesn't support the MouseOver event on the Image object. Netscape 6 supports it, as does Internet Explorer 4 and later. However, since as I write this Netscape 4 is by far the most popular version of Netscape in use, it's a bit premature to use the Image object's MouseOver event.


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint