Hover on images to show larger hidden image linked by alt tag?

Question

please see this fiddle http://jsfiddle.net/rabelais/fEaAZ/4/

How can I link the small thumbnail image to the larger hidden image by using the alt tag of the images?

I want the matching hidden image to show on hover of the smaller thumbnails.

 $(".thumbnails").on("mouseover mouseout", "img", function () {
var flag = $(this).data('flag');

$('[alt="' + $(this).attr('alt') + '"]').css('visibility', flag ? 'hidden' : 'visible');

$(this).data('flag', !flag);
});

Answer 1

If I understand you correctly, then your biggest problem is that previously displayed images are not hidden when other picture needs to be displayed.

When you hover over thumbnail with alt set to 'alicecurls', you are changing visibility of both thumbnail and big picture, but only of those which contain that exact alt. This means that picture previously visible stays visible.

You might want to go through all the big pictures and hide the ones which don't have the right value of attribute alt.

I would change your code in the following way:

$(".thumbnails").on("mouseover mouseout", 'img', function () {
    var alt = $(this).attr('alt');
    $('.displayed-image > img').each(function(index, element) {
        var el = $(element),
            visibility = el.attr('alt') === alt ? 'visible' : 'hidden';
        el.css('visibility', visibility);
    });
});

Here is the fiddle with changed code: http://jsfiddle.net/mj7ba/.

However, you need to define which picture should be displayed after the user moves its mouse away from the picture.

Answer 2

I would suggest the following changes:

• not to abuse alt attribute and use data-* for this purpose
• using id in the selectors
• using displayed-image as a placeholder, because original image already contains correct url

Here is the code: fiddle

Javascript:

$(".thumbnails").on("mouseover ", "img", function () {   
    $('#' + $(this).attr('data-large'))
     .attr('src', $(this).attr('src'))
     .css('visibility', 'visible');
 });

$(".thumbnails").on("mouseout ", "img", function () {   
   $('#' + $(this).attr('data-large')).css('visibility', 'hidden');
 });

Html:

<div class="thumbnails">
<img src="http://intelligen.info/images/Personal/instagram Randoms/alicecurls.jpg"  data-large="alicecurls"/>
<img src="http://intelligen.info/images/Personal/instagram Randoms/genna.jpg" data-large="genna"/>
</div>

<div class="displayed-image">
   <img id="alicecurls" class="repeatable" />
   <img id="genna" class="repeatable"  />
</div>