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

Chapter 18.  JavaScript Essentials > Changing an Image When a Visitor Points

Changing an Image When a Visitor Points

You can make an image change when the visitor points at it. This is commonly called a "rollover".

To change an image when the visitor points at it:

1.
Type <A HREF="page.html", where page.html is the page that will be displayed if the visitor actually clicks the link (as opposed to just pointing at it).

2.
Type ONMOUSEOVER="document. imgname.src=, where imgname is the value of the NAME attribute in the IMG tag (see step 11, below).

3.
Type 'image-in.jpg', where image-in.jpg is the name and extension of the image file that should be displayed when the visitor points at the image.

Or, if you've preloaded the images into cache, type label.src, where label matches the label used in step 3 on page 305.

4.
Type " to complete the attribute.

5.
Type ONMOUSEOUT="document.imgname.src=, where imgname is the value of the NAME attribute in the IMG tag (see step 11, below).

6.
Type 'image-out.jpg', where image-out.jpg is the name and extension of the image file that should be displayed when the visitor points away from the image.

Or, if you've preloaded the images into cache, type label2.src, where label2 matches the label used in step 3 on page 305.

7.
Type " to complete the attribute.

Figure 18.10. If you preload the images as shown here (and explained on page 305), you can then reference the label names. Or, if you prefer to keep it simpler, you can reference the image directly as in document.catpic.src="image.url".


8.
Add other link attributes as desired (see Chapter 7, Links).

9.
Type > to finish the link.

10.
Type <IMG SRC="initialimage.jpg", where initialimage.jpg is the file name for the image that should appear before the visitor even picks up their mouse.

11.
Type NAME="imgname", where imgname identifies this space for the images that will be loaded.

12.
Type WIDTH=w HEIGHT=h, where w and h represent the width and height of the images, respectively.

13.
Add other attributes to the IMG tag as desired (see Chapter 5, Using Images).

14.
Type > to complete the IMG tag.

15.
Type </A> to complete the link tag.


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


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