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

Chapter 4. Image Basics > Triggering Rollovers from a Link

Triggering Rollovers from a Link

In earlier examples, the user triggered the rollover by moving the mouse over an image. But you can also make a rollover occur when the user points at a text link, as in Figures 4.5 and 4.6. All you need to do is put a text link within the <a href> tag, as in Script 4.4.

Figure 4.5. The text link is the triggering device for this rollover.

Figure 4.6. When the user points at the link, the graphic below changes.

Script 4.4. This script triggers a rollover from a text link.

To trigger a rollover from a link

  • <a href="next.html" onmouseover=
    → "document.arrow.src=arrowRed.src"
    → onmouseout="document.arrow.src=
    → arrowBlue.src">Next page</a>

    Note that the text link that says “Next page” is within the anchor tag, which makes it the thing that onmouseover and onmouseout use as a trigger. We've moved the img tag out of the link tag; it now follows the anchor tag.

✓ Tip

  • This trigger technique is useful when you want to provide the user with a preview of what they will see if they click the link at which they are pointing. For example, say you have a travel site describing trips to Scotland, Tahiti, and Cleveland. On the left of the page could be a column of text links for each destination, while on the right could be a preview area where an image appears. As the user points at the name of a destination, a picture of that place appears in the preview area. Clicking on the link takes the user to a page detailing their fabulous vacation spot.

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