Показывать миниатюру при наведении на текст - PullRequest
Новая
       22

Показывать миниатюру при наведении на текст

4 голосов
/ 27 ноября 2011

Как отобразить миниатюру (изображение) при наведении курсора на текст (который не является гиперссылкой).

Спасибо.

Ответы [ 2 ]

2 голосов
/ 27 ноября 2011 
<div onmouseover="document.getElementById('myimg').style.display='block';"
      onmouseout="document.getElementById('myimg').style.display='none';">some text
</div>
 <img id="myimg" style="display:none" src="beer.png" />
1 голос
/ 27 ноября 2011

Вы можете использовать jQuery:

Разметка HTML: 

<html>
  <body>
    <p>Sample text</p>
    <img class="thumbImage" style="display:none" src="sample.png" />
  </body> 
 </html>

Фрагмент Javascript: 

 $(document).ready(function(){
   $('p').mouseover(function(){
        // Put logic on show
        $('.thumbImage').fadeIn('slow');
   }).mouseout(function(){
        // Put logic on hide
        $('.thumbImage').fadeOut('slow');
   });
 });

В фрагменте я использовал fadeIn, fadeOut,который добавляет хороший эффект затухания.

JQuery doc: здесь

Или вы можете использовать плагин Jquery, который делает это, в сети есть множество примеров.

...