user1395909
user1395909

Reputation: 167

Javascript function to change div visibility onmouseover of an image

Currently my code looks like this:

<div id="content">
<div id="1">
<img src="" alt="" onmouseover="document.getElementById('1').style.visibility = 'visible'; document.getElementById('2').style.visibility = 'hidden'; document.getElementById('3').style.visibility = 'hidden'; document.getElementById('4').style.visibility = 'hidden';" />
<div id="1_content>content</div>
</div>

<div id="2">
<img src="" alt="" onmouseover="document.getElementById('2').style.visibility = 'visible'; document.getElementById('1').style.visibility = 'hidden'; document.getElementById('3').style.visibility = 'hidden'; document.getElementById('4').style.visibility = 'hidden';" />
<div id="2_content">content</p>
</div>

<div id="3">
<img src="" alt="" onmouseover="document.getElementById('3').style.visibility = 'visible'; document.getElementById('1').style.visibility = 'hidden'; document.getElementById('3').style.visibility = 'hidden'; document.getElementById('4').style.visibility = 'hidden';" />
<div id="3_content">content</div>
</div>

<div id="4">
<img src="" alt="" onmouseover="document.getElementById('4').style.visibility = 'visible'; document.getElementById('1').style.visibility = 'hidden'; document.getElementById('2').style.visibility = 'hidden'; document.getElementById('3').style.visibility = 'hidden';" />
<div id="4_content>content</div>
</div>

</div><!-- content -->

Each div is positioned in the same place. How would I create a function to perform this? I only ask because the code doesn't validate with the DTD I'm using so I"d like to fix that. Also, because the divs are on top of each other, when I make one visible, I can't highlight text in the visible div because its z-index remains the same and so the content is locked behind an invisible div. How would I fix this? Finally, would I simply call the function in the html with onmouseover="return functionName()"? Will that validate in XHTML1.0 Strict?

Upvotes: 0

Views: 7319

Answers (1)

Dmitry Nikolaev
Dmitry Nikolaev

Reputation: 3908

I am guessing that you need something like this:

<html><head>
<script>
function makeVisible(pName) 
{
  var item = document.getElementById(pName);
  var contentPanel = document.getElementById("content");
  var contents = contentPanel.getElementsByTagName("p");

  for (var i = 0; i < contents.length; i++) {
    if (contents[i] != item) {
      contents[i].style.display = "none"
    }
  }
  item.style.display = "";
}
</script>
</head>
<body>
<div id="content">
<div><img src="" alt="" onmouseover="makeVisible('p1')" /></div>
<div><img src="" alt="" onmouseover="makeVisible('p2')" /></div>
<div><img src="" alt="" onmouseover="makeVisible('p3')" /></div>
<div><img src="" alt="" onmouseover="makeVisible('p4')" /></div>

<p id="p1">content 1</p>
<p id="p2">content 2</p>
<p id="p3">content 3</p>
<p id="p4">content 4</p>

</div><!-- content -->
</body></html>

Upvotes: 1

Related Questions