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

回答

相關問題