All geek questions in one place

Show thumbnail on hover

How to show a thumbnail (image) when I find text (which is not a hyperlink).

Thanks.

+4
source share
2 answers
<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" />
+2
source

You can use jQuery:

HTML markup:

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

Javascript snippet:

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

In the snippet, I used fadeIn , fadeOut , which adds a nice fade effect.

JQuery doc: here

Or you can use the jQuery plugin that does this, there are many examples on the net.

+1
source

Source: https://habr.com/ru/post/1383317/

More articles:


All Articles