Demo modified from 'three state rollovers' from JavaScript & AJAX 7th ed., pages 85-90
This version uses unobtrusive (hidden) JS to attach anonymous functions to the onmouseover & onmouseout event handlers for each image inside a link:
thisImage.onmouseover = function() {this.src = this.overImage.src;}
This example depends on the name of the 'out' state of the image to match the 'id' of the same image
For example the out state could be btn1.gif and the over state would need to be btn1_over.gif
In our version you can declare the 'suffix' meaning the extension plus the "_over" or whatever string you add to the name of the 'over' state image, so not all images must be .gif
In the script, you'll find the following reference:
oversuffix = "_over.gif";
If you instead wanted to use a .jpg that uses "_on" as part of the file name, you could change the code to:
oversuffix = "_on.jpg";
Another limitation of this version is that every image inside an <a> tag must be a rollover
This is because the array of images is looped, and each is checked for the presence of an "A" in the parent (container) element:
if (document.images[i].parentNode.tagName == "A")
The capitalized A is part of how the DOM is recognized via JS.
The 'over' version of such an image in an <a> tag is identified and preloaded in this way.