New Posts  All Forums:Forum Nav:

Help Using Z-index

post #1 of 2
Thread Starter 
Hey Guys
I need help fixing some code.

Objective place a number of images on a web page on top of each other, there will be buttons that are named after each image, pressing a button will bring up that particular image above all the other images. Below is the code i have so far, I need help scaling it up for more images and creating a button for each image to bring it in front of all the other images.
Code:
<script type= "text/javascript">
<!--

function restack() {
var x=document.getElementById('pic1');
var z=x.style.zIndex
if (z==10) z=25;
else z=10;
x.style.zIndex=z;
}



//-->
</script>


Code:
<p>


 <img src="/tools/spanners.jpg" alt="Spanners"
id="pic2" height="124" width="182"
style="position: absolute;
top: 62px; left: 0px; z-index: 15;"/>



<img src="/tools/monkey_wrench.jpg"
alt="Monkey Wrenches" id="pic1"
height="124" width="182"
style="position: absolute;
top: 0px; left: 90px; z-index: 10;"/>

</p>

<p style="text-align:center">
<input type="button" value="restack"
onclick="restack();"/>
</p>

Edited by Jamar16 - 3/18/12 at 8:17pm
post #2 of 2
ZIndex.zip 75k .zip file

Check out the attachment. This is done using JQuery & on image click instead of buttons, but it might help you to achieve what you need.
Code:
<!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">
<head>
<title> Z-index</title>
   <script src="jquery.min.js" type="text/javascript"></script>
    <script type= "text/javascript" >
    $(document).ready(function() {
        
        $('img').live('click',function()
            {
            
            $('img').addClass("zindexmin");
            $('img').removeClass("zindexmax");
                //$('img').removeClass("zindexmin");
                var a = "#" +  $(this).attr("id");
                $(a).toggleClass("zindexmax"); 
            }
         );
    });
        //-->
    </script>
    
    <style type="text/css">
        .click
        { border:none;}
        img
        {
                height:150px;
                height:150px;
                position:absolute;
        }
        
        #p0 {top:50px;left:0px; }
        #p1 {top:70px;left:20px; }
        #p2 {top:90px;left:40px; }
        #p3 {top:110px;left:60px;}
        #p4 {top:130px;left:80px;}
        #p5 {top:150px;left:100px; }
        
        .zindexmin{z-index:0;}
        .zindexmax{z-index:10;}
    </style>

</head>

<body>

    <p>
         <img src="p0.png" alt="p"  id="p0"/>
         <img src="p1.png" alt="p"  id="p1" />
         <img src="p2.png" alt="p"  id="p2" />
         <img src="p3.png" alt="p"  id="p3" />
         <img src="p4.png" alt="p"  id="p4" />
         <img src="p5.png" alt="p"  id="p5" />
    </p>
    
  <!--  <p style="text-align:center">
        <input type="button" value="restack" onclick="restack();"/>
        <input type="button" value="restack" onclick="restack();"/>
    </p>-->


</body>
</html>

My System
(13 items)
 
  
CPUMotherboardGraphicsRAM
i5 2500k ASUS - P8Z68-V/GEN3 GTX 770 DDR3 - 8G 
Hard DriveOSMonitorPower
WD Green Win 7 x64 Dell ST2320L Corsair 750TX 
CaseMouse
Coolermaster 310 Logitech G502 
  hide details  
Reply
My System
(13 items)
 
  
CPUMotherboardGraphicsRAM
i5 2500k ASUS - P8Z68-V/GEN3 GTX 770 DDR3 - 8G 
Hard DriveOSMonitorPower
WD Green Win 7 x64 Dell ST2320L Corsair 750TX 
CaseMouse
Coolermaster 310 Logitech G502 
  hide details  
Reply
New Posts  All Forums:Forum Nav:
  Return Home
  Back to Forum: Web Coding