This post isn’t really going to be about javascript rollovers, as they have been covered in the past and really are at the point where CSS has basically replaced them. This post is actually going to briefly explain how to preload an image with javascript, then add it to the page (either as a new image or replacing an existing image).
Let’s say you have a page with multiple thumbnails that can be clicked to load the full-sized image in a specific area of the page. In the old days, we would have done this in one of two ways: 1) Make the link actually lead to a different page with that new image shown or 2) Load all of the images at once, hiding them with CSS, slowing down the initial load time of the page.
With the Javascript image() object, however, you can actually preload the images when the appropriate thumbnail is clicked or even after the page finishes loading. You can even display a “loading” indicator until the new image is fully loaded.To do this, you need to first identify each of your images, thumbnails and the area in which you want the full-sized image to load. Your HTML might look something like:
<img id="fullsize" /> <ul id="thumbs"> <li id="thumb1"><img src="thumb1.jpg" /></li> <li id="thumb2"><img src="thumb2.jpg" /></li> <li id="thumb3"><img src="thumb3.jpg" /></li> </ul>
Next, you need to insert your javascript event handlers. That might look something like:
<img id="fullsize" /> <ul id="thumbs"> <li id="thumb1"><a href="" onclick="return switchFull(1)"><img src="thumb1.jpg" /></a></li> <li id="thumb2"><a href="" onclick="return switchFull(2)"><img src="thumb2.jpg" /></a></li> <li id="thumb3"><a href="" onclick="return switchFull(3)"><img src="thumb3.jpg" /></a></li> </ul>
From there, we will write a javascript function to handle the switch.
<script type="text/javascript">
function switchFull(what) {
/* Change the variable below to the appropriate location for the directory in
which your images reside if you are not keeping this HTML file in the same directory. */
var imgsDir = '';
/* Uncomment the two lines below and adjust the loadImg variable to the
actual location of your loading image if you want to use an image to
indicate the real picture is loading. */
// var loadImg = imgsDir+'ajax-loader.gif';
// document.getElementById('fullsize').src = loadImg;
/* Adjust the variables below to specify the width and height of the full-sized images */
var h = 250;
var w = 250;
/* Adjust the variable below to match the location of the full-sized images */
var imSrc = (imgsDir+'full'+what+'.jpg');
var newImg = Image(w,h); // The two numbers in the Image function are optional. They specify the width and height
newImg.onload = function() {
document.getElementById('fullsize').src = newImg.src;
}
newImg.src = imSrc;
return false;
}
</script>
This type of function can be used in conjunction with AJAX to switch out images and content and much more.
Also, in my example, I set up the links so that they will actually lead to a different version of the same page if javascript is disabled. You will need to set up that function for yourself.
I’ve uploaded a ZIP archive with an example HTML file and some images to use with it. The images were downloaded from Google Images search. I claim no ownership or rights to any of the images in the archive.
Two of the full-sized images are actually not JPG images, I just changed the extension to make it work with the simple script I wrote. You could probably get more detailed with your javascript and use the “complete” property of the image() object to switch your plan if a JPG doesn’t load, then look for a GIF or PNG. Or, you could simply make sure that all of your images are the same file type. Finally, you could even use a server-side language like PHP or ASP to return the correct file extension. Regardless, that’s beyond the scope of this simple tutorial. Good luck.