...

View Full Version : layer doesnt work



linuxis
04-29-2006, 06:18 PM
I'm trying out my layer which should work, but when I click a link I'm getting the error something aint defined. I cant figure out what im doing wrong here.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/REC-html4/loose.dtd">
<html lang=us-en>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">


<SCRIPT LANGUAGE="JavaScript">
function ShowLayer(id, action){
if (type=="IE") eval("document.all." + id + ".style.visibility='" + action + "'");
if (type=="NN") eval("document." + id + ".visibility='" + action + "'");
if (type=="MO" || type=="OP")
eval("document.getElementById('" + id + "').style.visibility='" + action + "'");
}
</script>

</head>
<body>

<form name="document">
<a href="javascript:ShowLayer('Layer7','hidden')">Hide picture</a>
<a href="javascript:ShowLayer('Layer7','visible')">Show picture</a>
<div id="Layer7" style="position:absolute; left:400px; top:248px; width:200px; height:115px; z-index:7; visibility:hidden"><img src="images/1.jpg"></div>
</form>

</body>
</html>

_Aerospace_Eng_
04-29-2006, 06:40 PM
Where is type being defined at? Your javascript methods are old. eval shouldn't be used in this situation and all modern browsers support document.getElementById. Try it like this

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/REC-html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#Layer7 {
position:absolute;
left:400px;
top:248px;
width:200px;
height:115px;
z-index:7;
}
</style>
<script type="text/javascript">
function ShowLayer(what){
document.getElementById(what).style.display = (document.getElementById(what).style.display == "none") ? "block" : "none";
}
onload = function()
{
document.getElementById('Layer7').style.display = 'none';
}
</script>
</head>
<body>
<form name="document">
<a href="#" onclick="ShowLayer('Layer7');return false">Hide picture/Show picture</a>
<div id="Layer7"><img src="images/1.jpg"></div>
</form>
</body>
</html>

linuxis
04-29-2006, 08:26 PM
ok, I get the picture.

Can you provide me with a selection box example, and lets say 3 layers ?
I've been trying for hours, but can't seem to get it right.

_Aerospace_Eng_
04-29-2006, 08:58 PM
You mean like if a user selects first option layer 1 is shown, if a user selects 2nd option layer 2 is shown, and so forth? Do you want only one layer visible at a time?

linuxis
04-29-2006, 09:32 PM
Yes, you got the idea.. Thanks so far

_Aerospace_Eng_
04-30-2006, 04:52 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/REC-html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.boxes {
position:absolute;
left:200px;
top:200px;
width:200px;
height:200px;
}
#box1 {
background-color:#F00;
color:#000;
}
#box2 {
background-color:#00F;
color:#000;
}
#box3 {
background-color:#FF0;
color:#000;
}
</style>
<script type="text/javascript">
function ShowLayer(what)
{
var num = 4; // Number of boxes you have + 1
if(document.forms[0].showbox.options[document.forms[0].showbox.options.selectedIndex].value != "none")
{
for(var i = 1; i < num; i++)
{
document.getElementById('box'+i.toString()).style.display = "none";
}
document.getElementById(what).style.display = 'block';
}

}
onload = function()
{
document.getElementById('box1').style.display = 'none';
document.getElementById('box2').style.display = 'none';
document.getElementById('box3').style.display = 'none';
}
</script>
</head>
<body>
<form name="document">
<select id="showbox" name="showbox" onchange="ShowLayer(this.options[this.options.selectedIndex].value)">
<option value="none">Select an item</option>
<option value="box1">Box 1</option>
<option value="box2">Box 2</option>
<option value="box3">Box 3</option>
</select>
<div id="box1" class="boxes">Box 1</div>
<div id="box2" class="boxes">Box 2</div>
<div id="box3" class="boxes">Box 3</div>
</form>
</body>
</html>

linuxis
04-30-2006, 08:33 AM
Thanks _Aerospace_Eng_ I nominated you as helpfull member ;)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum