title: Javascript function to change div visibility onmouseover of an image
body: <p>Currently my code looks like this:</p>
  
  <pre><code>&lt;div id="content"&gt;
  &lt;div id="1"&gt;
  &lt;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';" /&gt;
  &lt;div id="1_content&gt;content&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="2"&gt;
  &lt;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';" /&gt;
  &lt;div id="2_content"&gt;content&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div id="3"&gt;
  &lt;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';" /&gt;
  &lt;div id="3_content"&gt;content&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="4"&gt;
  &lt;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';" /&gt;
  &lt;div id="4_content&gt;content&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;&lt;!-- content --&gt;
  </code></pre>
  
  <p>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 <code>onmouseover="return functionName()"</code>? Will that validate in XHTML1.0 Strict?</p>