CODEWITHSUNDEEP
javascriptjqueryhtml
Kristen
Kristen

Reputation: 39

show image when cursor placed over link\image (same image showing up on all links)

I'm trying to display images via mouseover, which is achieved with the javascript below and images\links with class="trigger". How each step works is detailed via comments in the code below. The issue is it only works properly for the first image\link, ie: span data-original="foobar.jpg", subsequent mouseovers all display the same image.

$(document).ready(function($) {
  $('.trigger').mouseover(function() {
    // find our span
    var elem = $(this).siblings('span');

    // get our img url
    var src = elem.attr('data-original');

    // change span to img using the value from data-original
    elem.replaceWith('<img src="' + src + '" width="50%" height="50%" style="display:block;position:absolute;"/>');

  });

  $('.trigger').mouseout(function() {
    // find our span
    var elem = $(this).siblings('img');

    // get our img url
    var src = elem.attr('src');

    // change span to img using the value from data-original
    elem.replaceWith('<span data-original="' + src + '"></span>');
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="/gotourl" class="trigger" target="_self"><img src="https://via.placeholder.com/100x100?text=Launcher" border="0"></a>
<span data-original="https://via.placeholder.com/468x60?text=SPAN+1"></span>

<a href="/gotourl" class="trigger" target="_self"><img src="https://via.placeholder.com/100x100?text=Launcher" border="0"></a>
<span data-original="https://via.placeholder.com/468x60?text=SPAN+2"></span>

Upvotes: 0

Views: 48

Answers (2)

Nicolas Roehm
Nicolas Roehm

Reputation: 704

You can fix this using next() instead of siblings() :

$(document).ready(function($) {
  $('.trigger').mouseover(function() {
   // find our span
   var elem = $(this).next('span');

    // get our img url
   var src = elem.attr('data-original');

    // change span to img using the value from data-original
   elem.replaceWith('<img src="' + src + '" width="50%" height="50%" style="display:block;position:absolute;"/>');

  });

  $('.trigger').mouseout(function() {
   // find our span
   var elem = $(this).siblings('img');

    // get our img url
   var src = elem.attr('src');

    // change span to img using the value from data-original
   elem.replaceWith('<span data-original="'+src+'"></span>');
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" class="trigger" target="_self"><img src="https://via.placeholder.com/100x100?text=Launcher" border="0"></a>
<span data-original="https://via.placeholder.com/468x60?text=SPAN+1"></span>

<a href="#" class="trigger" target="_self"><img src="https://via.placeholder.com/100x100?text=Launcher" border="0"></a>
<span data-original="https://via.placeholder.com/468x60?text=SPAN+2"></span>

Upvotes: 2

Randy Casburn
Randy Casburn

Reputation: 14165

The .siblings() selector will select EVERY span that is a sibling - meaning both.

Later, elem.replaceWith(...) will replace EVERY elem in the jQuery collection with that content.

The elem jQuery collection contains EVERY span. So...

The fix is to wrap the <a><span> combo in a div thus:

$(document).ready(function($) {
  $('.trigger').mouseover(function() {
    // find our span
    var elem = $(this).siblings('span');

    // get our img url
    var src = elem.attr('data-original');

    // change span to img using the value from data-original
    elem.replaceWith('<img src="' + src + '" width="50%" height="50%" style="display:block;position:absolute;"/>');

  });

  $('.trigger').mouseout(function() {
    // find our span
    var elem = $(this).siblings('img');

    // get our img url
    var src = elem.attr('src');

    // change span to img using the value from data-original
    elem.replaceWith('<span data-original="' + src + '"></span>');
  });
});
div {
  display: inline;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <a href="/gotourl" class="trigger" target="_self"><img src="https://via.placeholder.com/100x100?text=Launcher" border="0"></a>
  <span data-original="https://via.placeholder.com/468x60?text=SPAN+1"></span>
</div>
<div>
  <a href="/gotourl" class="trigger" target="_self"><img src="https://via.placeholder.com/100x100?text=Launcher" border="0"></a>
  <span data-original="https://via.placeholder.com/468x60?text=SPAN+2"></span>
</div>

Upvotes: 1

Related Questions