Question

I have the following script that shows/hides some text when an image is clicked. This text then is replaced when another image is clicked and so on. At the moment there is always some text visible.
I want this text to disappear (or perhaps display and empty div?) on mouseOut of the image.
Here is what I currently have:

JS:

<script type="text/javascript" language="JavaScript">
<!--
function showonlyonev2(thechosenone) {
    var newboxes = document.getElementsByTagName("div");
      for(var x=0; x<newboxes.length; x++) {
          name = newboxes[x].getAttribute("name");
          if (name == 'textboxes') {
              if (newboxes[x].id == thechosenone) {
                  if (newboxes[x].style.display == 'block') {

                  } else {
                      newboxes[x].style.display = 'block';
                  }
              } else {
                  newboxes[x].style.display = 'none';
              }
          }
    }
}
</script>

HTML:

<div id="text-container">
  <div id="text1" name="textboxes">
  <p>Some text here about person 1</p>
  <div id="text2" name="textboxes">
  <p>Some text here about person 2</p>
  <div id="text3" name="textboxes">
  <p>Some text here about person 3</p>
  <div id="text4" name="textboxes">
  <p>Some text here about person 4</p>
</div>


<div class="people-images">
  <a href="javascript:showonlyonev2('text1');" class="rollovers">
    <div id="person1-rollover"><img src="images/people/person1.jpg" alt="" /> </div>
  </a>
</div>
<div class="people-images">
  <a href="javascript:showonlyonev2('text2');" class="rollovers">
    <div id="person2-rollover"><img src="images/people/person2.jpg" alt="" /> </div>
  </a>
</div>
<div class="people-images">
  <a href="javascript:showonlyonev2('text3');" class="rollovers">
    <div id="person3-rollover"><img src="images/people/person3.jpg" alt="" /> </div>
  </a>
</div>
<div class="people-images">
  <a href="javascript:showonlyonev2('text4');" class="rollovers">
    <div id="person4-rollover"><img src="images/people/person4.jpg" alt="" /> </div>
  </a>
</div>

CSS:

#text1 { 
width: 300px;
height: 300px;
background: #c2bfba;
}
#text2, #text3, #text4 { 
width: 300px;
height: 300px;
background: #c2bfba;
display:none; 
}

Thanks for any help.

Answer 1

You could use this in the image tag:

   <img src='...' onmouseover='javascript:showonlyonev2('text1')' onmouseout='javascript:showonlyonev2('blank')' />

This way your function gets called whenever the image is hovered over. you can create an empty div called ‘blank’ so that your function uses it when mouse out, so it appears blank.

Keep your Javascript the same.

Change your HTML to:

<div id="text-container">
<!-- All of these DIV's should have closing tags -->
<div id="text1" name="textboxes"><p>Some text here about person 1</p></div>
<div id="text2" name="textboxes"><p>Some text here about person 2</p></div>
<div id="text3" name="textboxes"><p>Some text here about person 3</p></div>
<div id="text4" name="textboxes"><p>Some text here about person 4</p></div>
<div id="blank" name="textboxes"><p>&nbsp;</p></div>
</div>


<div class="people-images">
<a href="javascript:showonlyonev2('text1');" class="rollovers">
<div id="person1-rollover"><img src="images/people/person1.jpg" onmouseout="javascript:showonlyonev2('blank');" alt="" /> </div></a>
</div>
<div class="people-images">
<a href="javascript:showonlyonev2('text2');" class="rollovers">
<div id="person2-rollover"><img src="images/people/person2.jpg" onmouseout="javascript:showonlyonev2('blank');" alt="" /> </div></a>
</div>
<div class="people-images">
<a href="javascript:showonlyonev2('text3');" class="rollovers">
<div id="person3-rollover"><img src="images/people/person3.jpg" onmouseout="javascript:showonlyonev2('blank');" alt="" /> </div></a>
</div>
<div class="people-images">
<a href="javascript:showonlyonev2('text4');" class="rollovers">
<div id="person4-rollover"><img src="images/people/person4.jpg"  onmouseout="javascript:showonlyonev2('blank');" alt="" /> </div></a>
</div>

Change your CSS to:

#blank { 
width: 300px;
height: 300px;
background: #c2bfba;
}
#text1, #text2, #text3, #text4 { 
width: 300px;
height: 300px;
background: #c2bfba;
display:none; 
}

Let me know if that works for you.