CHAPTER 10 ■ AN ANIMATED SLIDESHOW
In some ways, this situation is similar to that of the JavaScript image gallery presented in earlier chapters. Both contain lists of links. In both cases, we want to show an image. The difference is that here, we want to show the image when an onmouseover event handler is triggered, instead of an onclick event. We could adapt the image gallery script. All we would need to do is change the event handler for each link from onclick to onmouseover. That would work, but it wouldn’t be very smooth. The first time that the user hovers over a link, the new image would be loaded. Even on a fast connection, this will take a little time. We want a more immediate response.
The solution If we use a different image for the visual preview of each link, there will be delays in swapping out the images. Besides, simply swapping out the images isn’t the effect we want. We’re looking for something with a bit more pizzazz. Here’s what we’ll do: 1.
Make a composite image of all the previews.
2.
Hide most of this image.
3.
When the user hovers over a link, display just a part of the image.
I’ve made a composite image of the three previews plus one default view.
The image is called topics.gif. It is 400 pixels wide and 100 pixels tall. We’ll insert the topics.gif image into list.html, giving it an id of "preview": <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Web Design</title> </head> <body> <h1>Web Design</h1> <p>These are the things you should know.</p> <ol id="linklist"> <li> <a href="structure.html">Structure</a> </li> <li> <a href="presentation.html">Presentation</a> </li> <li> <a href="behavior.html">Behavior</a> </li>
189