link hover Options

[rayyyy]

My links for my site are in my header banner. How would I make it so when I hover over those links something shows up.

thanks.

[Melissa]

^ yeah, it is possible for image maps. The only problem you'll have is that your rollover won't work for Opera (as I've come to find out)

Here's a script if you're planning to use image maps. This also works if you splice your image:

What you'll need is your original picture; copy that as many times as you have links. For each new copy, you'll want to edit out the part that's going to change, then load the original and copies in this script.

CODE

<script language="javascript">
<!-- hide script from old browsers

//detect browser:
browserName = navigator.appName;
browserVer = parseInt(navigator.appVersion);
if (browserName == "Netscape" && browserVer >= 3) browserVer = "1";
else if (browserName == "Microsoft Internet Explorer" && browserVer == 4) browserVer = "1";
else browserVer = "2";

//preload images:
if (browserVer == 1) {
a1 = new Image(WIDTH,HEIGHT);
a1.src = "ORIGINAL/BASE IMAGE SRC URL";
a2 = new Image(WIDTH,HEIGHT);
a2.src = "IMAGE 2 SRC URL";
a3 = new Image(WIDTH,HEIGHT);
a3.src = "IMAGE 3 SRC URL";
}

//image swapping function:
function hiLite(imgDocID, imgObjName, comment) {
if (browserVer == 1) {
document.images[imgDocID].src = eval(imgObjName + ".src");
window.status = comment; return true;
}}
//end hiding -->
</script>

Change the "IMG SRC URL" and the "WIDTH, HEIGHT" to your own categories and add as many as you need past "a3"

Now, take your original/base image and put in your image map like this:

CODE

<img src="ORIGINAL IMAGE SRC NAME" name="a" usemap="#NAME">
<map name="NAME">
<area shape="poly" coords="[enter coords]" href="URL" onMouseOver="hiLite('a','a2','')" onMouseOut="hiLite('a','a1',''>
<area shape="poly" coords="[enter coords]" href="URL" onMouseOver="hiLite('a','a3','')" onMouseOut="hiLite('a','a1',''>
</map>

What it does is take your image, then swap it for your alternative image on the "mouseover" for the image map, then swap it back to the original on the "mouseout"

This code works for Firefox and IE and Safari (I'm pretty sure). Thomas couldn't see my rollovers, so I guess it doesn't work for Opera.