Home/ Questions/Q 7955743
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T03:47:06+00:00

Currently my code looks like this: <div id=content> <div id=1> <img src= alt= onmouseover=document.getElementById(‘1’).style.visibility

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0