Intrafoundation Software
Making Atomic Warfare Fun Again
[Back to Javascript tutorial index]

How to do rollovers

A rollover is both easy to do and hard to explain.

First off though, what exactly IS a rollover anyway?

See the yellowish face at the top of the page? Take your mouse pointer and roll it over it. Does it bare it's teeth? Move the mouse away. Does it stop? -- That's a rollover. Ie, when you roll your pointer over it, something changes. Usually what changes is that single image, though you can of course change several at a time, or start playing MIDI music, etc etc.

In this instance, what we are doing is called "image replacement". When your mouse pointer either moves over or away from the image, we simply change what is being shown. We are using two images, howto1_rollover.gif and howto1_rollout.gif.

howto1_rollover.gif

howto1_rollout.gif

Btw, the term "over", as in rollover or mouseover, means to move over or into a region, in this case the area in which the smiling image resides. And the term "out", as in rollout or mouseout, means to move out of that region.

Anyway, you now have a general idea of what's going on, at least enough to probably explain it to someone else. But how do you implement it in a practical application? How do you code it yourself? That's the question.

First off, you need to grab the images you wish to use in a special image cache (so you can switch back and forth between them without that annoying internet lag). Then you need to set up the functions that handle it when someone rolls the pointer over the image and when someone rolls the pointer off of (or out of the region of) that image. Lastly, you need to add a bit of javascript and HTML to a standard HTML img tag to allow the rollover and rollouts to be carried out by your browser.

It's actually a lot easier than that last paragraph might make it sound, btw. :-)

The first two parts of this, as demonstrated on this page by the yellow face, are carried out by the following bit of javascript code placed in between the <head> and </head> tags.

<script language="JavaScript">
<!--
	if(document.images) {
		rollover = new Image(42,36);
		rollout = new Image(42,36);
		rollover.src = "howto1_rollover.gif";
		rollout.src = "howto1_rollout.gif";
	}
	function mycat_rollover() {
		if(document.images) document.images["mycat"].src=rollover.src;
	}
	function mycat_rollout() {
		if(document.images) document.images["mycat"].src=rollout.src;
	}
//-->
</script>

The last part is accomplish by the following mix of HTML and javascript.

<center>
<a href="tutorial.html" onMouseOver=mycat_rollover() onMouseOut=mycat_rollout()><img name="mycat" src="images/howto1_rollout.gif" width=42 height=36 border=0 hspace=0 vspace=0></a><br clear=all><</td>
</center>

Now, before we get into explaining each of those lines, we should mention something you may or may not be wondering about. Will this work on all browsers? The answer is of course no. It only works on browsers supporting javascript version 1.1 or higher. As of this writing that includes Netscape Navigator 3.0 and higher (of course, being that they created javascript in the first place) and the beta of Microsoft Internet Explorer 4.0.

So what happens on other browsers? Usually nothing at all. The way I've set this code up they should simply see a static, unchanging image. But the people using old outdated browsers that don't understand at least javascript 1.1 probably weren't expecting to see anything fancy happening anyway, so I doubt they'll be suprised if it doesn't work for them.

Those browsers that understand Javascript 1.0, such as Netscape Navigator 2.x and Microsoft Internet Explorer 3.x are a special problem. They understand javascript, but not how to do image replacement. So we have to have our script check if the browser understands how to do image replacement, or the page will crash and spew out errors. And we don't want that.

What some people do is a lot of complex checking of the browser user agent, seeing who makes the browser, what version it is, what platform it's running, etc etc. What a headache. Instead, what I've been doing for many moons now is directly asking the browser if it knows what the image object is by using the following conditional statement.

	if(document.images) {
		//do something
	}

If the browser knows what an image is then document.images will be an object type (something other than 0 or Null). If it doesn't, then it will be 0 or Null. Don't worry too much about this. Simply understand that this will detect if the browser understands how to do image replacement.

Ok... Take a breath. And...

The first part of the javascript you saw above which was...

	if(document.images) {
		rollover = new Image(42,36);
		rollout = new Image(42,36);
		rollover.src = "howto1_rollover.gif";
		rollout.src = "howto1_rollout.gif";
	}

...grabs the yellow face images into a special image cache. See the line with rollover = new Image(42,36) on them? That is reserving memory for an image 42 pixels wide by 36 pixels high, and calling this image "rollover". You could have named it anything I should mention, but calling it "billybobxy1720_markA" might have been a wee bit confusing. We also reserve space for the rollout image. See that?

Ok. So, we've reserved space in this special cache I keep talking about. How do you get the image INTO it? That what the line with rollover.src = "howto1_rollover.gif"; does. It tells the browser to run out, grab the howto1_rollover.gif image and place it in the image cache called rollover. The next line does the same but with the rollout image and rollout image cache.

Ok. You have the images, now what?

	function mycat_rollover() {
		if(document.images) document.images["mycat"].src=rollover.src;
	}
	function mycat_rollout() {
		if(document.images) document.images["mycat"].src=rollout.src;
	}

Here for your viewing pleasure are two functions. In javascript. If you call the one called mycat_rollover() then we replace the yellow face image (which we call "mycat" later on down the page -- I should have mentioned that before) with whatever image is in the rollover image cache. If we call mycat_rollout() we do the same but replace it with the image in the rollout image cache.

You know what the if(document.images) bit does. But what about the rest of the line? The document.images["mycat"].src=rollover.src; part? It says to replace the image we call "mycat" with the image in the rollover image cache.

Well, let us wrap this up before we both get tired of reading about rollovers. :-)

Finally, we get to the HTML and javascript that sets it all in motion. Below is what was once a regular img tag that would display the image howto1_rollout.gif. It is wrapped in an anchor tag, so that if clicked on it will go to another page. In this case, to the How To...? table of contents for this site.

<center>
<a href="tutorial.html" onMouseOver=mycat_rollover() onMouseOut=mycat_rollout()><img name="mycat" src="images/howto1_rollout.gif" width=42 height=36 border=0 hspace=0 vspace=0></a><br clear=all><</td>
</center>

What did we do to it so that it can do rollovers? Magic. No really. Oh, ok. It's cryptic as a bit of the old powers were to weave.

What it does is simply give the image the name of "mycat" (I was born under the sign of the Lion, if there was some curiosity, and so...) then it sets up the event handles for that image as mycat_rollover() if the pointer/mouse passes over the image and mycat_rollout() if the pointer thingy moves out of the image region.

I think that's about it. There was a request by Oaf(?) via ICQ after he read the rough draft to produce a further document describing techniques for handling multiple interlinked graphics on a page. Maybe. :-)

Hmm, says Tommy Raven. Perhaps I should write a book on Javascript. Everyone else seems to be doing it. But, for now, there is silence....

top