JQuery show/hide elements with matching title and alt tag

Question

Is it possible to show an image via mouseover on a link whose only matching tags are title and alt?

My CMS can only generate matching title and alt tags for 2 completely seperated elements. It roughly looks like this:

<a href="#" title="aubergine">hover this to show image</a>

<img width="300" height="300" alt="aubergine" src="http://i.imgur.com/0MmkDiI.jpg"></img>

I've been able to target the img like so:

$('a').mouseover(function() {
$('[alt="aubergine"]').css( "opacity", "100" );
});

But instead of the specific target [alt="aubergine"] i would have to get the image via [alt="title of this link i just hovered"].

Here is a fiddle with the working prototype so far: https://jsfiddle.net/82xnqu6j/1/

The jQuery `.attr()` method is what you would be looking for here. In addition, you would use `===` conditional checker matching the attributes on hover. Lastly, to automate the process, you could tie the links and images together via their `.index()` (assuming that it will not change dynamically). I will try to furbish a working example, but could you provide all the images to be used in your HTML? — Alexander Dixon, Aug 04 '15 at 01:11
`opacity` goes from `0.0` to `1.0`. It's a fraction, not a percentage, so `100` is not appropriate. — Barmar, Aug 04 '15 at 01:14
Well, oops? Thanks for the hint Barmar. @AlexanderDixon I think i have already found a solution. Thanks. — Typetecture, Aug 04 '15 at 01:34

Maximillian Laumeister · Accepted Answer · 2015-08-04T01:43:24.920

2

Use jQuery to pull out the title attribute of your current element, like in the following live example.

That way you can generalize it for all matching links.

Live Example:

$('a').mouseover(function() {
  $('[alt="' + $(this).attr("title") + '"]').css( "opacity", "1" );
});

$('a').mouseout(function() {
  $('[alt="' + $(this).attr("title") + '"]').css( "opacity", "0" );
});

img {opacity:0;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" title="aubergine">hover this to show image</a>

<img width="100" height="100" alt="aubergine" src="http://i.imgur.com/0MmkDiI.jpg"></img>

JSFiddle Version: https://jsfiddle.net/82xnqu6j/4/

edited Aug 04 '15 at 01:43

answered Aug 04 '15 at 01:11

Maximillian Laumeister

19,884
8
59
78

Great solution. Works flawlessly. I have a follow-up question: Is it possible to target the container of our just targeted element? At the moment is within a
tag that i would also like to change via JQuery. Thanks so much. :)
– Typetecture Aug 04 '15 at 20:28
Try putting the selected elements in a variable - `var el = $('[alt="' + $(this).attr("title") + '"]');` then `el.css( "opacity", "1" );`, and then you can do whatever else you want with `el`. Also look into using `el.parent()`. – Maximillian Laumeister Aug 04 '15 at 20:32
1

That works. Amazing. Thanks again, you are awesome. Here is an updated Fiddle if anyone is interested: https://jsfiddle.net/82xnqu6j/8/ – Typetecture Aug 04 '15 at 21:40

score 0 · Answer 2 · answered Aug 04 '15 at 01:10

Simply try getting the actual title from the link and using it as part of the selector

    $('a').mouseover(function() { 
        $('[alt="'+this.title+'"]').css( "opacity", "100" );
    });

This applies to any attribute, such as title, src, href, etc.

Check the w3schools page for this in: http://www.w3schools.com/cssref/sel_attribute_value.asp

score 0 · Answer 3 · answered Aug 04 '15 at 01:16

You can just use $(this).attr('title') to choose any attribution of the element in jQuery, same as this.title in native JavaScript.

$('a').mouseover(function() {
  $('[alt="' + $(this).attr('title') + '"]').css("opacity", "100");
});

$('a').mouseout(function() {
  $('[alt="' + $(this).attr('title') + '"]').css("opacity", "0");
});

img {
  opacity: 0
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" title="aubergine">hover this to show image</a>
<a href="#" title="test">hover this to show image</a>
<img width="300" height="300" alt="aubergine" src="http://i.imgur.com/0MmkDiI.jpg"></img>
<img width="300" height="300" alt="test" src="https://i.stack.imgur.com/gVqLo.png"></img>

JQuery show/hide elements with matching title and alt tag

3 Answers3