1

我有以下脚本在单击图像时显示/隐藏一些文本。然后，当单击另一个图像时，该文本将被替换，依此类推。目前总有一些文字可见。我希望此文本在图像的 mouseOut 上消失（或者可能显示并清空 div？）。这是我目前拥有的：

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; 
}

谢谢你的帮助。

4

1 回答 1

0

您可以在图像标签中使用它：

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

这样，只要图像悬停，您的函数就会被调用。您可以创建一个名为“空白”的空 div，以便您的函数在鼠标移出时使用它，因此它显示为空白。

保持你的 Javascript 不变。

将您的 HTML 更改为：

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

将您的 CSS 更改为：

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

让我知道这是否适合你。

于 2012-10-25T17:53:11.633 回答