- A widely-used technique for making websites more interactive.
- When the mouse hovers over an image, the image is replaced.
- The new image is usually a more brightly-colored version of the original image.
- Preloading the images makes the illusion more effective (see below).
Here's our Web Cellar example and its source
- The effect is triggered by the onMouseover
- This event can be detected only for objects defined by tags containing the HREF
attribute, i.e. <A> and <AREA>.
- The mouseover does only half the job; it fails to restore the original image.
- Interim solution: Reload.
- You'll fix this in the lab.
- Copy the example web page and edit it as follows.
- Restore the original image when the mouse leaves the image area.
- To do this, add an onMouseOut
event handler to the <A> tag.
- Here are the images, for easy downloading:
Don't peek unless you're stuck!
Extra for Experts
- Add these images, with their corresponding mouseovers:
- Instead of referring to the images by name, refer to them as elements of the images
- This array is a sub-object of the document object.
- It is constructed automatically by the browser when it loads the page.
- Each element has a src attribute, which contains the name of the image
- For example, to replace the second image in the page:
document.images.src = 'resume_bright.jpg'>
- If you're very clever, you can economize on code by looping over the array.
- Another flaw in the example program: it doesn't preload the images.
- Thus, response to the first mouseover could be sluggish. Fix this.
- Here's an example of preloading an image:
var image1 = new Image(127,45)
image1.src = "image1_bright.jpg"
- 127 and 45 are the image's pixel width and height, respectively.
- This code should be written to execute when the page loads.
- Solution: run it.
- Solution: source code.