Advanced Rollovers: Changing many images at once

This is the third in a series of articles on javascript rollovers. You have read my first article How to do rollovers, right? If not, do so now. Then it's sequel Rollover arrays. This series is written in a somewhat simplistic, redundant, and wordy fashion so as not to entirely baffle those of you who started playing with javascript earlier this very day. :-)

NOTE: You must must have javascript enabled to make sense of this page.

Anyway, since I first created the initial rollover HowTo back when I coded javascripts.com, I've recieved literally a good 100 to 200 emails asking how to do what I'm going to discuss in this article--Changing multiple images at once with a rollover. It's actually very easy. Very very easy if you understood the first article.

I've made an example below to illustrate the process. It consists of four rollover buttons and a large "sample" image to the left which consists of simple geometric glass objects. By moving your cursor over the words to the right, not only do you activate the usual rollover effects (as explained in previous tutorials) but you change the "sample" image on the left. Yes, you're changing two images at once here. That's what this tutorial is all about. How do you do that?

Think that's cool? (I know a lot of you do from the email clogging up my mail box.) Well, I'll show you how to do it yourself.

The primary difference between what is going on here and the second tutorial in this series is the addition of two sections of intermixed HTML and Javascript. Let us take the easiest first. The one composed mostly of HTML:

<table border=0 cellspacing=10 cellpadding=10>
<tr>
	<td>	
	<img name="howtoi" src="images/howto3i1.jpg" width=344 height=258 border=0 hspace=0 vspace=0 alt="howtoi"><br clear=all>
	</td>
	<td>
	<a href="howto3_1.html" onMouseOver=howtoOn(1) onMouseOut=howtoOff(1)><img name="howto1" src="images/howto3_1_out.gif" width=200 height=40 border=0 hspace=0 vspace=0 alt="RollOver1"><br clear=all></a>
	<a href="howto3_2.html" onMouseOver=howtoOn(2) onMouseOut=howtoOff(2)><img name="howto2" src="images/howto3_2_out.gif" width=200 height=40 border=0 hspace=0 vspace=0 alt="RollOver2"><br clear=all></a>
	<a href="howto3_3.html" onMouseOver=howtoOn(3) onMouseOut=howtoOff(3)><img name="howto3" src="images/howto3_3_out.gif" width=200 height=40 border=0 hspace=0 vspace=0 alt="RollOver3"><br clear=all></a>
	<a href="howto3_4.html" onMouseOver=howtoOn(4) onMouseOut=howtoOff(4)><img name="howto4" src="images/howto3_4_out.gif" width=200 height=40 border=0 hspace=0 vspace=0 alt="RollOver4"><br clear=all></a>
	</td>
</tr>
</table>

As you see this is a table of two cells. One large one on the left contains the image howto3i1.jpg, and the other contain a series of rollovers which should look very familiar to you who have read the previous tutorial. The code is virtually the same in fact. The only real difference is the cell containing the howto3i1.jpg image. Clicked on the link yet? It's the image of a glass box I specifically raytraced today for this tutorial. For those of you still struggling to understand, this piece of HTML/javascript lays out the form of images as:

It also sets up rollover code to be actived if the cursor moves over any of the word images to the right. And just as importantly it names all of the images. Notice that we named the large image on the left howtoi. Also notice that unlike the other images it doesn't have a bit of javascript or anything wrapped around it? It doesn't need it. All we need to change the image is to know it's given name, which is howtoi. At the same time we change the rollover image, we change this image.

You can change it to whatever you wish, but in this case we have a series of images named: howto3i1.jpg, howto3i2.jpg, howto3i3.jpg, and howto3i4.jpg. They correspond with our four sets of rollover images: howto3_1_out.gif and howto3_1_over.gif; howto3_2_out.gif and howto3_2_over.gif; howto3_3_out.gif and howto3_3_over.gif; and howto3_4_out.gif and howto3_4_over.gif.

In other words we have a set of four geometric objects: A Box, A Sphere, A Cylinder and a Cone. The Box is object 1, the Sphere object 2, the Cylinder object 3, and the Cone object 4. Hopefully this is obvious now and I'm irritating you by even mentioning it. We load in those four geometric object images with code similiar to that used to load in the rollover arrays (as mentioned in tutorial 2, but you knew that already, right?)

//load in the large howto image tiles
howtoi = new Array(howtomax);
for(var n=1;n<=howtomax;n++) {
	howtoi[n]=new Image(344,258);
}
for(var n=1;n<=howtomax;n++) {
	howtoi[n].src="images/howto3i"+n+".jpg";
}

This creates an array called howtoi which contains in howtoi[1] the image howto3i1.jpg, etc.

So, ok, ok, you say. Enough already. I see how the geometric images are loaded in. If you tell me anything else it's going to confuse me! How's it work? Well, when you move your cursor over object 2's rollover for example (the sphere), we change the images named howto2 and howtoi to howto3_2_over.gif and howto3i2.jpg, respectively. When you move the out of object 2's region it only changes howto2's image to howto3_2_out.gif. It doesn't affect the large image howtoi.

What the code to do that?:

function howtoOn(i) {
	if(document.images) {
		document.images["howto"+i].src=howtoover[i].src;
		document.images["howtoi"].src=howtoi[i].src;
	}
}

The howtoOff() code is exactly the same as in tutorial 2. It hasn't changed. In the function howtoOn() the main difference is the addition of the line document.images["howtoi"].src=howtoi[i].src;. It (can you guess by now?) changes the large howtoi image to point to one of the images you loaded into the howtoi image array earlier-- you know: box (1), sphere (2), cylinder (3) or cone (4).

That's pretty much it. There are a lot of things to contemplate here. And several different ways you could vary this technique. Copy this page and the images (surely you know all their names by now :) and experiment with it if you like. That's what it's for. That and to simply give an URL to people who email me about javascript questions.