changing z-index

Debt Consolidation - Debt Consolidation - Debt Consolidation - Reference And Education Articles - Kamala Harris

rent27

Apr 30th 2009, 1:30 pm

hi. i'm really new to javascript, so i don't know what i'm doing yet. i'm trying to use the z-index to bring an image in front of another on a mouseOver, and for that image to return to the back on mouseOut.

here's what i'm doing:

<head>
<script type="text/javascript">
function switchZ()
{
var Z=document.getElementById("europemap").style.zIndex;
document.getElementById("europemap").style.zIndex="0";
var Y=document.getElementById("other").style.zIndex;
document.getElementById("europemap").style.zIndex=Y;
document.getElementById("other").style.zIndex=Z;
}
</script>
</head>

<body>
<div id="container" class="clearfix">
<div id="content">
<div id="plainmap">
<img id="europemap" src="europemap.jpg" onMouseOver="switchZ()"/>
</div>
<div id="selmap">
<img id="other" src="countries.png" usemap="#europe" onMouseOut="switchZ()"/>
</div>
...
</body>

i was trying to just swap the z-indexes of the two images in the switchZ() function, but i've obviously done something wrong somewhere in here. what can i do to fix it?

thanks.

FilmFiddler

Apr 30th 2009, 10:11 pm

Here's one possible way (checked and working) to get you started. The function has an arguement which simply relates to the type of mouse event, and the events are applied to the parent "content" div.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<script type="text/javascript">
function switchZ(which) {
var Z = document.getElementById("plainmap").style;
var Y = document.getElementById("selmap").style;
if (which == 1) {
Y.zIndex = 5;
Z.zIndex = 1;
}
else if (which == 0) {
Y.zIndex = 1;
Z.zIndex = 5;
}
}
</script>

<style type="text/css">
#content { position: relative; }
#plainmap, #selmap { position: absolute; left: 0; top: 0; }
#plainmap { z-index: 5; }
#selmap { z-index: 1; }
</style>
</head>
<body>
<div id="container" class="clearfix">

<div id="content" onmouseover="switchZ(1)" onmouseout="switchZ(0)">
<div id="plainmap" >
<img id="europemap" src="europemap.jpg" alt="Europe" />
</div>
<div id="selmap">
<img id="other" src="countries.png" usemap="#europe" alt="Other Countries"/>
</div>
</div>

</div>
</body>
</html>

A simpler way may be to have the 2 images together in the one div, with the mouse events being applied to that div, and the z-indices being applied directly to the images. If you have no specific reason for having the images each in their own divs, that would be the preferred way.

A couple of other things to note:
The z-index property requires that its object must be positioned. So if you were to apply the z-indices to the images instead, they must then be positioned.
If it is an xhtml document, then image tags must have an alt attribute, and event names must be all lower case. It is common practice nowadays to do that for html documents also.

PoPSiCLe

May 4th 2009, 9:46 am

Might I just add that a simple image-map would make this whole thing work without javascript? (Okay, you'd still need some JS for IE, I think, even though I'm not sure) - but anyway - you can just add a :hover value to the image you want displayed, and use CSS for the positioning - it is quite easily done, and the way it's mostly done on mouseovers on buttons and such.