Forum Moderators: open
I have a show/hide layer problem. When a link is clicked on I need the background image of the link to change as well as showing the text layer (brown box to the right). To see what I mean just copy/paste all this for the version I have so far.
I have stripped down the code to bare bones to try and make it easier to see what I have.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">h1, h2, p, ul, li, div {margin:0;padding:0;}
#landing {width:100%}
#menu {width:400px;float:left;margin-right:80px;}
.text{display: none;width:380px;}
#text0{display: block;}
#landing ul {list-style-type:none;}
#landing li {width:443px;height:47px; background-color:#f60;padding-left:34px; line-height:46px;
font-size:1.4em; font-weight:bold; display:block; border: 1px solid #666;}
#display p {font-size:1.2em;padding:10px;}
#display {width:200px;float:left; background-color:#960;}
.clr {clear:both;width:10px;}
</style>
<script type="text/javascript">
/*
Global "swap" holder
Use value, null, if no layer initially visible
*/
var currLayerId = "text0";
function togLayer(id)
{
if(currLayerId) setDisplay(currLayerId, "none");
if(id)setDisplay(id, "block");
currLayerId = id;
}
function setDisplay(id,value)
{
var elm = document.getElementById(id);
elm.style.display = value;
}
</script>
</head><body>
<div id="landing">
<!--buttons-->
<div id="menu">
<ul>
<li><a href="#" onclick="togLayer('text0');return false;">Text for 0</a></li>
<li><a href="#" onclick="togLayer('text1');return false;">Text for 1</a></li>
<li><a href="#" onclick="togLayer('text2');return false;">Text for 2</a></li>
<li><a href="#" onclick="togLayer('text3');return false;">Text for 3</a></li>
<li><a href="#" onclick="togLayer('text4');return false;">Text for 4</a></li>
</ul></div>
<!--layers-->
<div id ="display">
<div id="text0" class="text"><p>Text for 0</p></div>
<div id="text1" class="text"><p>Text for 1</p></div>
<div id="text2" class="text"><p>Text for 2</p></div>
<div id="text3" class="text"><p>Text for 3</p></div>
<div id="text4" class="text"><p>Text for 4</p></div>
</div><div class="clr"></div></div>
</body></html>
So what I want is the <li> to have a non-active image but when it's clicked I want it to have an active image as well as displaying the text in the brown box to the right.
Is this clear enough for someone to help? :)
