Mouseovers

• 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 code. Observe:

• The effect is triggered by the onMouseover event.
• 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.

Lab

Your task:

• 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:
  

Solution

Don't peek unless you're stuck!

• Run it.
• Source code.

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 array.
  • 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 file.
  • For example, to replace the second image in the page:
          document.images[1].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.