javascript image翻转内部div

我有一个单独的div 100px X 300px。 JavaScript中最简单的方法是什么，所以当我将鼠标悬停在div上时，显示图像，然后当离开div时，图像消失。javascript image翻转内部div

对于初学者我想下面将让我开始，但我似乎无法删除正确

<script type="text/javascript"> 

     function MouseOver_Event(elementId) { 
      var imgToCreate = document.createElement('img'); 
      imgToCreate.setAttribute('id', 'imgHandle'); 
      imgToCreate.setAttribute('src', elementId + '.png'); 
      imgToCreate.setAttribute('onmouseout', 'MouseOut_Event('+elementId+')'); 
      var targetDiv = document.getElementById(elementId); 
      targetDiv.appendChild(imgToCreate); 
      targetDiv.removeAttribute('onmouseover', 'MouseOver_Event'); 
     } 
     function MouseOut_Event(elementId) { 
      var imgToRemove = document.getElementById('imgHandle'); 
      var targetDiv = imgToRemove.parentNode(); 
      if (imgToRemove != null) 
       targetDiv.removeChild(imgToRemove); 
      targetDiv.setAttribute('onmouseover', 'MouseOut_Event(' + elementId + ')'); 
     } 
    </script> 
</head> 
<body> 
<div id="div1" onmouseover="MouseOver_Event(this.id)"></div> 
<div id="div2" onmouseover="MouseOver_Event(this.id)"></div> 
<div id="div3" onmouseover="MouseOver_Event(this.id)"><img src="Div3.png" alt="test" onmouseout="MouseOut_Event(parentNode's id or something)" /></div> 
</body>

来源

2011-10-06 Rod

很好，对于初学者[parentNode（https://developer.mozilla.org/En/DOM/Node.parentNode）不是一个方法，所以你不需要括号 –

为什么不将图像指定为div的背景图像，然后使用css精灵创建悬停效果？ JS很好，但有时候有一个更简单的解决方案！另一个非常简单的解决方案，如果你想坚持使用JS，将会使用jQuery作为额外的模块...它的sooo很容易改变它的属性！ – Anonymous

为什么不使用CSS取而代之？
例如：

#div1{background:none;} 
#div1:hover{background:url('src/div1.png') no-repeat;}

来源

2011-10-06 03:38:16

你安装你的MouseOut_Event到的onmouseover代替的onmouseout图像。但是，你可能不需要搞乱动态事件创建。只需将onmouseout =“MouseOut_Event（this.id）”添加到三个div并且应该这样做。

来源

2011-10-06 03:09:19

javascript image翻转内部div

回答

相关问题