Menu
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” “
<html lang=”en” xml:lang=”en” xmlns=”
<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>