changing z-index

Discussion in 'JavaScript' started by rent27, Apr 30, 2009.

0
  1. #1
    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.
     
    rent27, Apr 30, 2009 IP
  2. FilmFiddler

    FilmFiddler Greenhorn

    Messages:
    54
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    23
    #2
    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>
    Code (markup):
    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.
     
    FilmFiddler, Apr 30, 2009 IP
  3. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #3
    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.
     
    PoPSiCLe, May 4, 2009 IP