JavaScript EditorBest javascript editor debugger     Ajax website 
↑


Main Page

Previous Page
Next Page

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 img tag's name attribute (see step 11, below). Note that there are no spaces before or after the periods.

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.

4.
Type " to complete the attribute.

5.
Type onmouseout="document. imgname.src=, where imgname is the value of the img tag's name attribute (see step 11, below). Note that there are no spaces before or after the periods.

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.

7.
Type " to complete the attribute.

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

9.
Type > to finish the link.

Figure 20.7. Notice that the file names of the two images are enclosed in single quotes, since the script itself is contained in double quotes.


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 the 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.
Type alt="alternate text", where the alternate text describes the initial image.

14.
Add other attributes to the img tag as desired. (For more details, consult Chapter 5, Images.)

15.
Type /> to complete the img tag.

16.
Type </a> to complete the link tag.

Figure 20.8. The image that appears initially is the one specified by the img tag.


Figure 20.9. When the visitor passes the mouse over the image, the image referenced by the onmouseover attribute is revealed.


Figure 20.10. When the visitor points the mouse away from the image, the image referenced by the onmouseout attribute is displayed (in this case, it's the same as the original image specified by the img tag).


Tips

  • The images should be the same size. If they're not, the second one will be shoehorned in to fit.

  • Note that the img element's name attribute is used in both step 2 and step 5. That's because the name attribute identifies the space (the particular img element) that will be replaced with both of the other images. The name must match exactly, including case.

  • If you don't want the image to be part of the link, after step 9, type some clickable text, then do step 16 before completing steps 1015.

  • You can preload the images involved in a rollover so that the effect is immediate. For more details, consult Loading Images into Cache on page 326.



Previous Page
Next Page


JavaScript EditorBest javascript editor debugger     Ajax website 
→