Trying to create three image links that display different divs when onMouseOver.
<script type="text/javascript>
function toggleVisibility(divid) {
if (divid==="1"){
document.getElementById("1b").style.visibility = "visible";
document.getElementById("2b").style.visibility = "hidden";
document.getElementById("3b").style.visibility = "hidden";
}
else if (divid==="2")
{
document.getElementById("1b").style.visibility = "hidden";
document.getElementById("2b").style.visibility = "visible";
document.getElementById("3b").style.visibility = "hidden";
}
else if (divid==="3")
{
document.getElementById("1b").style.visibility = "hidden";
document.getElementById("2b").style.visibility = "hidden";
document.getElementById("3b").style.visibility = "visible";
}
}
</script>
Apply these onMouseOver events to all three anchor tags.
onmouseover="toggleVisibility('1');"
onmouseover="toggleVisibility('2');"
onmouseover="toggleVisibility('3');"
However,
All three, when rolled over, only show 1a. No change occurs when the other two are hovered over and 2a + 3a remain invisible.
Thank you
HTML + CSS:
<div id="wrapper">
<div style="width:910px;height:300px;margin:0;padding:0;">
<div id="1b"> </div>
<div id="2b"> </div>
<div id="3b"> </div>
<a href="#" onmouseover="toggleVisibility('1');" class="1"></a>
<a href="#" onmouseover="toggleVisibility('2');" class="2"></a>
<a href="#" onmouseover="toggleVisibility('3');" class="3"></a>
</div>
</div>
#wrapper {
width: 896px;
margin: 0px auto;
text-align: left;
overflow: hidden;
}
#1b {
width:303px;
height:150px;
visibility:hidden;
float:left;
background-color:#DED6C5;
}
.1 {
float:left;
height:130px;
width:303px;
display:block;
background-image:url('images/organizational.jpg');
}
I have renamed elements in this post to "1,2,3,1b,2b,3b" for clarity.
The CSS for the remaining elements is identical to 1 and 1b with just the names changed.