Home › Designing Your Website › HTML, CSS, and Javascript

onMouseover Question - Help

Anonymous posted this at 19:07 — 24th May 1999.

They have: 5,633 posts

Joined: Jan 1970

Ok, here is what I want to do.
I want to have an image mapped for a links page. I want it so that when the mouse is over a certian mapped area it displays a graphic in one set spot on the page<say the top left corner>
So say I have two defined areas on the image. defined area A and defined area B. when the mouse is on Area A I want the corner graphic to display image X and when the mouse is over area B I want the corner graphic to display image Z. I hope this is clear enough.

Greg
[email protected]

Anonymous posted this at 01:18 — 25th May 1999.

They have: 5,633 posts

Joined: Jan 1970

Greg,

I'm not sure if you want to know how to make the image map or the changing images. However I have examples of both at discoverynet.com/~tekguy

The script for the image flip is as follows:

Quote:
<script language="JavaScript">

<!-- begin script

window.onerror = null

browserName = navigator.appName;
browserVer = parseInt(navigator.appVersion);

if (browserVer >= 3) version = "n3";
else version = "n2";
if (version == "n3") {
standard = new Image;
standard.src = "../Assets/Images/LayoutB/LoveMyDog.GIF";
product = new Image;
product.src = "../Assets/Images/LayoutB/Dogeatingbag.gif";
about = new Image;
about.src = "../Assets/Images/LayoutB/RichDogs.gif";
fun = new Image;
fun.src = "../Assets/Images/LayoutB/Dogwball.gif";
}

function flip (imageID,objectName) {
if (version == "n3") {
document.images[imageID].src = eval(objectName + ".src");
}
}

// endscript -->

</script>

The image you want to change needs a NAME tag in it like:

Quote:
<img SRC="../Assets/Images/LayoutB/LoveMyDog.GIF" NAME="centerstage" NOSAVE BORDER=0 height=176 width=267></td>

The link that you want to change will look like this;

Quote:
<a href="Products.html" onmouseover=" flip('centerstage','product'); window.status= 'look here for information about our foods'; return true;" onMouseOut="flip('centerstage','standard'); window.status=''; return true;"><IMG SRC="../Assets/Images/LayoutB/Products.GIF" border=0></a>

The first attribute after flip will be the name of the location, the second attribute is the name of the image you want to change to.

If this is confusing let me know and I'll try to clarify

----------
My goal in life is found in Phillipians 4:8-9

Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.