Hover over text to show image

Question

I got the code working for 1 text which shows a image when you hover over it.

But I need it to work with multiple texts that all show different images(in the same area). Like this: https://handleidingen.vodafone.nl/web/samsung-galaxy-s5/basisfuncties/voicemail/oproepen-doorschakelen-naar-voicemail

This is my code:

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(function() {
$("#Clicker").hover(function(){
$( "#wallpaperamIMage" ).toggle();
});
});</script>
<b id="Clicker" style="color:blue;text-decoration:underline;cursor:pointer;">Altijd doorschakelen</b>
<div><img id="wallpaperamIMage" style="display:none;" src="http://cdn.mobilesupportware.com/ml/3494895.png"></div>

How can I do this?

Thanks.

Answer 1

this should work fine:

 $(function() { $(".Clicker").hover(function(){ $( "#wallpaperamIMage" ).attr("src", $(this).data("img")) $( "#wallpaperamIMage" ).toggle(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <b class="Clicker" style="color:blue;text-decoration:underline;cursor:pointer;" data-img="//placehold.it/200x200">Altijd doorschakelen</b> <b class="Clicker" style="color:blue;text-decoration:underline;cursor:pointer;" data-img="//placehold.it/300x300">Altijd doorschakelen</b> <div><img id="wallpaperamIMage" style="display:none;" src=""></div> 

At first you have to change "Clicker" to a class, because you will have more than one.

Then you can add a data attribute to the <b> element with the image source in it. Because every element has its own image.

Then on the Hover event you can access this attribute and load it into the img element.

Answer 2

You can also use css

 a { display: inline-block; } a + img { display: none; position: absolute; top: 30px; } a:hover + img { display: block; } 

 <a href="">image one</a> <img src="http://placeimg.com/200/200/natuee"> <a href="">image two</a> <img src="http://placeimg.com/200/200/people"> <a href="">image three</a> <img src="http://placeimg.com/200/200/tech">