PDA

Click to See Complete Forum and Search --> : ID-ing and changing the z-index.. help!

webster2
09-24-2004, 12:46 PM
Help me p-p-please!
I need to use CSS and JavaScript to ID the z-index of three separate images (creating a popup that says "Layer:1" ,2, or 3). After the image has been ID'ed as either Layer 1, 2, or 3, the layer must be changed from wherever it is to the top layer.
The below works, however the popup that IDs the image only shows "Layer: 1000"
Is there a way to fix this?
Thank you so much for whoever helps in advance!

-Ryan

P.S. This is for a college course if you were wondering...

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Bruce Lesson 6</title>


<script language="JavaScript" type="text/javascript"><!--
var prevObjectID = null;
var prevLayer = 0;
function setLayer(objectID,layerNum) {
var object = document.getElementById(objectID);
object.style.zIndex = layerNum;
}
function findLayer(objectID) {
var object = document.getElementById(objectID);
if (object.style.zIndex != null)
return object.style.zIndex;
return (null);
}
function initPage() { for (i=1; i<=3; i++) { var object = document.getElementById('object' + i);
object.style.zIndex = i;
}}
function findLayer(objectID) { var object = document.getElementById(objectID);
if (object.style.zIndex) return object.style.zIndex;
return (null);
}

function swapLayer(objectID) {
if (prevObjectID != null)
setLayer(prevObjectID,prevLayer);
prevLayer = findLayer(objectID);
prevObjectID = objectID;
setLayer(objectID,1000);
}
// --></script>

<style type="text/css"><!--
#object1 { position: absolute; z-index: 1; top: 50px; left: 170px }
#object2 { position: absolute; z-index: 2; top: 30px; left: 90px }
#object3 { position: absolute; z-index: 3; top: 10px; left: 15px }
--></style>

</head>


<body onload="initPage();">

<script language="JavaScript" type="text/javascript"><!--
function whichLayer(objectID) {layerNum = findLayer(objectID);
alert('Layer: ' + layerNum );
}
// --></script>

<div id="object1" onclick="whichLayer('object1')">
<img src="pic1.jpg" height="473" width="344" border="0" alt="birches" id="object1" onclick="swapLayer('object1')" />
</div>

<div id="object2" onclick="whichLayer('object2')">
<img src="pic2.jpg" height="473" width="344" border="0" alt="achitecture" id="object2" onclick="swapLayer('object2')" />
</div>

<div id="object3" onclick="whichLayer('object3')">
<img src="pic3.jpg" height="460" width="322" border="0" alt="oranges" id="object3" onclick="swapLayer('object3')" />
</div>

</body></html>
Willy Duitt
09-24-2004, 03:56 PM
I don't know about fixing it since it seems much more complicated than necassary... Unless there is something that you did not show us, I see no reason to try to reset the zIndex of any of the layers... When using a global variable to keep track of the heighest zIndex and adding one to that and assigning that number to the zIndex of the layer you wish brought to the top...

Are you trying to do something like this?


<style type="text/css">
<!--
#object1 { position: absolute; z-index: 1; top: 50px; left: 170px }
#object2 { position: absolute; z-index: 2; top: 30px; left: 90px }
#object3 { position: absolute; z-index: 3; top: 10px; left: 15px }
-->
</style>
<script type="text/javascript">
<!--//
function isIndexed(){
var div = document.getElementsByTagName('div');
for(var i=0; i<div.length; i++){
if(div[i].id.match(/^object\d+/i)){
zIndex = (i+1);
div[i].onclick = function(){
++zIndex; this.style.zIndex = zIndex;
}
}
}
} window.onload = isIndexed;
//-->
</script>
</head>


<body>
<div id="object1">
<img src="http://m3.doubleclick.net/790463/mrs04063_on_note_336x280.gif"
height="473" width="344" border="0" alt="birches" />
</div>


<div id="object2">
<img src="http://m3.doubleclick.net/790463/mrs04063_on_note_336x280.gif"
height="473" width="344" border="0" alt="achitecture" />
</div>

<div id="object3">
<img src="http://m3.doubleclick.net/790463/mrs04063_on_note_336x280.gif"
height="460" width="322" border="0" alt="oranges" />
</div>


.....Willy

Edit: Fixed horizontal scrolling...
artemis
09-24-2004, 04:05 PM
i have edited your code and have made some changes.
1) you used object as variables. as this is a reserved word I have changed it to just obj
2) you used the same id for the img and the div container which you must not do
3) I think you were confused with what was being returned. I have modified the script so that when you click on the image it gives the images id and its zIndex


<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Bruce Lesson 6</title>
<script language="JavaScript" type="text/javascript">
<!--
var prevObjectID=null;
var prevLayer=0;
function initPage(){
for(i=1;i<=3;i++){
var obj=document.getElementById('object'+i);
obj.style.zIndex=i;
}
}
function setLayer(objectID,layerNum){
var obj=document.getElementById(objectID);
obj.style.zIndex=layerNum;
}
function findLayerId(objectID){
return document.getElementById(objectID).id;
}
function findLayerZindex(objectID){
var obj=document.getElementById(objectID);
if(obj.style.zIndex){return obj.style.zIndex;}
return null;
}
function swapLayer(objectID){
if(prevObjectID!=null){
setLayer(prevObjectID,prevLayer);
}
prevLayer=findLayerZindex(objectID);
prevObjectID=objectID;
setLayer(objectID,1000);
}
function whichLayer(objectID){
layerId=findLayerId(objectID);
layerNum=findLayerZindex(objectID);
alert('Layer id: '+layerId+', Layer zIndex:'+layerNum);
}
// -->
</script>
<style type="text/css">
<!--
#object1 { position: absolute; z-index: 1; top: 50px; left: 170px; background:#ff00ff }
#object2 { position: absolute; z-index: 2; top: 30px; left: 90px; background:#ffff00 }
#object3 { position: absolute; z-index: 3; top: 10px; left: 15px; background:#00ffff }
-->
</style>
</head>
<body onload="initPage();">
<div onclick="whichLayer('object1')">
<img src="pic1.jpg" height="473" width="344" border="0" alt="birches" id="object1" onclick="swapLayer('object1')" />
</div>
<div onclick="whichLayer('object2')">
<img src="pic2.jpg" height="473" width="344" border="0" alt="achitecture" id="object2" onclick="swapLayer('object2')" />
</div>
<div onclick="whichLayer('object3')">
<img src="pic3.jpg" height="460" width="322" border="0" alt="oranges" id="object3" onclick="swapLayer('object3')" />
</div>
</body>
</html>