Javascript mouseover images

Question

im в настоящее время работает над разделом сайта, на котором есть сетка 9 изображений. Я бы хотел, чтобы это было так, когда ваша мышь перемещается по одному из изображений. Над изображением, содержащим некоторый текст, появляется надпись. любые предложения о том, как можно было бы это сделать? благодаря!

Вот что часть сетки выглядит

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

ИЛИ Я будет делать один скрытый 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 может быть хорошим вариантом, они могут быть прикреплены к любому элементу.