Javascript mouseover images

Question

我目前正在一個網站的一個部分有一個網格9圖像。當你的鼠標移動到其中一個圖像上時，我希望擁有它。一個div出現在包含一些文本的圖像上方。關於如何去做這件事的任何建議？謝謝！

繼承人什麼電網的一部分，看起來像

<div class = 'picture-container'> 
      <div class = 'picture-wrapper' id = 'top-left'> 
       <img src = 'ds-map.png' height = '100%' width = '100%'> 
      </div> 
      <div class = 'picture-wrapper' id = 'top-right'> 
       <img src = 'ds-map.png' height = '100%' width = '100%'> 
      </div> 
      <div class = 'picture-wrapper' id = 'top-center'> 
       <img src = 'ds-map.png' height = '100%' width = '100%'> 
      </div> 
     </div> 

Answer 1

您可以將每個圖像上方有一個隱藏的div，並將它通過CSS定位...

<div class = 'picture-container'> 
      <div class = 'picture-wrapper' id = 'top-left'> 
       <div>with text</div><--- position this div relative to the container and hide/show it on rollover 
       <img src = 'ds-map.png' height = '100%' width = '100%'> 
      </div> 
     </div> 

OR 我會做的是讓你的身體標記後一個隱藏的div，然後使用JavaScript來顯示/定位它並動態更改文字

<div id="populateme"><div> <--- when mouse over the image modify this div to do what you want with javascript 
<div class = 'picture-container'> 
       <div class = 'picture-wrapper' id = 'top-left'> 
        <img src = 'ds-map.png' height = '100%' width = '100%'> 
       </div> 
     </div> 

Answer 2

聽起來像你想要一個Tooltip，如果你已經使用jQuery jQuery UI Tooltip可能是一個不錯的選擇，他們可以附加到任何元素。