CODEWITHSUNDEEP
javascriptcsshover
Yoshi
Yoshi

Reputation: 341

Hover over text to show image

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.

Upvotes: 1

Views: 520

Answers (2)

Aytee
Aytee

Reputation: 567

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.

Upvotes: 1

Vitorino fernandes
Vitorino fernandes

Reputation: 15951

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

Upvotes: 1

Related Questions