javascript rollovers, mouseovers, comment tags

missed.a.previous.lesson?.go.here

Astro Lesson #24:
mousing.around.with.the.java.java.jive

As promised, today we will look at javascript rollovers. Due to the neverending evolution of browser software, this will only be applicable to Netscape version 3 and above, and MSIE 4+ however don't let that limit your fun with these nifty little elements - we can show you how to incorporate them into your web page to cater for these, without causing major problems for old no-comprende java browsers.

java.java.what?

Don't know what the heck we are talking about? If you are using the browsers mentioned above, the effect can be seen by 'mousing' over both the Star Map icon and the Retro Rockets icon on this page. Go do it now!

See what happened? (you other guys will just have to use your imagination). The image rolled over - or swapped out - to a new image, presenting that illusive net experience - interactivity. This is a simple version of the rollover which can be expanded to include multiple image swaps and even swapping out images on a different portion of the page.

You can get real fancy, but as usual, Retrogrrl recommends the commonsense approach of starting out small. Now, there are plenty of places out there that explain in great detail how javascript works, but sometimes they go into a little too much detail - we only wanna know how to do it, not why - don't we? Good - lets go ...

out.damn.comment!

First of all, any script needs to be placed between the
<head> and
</head> tags
otherwise you will find all sorts of weirdo things happening - make sure you don't place anything else in the head tags either - even a stray <br> can play havoc. As our little Space Cadets have come to expect, we did do this so we know what we are talking about!

And we need to take care of those poor old browsers who don't understand javascript and have conniptions if made to even look at it - we place all our javascript stuff inside a HTML comment in order to do this.

Sometimes it's handy to put some comments in the HTML of a web page - maybe notations to remind us what a particular bit of code is for : its also a good idea if you prepare templates. Say you have a page that gets updated on a regular basis, the old copy of which is archived for people to still be able to read. Here at r.e.t.r.o.c.i.t.y ReTroGrrl tries to have a new space cadet lesson around every 4 weeks (we did say TRY, not DOES!). Now, she's a tad on the lazy side and doesn't want to write the code from scratch for every lesson - instead she saves the current lesson as a separate file - for instance this lesson will become cadet24.html. (goodness, so many!) Then she uses a template - a pre-setup html page to contain a new work of brilliance - it might look like this ....

<html>
<head> stuff in here
</head>
<body>



</body>
</html>

Where '!' designates a comment - something we want browsers to rudely ignore, as though they did not exist and not display on the page. (The real thing would be a bit more complicated, with image tags etc.) This is the only way to work to ensure continuity and speediness.

juggling.java

On with the show... Let's have a peek at the code used for the rollovers on this page, and then we can dissect each section to figure out how it is working and how you can apply it. One very important point to note : both images must be the same size - as only one set of dimensions can be catered for - the script uses the width and height of the original image. If they are not exact, one will become distorted and not look pretty at all. It may also cause other problems so listen up! Try to test on different browsers. It may be fine on one but throw out horrible errors on another, simply because one element is not quite right.

<SCRIPT LANGUAGE="JavaScript">

Here we tell everyone what kind of script this is going to be



You can come out now, we have finished our script stuff

</SCRIPT>

All done

roll.out.the.barrel

At this point we will now close the head tag and go onto what's in the body or content of our page, as setting up the script is complete. The next thing we will look at is the HTML code associated with the rollover itself.

<a href="map.html" onMouseOver="act('map')" onMouseOut="inact('map')">

In normal circumstances, this is a simple link command - we have just added a few extra goodies, namely telling the browser what to do when a mouse is moved accross this link. In our example we are saying -

"Mr Browser, Here comes a mouse! Eek! Run up to the script and see what you have to do when you see the function 'act'. You did already? Good - what did it say?"

"It said to find out what name I am supposed to look for right now"

"Well ...?"

"Well, I had to come back here and check that - but it looks like I am looking for a name called 'map'"

"So ...?"

"So, then I had to run back and see what function wants me to do with 'map' and 'act' together - I think I'm supposed to add an 'a' to it"

"Yeah - and then what?"

"Then I race over to all that var stuff and see what that tells me to do - which I reckon is to show everyone the picture starmapa.gif. Phew - seems that I'm doing most of the work round here!"

"Oh, but I get it now - and then when you see 'map' and 'inact' combined - you do the same kinda thing but you get told to add 'n' to 'map' and looking at the var stuff - it tells you to display the image starmap.jpg, which was the original image - seems pretty simple to me"

"Easy for you to say!"

One more thing ...

<img src="pics/starmap.jpg" name="map" alt="Star Map" width=100 height=62 border=0>

Here's where the name 'map' comes into it. It's really a reference point for the whole rollover thing. In theory, we could call this and all references to it 'fred' - it doesn't matter, but you can see how confusing things would get if we did not try to keep things simple, neat and tidy. If things weren't quite working, it would be a nightmare trying to figure where it was going wrong.

</a>

Oh yeah - and don't forget to close the link reference.

And cos Retrogrrl is soooooo thoughtful - you can see the code all bundled up together HERE. You simply need to change the names to the images you want to use. She can't remember where this code came from - it might have originated at Webreference.com, but who knows? There are lots of places on the web where you can discover 'cut & paste' javascript - simply copy what you want and insert your own bits and bobs - try here for a start developer.com

There are many variations on this code - find one that works for you and the possibilities are endless - just remember to keep all your images small in file size - if they take too long to load, the effect will be lost altogether

Ah. so much to learn, and so few light years to learn it all in. Begone now, to sample these selections and come back next time for a smattering of something new, something exciting, well - something else.
next.pod
copyright.wendy.phillips.1998-2000

(The Retro City neurometer is reading that your brain is now full)
Remember, Space Cadets! This is a basic guide only - go read the manual.
back.to.space.cadets.lounge