...

View Full Version : simple html/js code not working



nh02173
02-25-2011, 03:20 AM
i am trying to make a page with 3 images stacked on top of each other, and when you click on one it moves to the top of the stack. i have the code, but i don't understand why it isn't working.



<head>
<title> Stacking of paragraphs </title>
<SCRIPT>
var top ="usb1";

function toTop(newTop) {

domTop =document.getElementById(top).style;
domNew = document.getElementById(newTop).style;

domTop.zIndex = "0";
domNew.zindex = "10";
top = newTop;
}

</SCRIPT>
<style type = "text/css">
.para1 {position: absolute; top: 0; left: 0;
z-index: 0;}
.para2 {position: absolute; top: 50px; left: 110px;
z-index: 0;}
.para3 {position: absolute; top: 100px; left: 220px;
z-index: 0;}

</style>
</head>
<body>
<p>
<img class = "para1" id = "usb1"
src = "usb1.jpg"
alt = "(picture of usb1)"
onclick = "toTop('usb1')" />
<img class = "para2" id = "usb2"
src = "usb2.jpg"
alt = "(picture of usb2)"
onclick = "toTop('usb2')" />
<img class = "para3" id = "usb3"
src = "usb3.jpg"
alt = "(picture of usb3)"
onclick = "toTop('usb')" />

</p>
</body>
<html>

also just i side note, but does anyone know how i would write this and use three paragraphs of text instead of pictures, and have the paragraph of text on the top of the other ones readable. (i think that would be a cool affect on a page)

thank you so much ahead of time for any help you can offer.

bullant
02-25-2011, 03:42 AM
I've cleaned up your code a bit and this now brings the clicked image to the top of the stack.



<html>
<head>
<title> Stacking of paragraphs </title>
<style type = "text/css">
#imgContainer {
position: relative;
}
.para1 {position: absolute; top: 0; left: 0;
z-index: 0;}
.para2 {position: absolute; top: 50px; left: 110px;
z-index: 0;}
.para3 {position: absolute; top: 100px; left: 220px;
z-index: 0;}
</style>
<script type="text/javascript">
var curMaxZindex = 0;
function toTop(obj) {
obj.style.zIndex = ++curMaxZindex;
}
window.onload=function(){
var oImgs = document.getElementById('imgContainer').getElementsByTagName('img');
//assign the onclick to the img's
for(i=0; i < oImgs.length; i++){
oImgs[i].onclick = function(){
toTop(this);
}
}
}
</script>
</head>
<body>
<p id="imgContainer">
<img class = "para1" src = "pic1.jpg" alt = "(picture of usb1)" />
<img class = "para2" src = "pic2.jpg" alt = "(picture of usb2)" />
<img class = "para3" src = "pic3.jpg"alt = "(picture of usb3)" />
</p>
</body>
<html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum