JavaScript images and rollovers

• Manipulate images using JavaScript
• Create rollover images using JavaScript
• Create links that control multiple images

• This rollover changes an image as the mouse pointer moves over it.
• The "onmouseover" event signals when the mouse pointer has moved over the element.
• The "onmouseout" event signals when the mouse pointer has moved off the element.
• The image functions as a link and goes to a different page when clicked.
• The code can be placed inline within the link ("a") element using document.getElementById
  • Example: onmouseover="document.getElementById('rollover').src = '../images/th_musicCat.jpg';"
  • Example: onmouseout="document.getElementById('rollover').src = '../images/th_computerCat.jpg';"
  • See roll1.html for an example.
• The code can be placed inline within the link ("a") element using the doument.images array
  • Example: onmouseover="document.images['rollover'].src = '../images/th_musicCat.jpg';"
  • Example: onmouseout="document.images['rollover'].src = '../images/th_computerCat.jpg';"
  • See roll1a.html for an example.
• The code can be placed non-inline (in the head element or external file)
  • First get the image element: let elem = document.getElementById('rollover');
  • Then set handlers: elem.onmouseover = function() { elem.src = '../images/th_musicCat.jpg'; };
  • Then set handlers: elem.onmouseout = function() { elem.src = '../images/th_computerCat.jpg'; };
  • See roll1b.html for an example.

• The images can be preloaded into variables in the head element, which will force the browser to load those images before the page starts to display.
• Preloading causes a longer pause before the page starts to display, but helps eliminate pauses caused by having to load an image for the first time when a rollover is triggered.
• See roll2.html to see a rollover with preloading.

• Having multiple rollovers on a page is a simple extension of having a single rollover.
• As more rollovers are added, it will make sense to store the images in an array.
• See roll3.html for multiple rollovers with preloading

• Rollovers can also be text that change an image elsewhere.
• See roll4.html for multiple text link rollovers changing multiple images.

• This is a fairly straightforward extension of the basic link-controlled rollover.
• See roll5.html for multiple text links controlling one image.

• This example stores the images in an array.
• It also keeps two arrays of images and an array of base image names.
• A random image for the image elements is chosen from the array using Math.random.
• A counter is kept and the rollover images are shown in cyclic order from the arrays.
• One image acts as both a link and a control for two rollovers - itself and a second image.
• See roll6.html for a link rollover controling two images.