Advanced Rollovers: Using Arrays

There are basically two ways. What's the most obvious? Well, you could for instance create a series of functions to handle each rollover, each with different names, but that would be a little tedious after the fourth or five rollover. The easier way however is to simply use code that lets you tell it how many rollovers you are using and it does the rest. That's what I do, unless special circumstances come up. Three rollovers or Three Thousand, the javascript code itself doesn't change. You, would need to, um, make Three Thousand (x2) rollover graphics however -- and load them across the slow internet, so don't get too carried away.

Ok, first off, the easy part. The HTML that sets up the default images and links we're going to "rollover":

Essentially it's same as in the previous tutorial except that you notice that we have three rollovers now and that each seems to be using a number. The numbers range from 1 to 3. Is that surprising? You have three rollovers and they're numbered 1, 2 and 3? Following so far? Anyway, rollover one (in this example) uses the image name howto1, and you do the mouseout and mouseover on it sending the number 1 through the function. (The function, which we'll do a show and tell with in a second, assumes the howto part of the image name and just tacks the number on.) It's the same with all the other roll overs. Just copy, paste and change the number. If you have Three Thousand rollovers this could be tedious, and so would be easier to use javascript to write out each line, but I didn't want to make things too complicated on you right now. but note that you can do that. There is one great disadvantage in that however. The way I've mixed the HTML and javascript up here, if their browser doesn't support javascript or it's turned off then the page "degrades elegantly". In other words, it stills works. Sure, no Gee-Wiz rollovers effects, but they can still click on the links etc. If you do it all in javascript and javascript isn't working on their browser--well, you're going to tick someone off. Also, it plays bloody hell with some search engine spiders--ie, they won't be able to follow your links and your pages won't show up on those search engines. Usually those two issues are a very strong persuasion to stay away from pure javascript rollovers.

Anyway, lets get on to the new rollover functions shall we? Here there are:

	if(document.images) {
		howtomax=3;
		howtoover = new Array(howtomax+1);
		howtoout = new Array(howtomax+1);
		for(var n=1;n<=howtomax;n++) {
			howtoover[n]=new Image(222,40);
			howtoout[n]=new Image(222,40);
		}
		for(var n=1;n<=howtomax;n++) {
			howtoover[n].src="/intrafoundation/content/forums/740/howto2_"+n+"_over.gif";
			howtoout[n].src="/intrafoundation/content/forums/740/howto2_"+n+"_out.gif";
		}
	}
	function howtoOn(i) {
		if(document.images) document.images["howto"+i].src=howtoover[i].src;
	}
	function howtoOff(i) {
		if(document.images) document.images["howto"+i].src=howtoout[i].src;
	}

A wee bit more complex that the example in the first of this series isn't it? Mainly there are two changes here: The addition of that rollover number that I've mentioned to the functions, and something Min here has more subtly alluded to--Arrays.

"Arrays? What the heck are those", you say. Well, um... I don't feel like spending an hour teching basic computer science here, but arrays are simply a single column list of things. In this instance we have a column of images, actually two columns of images: one for the mouseouts and one for the mouseovers.

In our little example we have three rollovers, so we set the variable howtomax to 3. The way I've organized the code that's the only thing you have to change if you decide to add another thousand or two rollovers to your page. (That and making a few thousand new images to go along with it, as I've mentioned before.)

By changing that number and the "howto" text to whatever you want, you can plug this code into your page without really understanding anything else about how it works. Well, It might be handy to change the new Image(222,40) to reflection the width and height of your images, but javascript never has seemed to really care about that so maybe it doesn't matter.

What? You want me to explain how it works? Really? You can't figure the rest out yourselves? What if I want to go to sleep now, or read a book or something? I'll go into more detail on the next one ok?

No? Well, I'll tell you what. You go lookup function and array in the javascript help pages at Netscape and that'll explain how the objects I use work. I'm only here to explain the theory behind the graphics effect, dude and dudesses. If you want more detail you'll have to wait til my javascript book comes out. :->

BTW: Thanks to mike/joan levitt to pointing out a few "-1" I forgot to remove when I was cleaning up the code for the tutorial. :) That's what happens occasionally when you quickly hack together a page in the middle of the night. If anyone else sees any probs, especially on non WinTel boxes, just beep. 8/4/'98