Changing image src on hover

Question

I have a quick question that should be so simple. I have a table that has 4 columns and in each one I have an Tag which in turn contains an <img>. I am looking for a way in either css or javascript that I can change the img's src when I mouseover.

So for example, just one of the rows would look like so:

<td><a href="http://link1/"><img alt="Link1" src="http://images/Link1.png/" /></a></td>

and the CSS that I have at present is:

 img[alt="Link1"]:hover {
  content:url("http://Link1Pressed.png");
 }

Now this works beautifully as it should do in chrome but in Firefox and IE it simply does nothing on the mouseover, what could I do to rectify this? Is there a better way of doing this for the 40 buttons that I have especially as the names are all conventional. IE, the link is a lowercase version of the alt which is the same as the pre .png bit of the image src which in turn is the same as the hover over img src but for the fact that the hover over img src has Pressed too.

Your help would be mightily appreciated. Thanks

You cannot apply `content` directives on `:hover`. Are you sure it works in Chrome? — haim770, Nov 26 '14 at 18:35
Could you maybe set the `a` tag with the proper width and height, then set the image as a CSS background instead of an implicit `img` tag? That way you can just set the CSS `:hover` state to a different image. — Wil, Nov 26 '14 at 18:35
Thanks Wil, I think that seems to be the general consensus. haim770 - it sure does work on Chrome (and apparently Safari too). I'm confused as to when you would use content if not on hover but I may just be thick. — Daniel Casserly, Nov 26 '14 at 19:08

score 1 · Answer 1 · answered Nov 26 '14 at 18:34

1

The content property can only be applied to pseudo elements. Instead, use a background-image on a div:

div[alt="Link1"]{
    background-image: url("http://images/Link1.png");
}
div[alt="Link1"]:hover {
    background-image: url("http://Link1Pressed.png");
}

answered Nov 26 '14 at 18:34

Mooseman

18,763
14
70
93

1

Using a `background-image` on an `img` tag is yucky semantically, and he'll need to remove the `src` tag in order for that to work. I'd rather see that on a `block` or `inline-block` element. – Josh Burgess Nov 26 '14 at 18:36
Just a question, could one not just do this with the a elemnt rather than adding a div? I am that lazy! – Daniel Casserly Nov 26 '14 at 19:09
@DanielCasserly Yes, if you apply `alt` or have another working selector. – Mooseman Nov 27 '14 at 00:48

Josh Burgess · Accepted Answer · 2014-11-26T18:48:07.553

1

That solution outlined in your question only works if it's a pseudo-element. You'll need to either make it a background-image on the a or td and change it that way, or use a jQuery function like this:

$('a').on('mouseover', function() {
  $(this).find('img').attr('src', 'path/to/my/image.png');
});

Or native JavaScript

document.querySelectorAll('a img[alt=Link1]').addEventListener('mouseover', function() {
  this.src = 'path/to/my/image.png';
});

edited Nov 26 '14 at 18:48

answered Nov 26 '14 at 18:35

Josh Burgess

9,327
33
46

Indeed. But you probably meant `a img[alt="Link1"]` as the selector. – haim770 Nov 26 '14 at 18:41
@haim770 – If we're going to select on something as arbitrary as the `alt` tag, why not use the `src` instead? This is just an example, the selector would need to be used with appropriate specificity to select only the desired elements. I hope that's a given. If you think it's necessary, I'll update the answer drawing attention to that fact. – Josh Burgess Nov 26 '14 at 18:45
I agree. But that's the original CSS selector the OP used. – haim770 Nov 26 '14 at 18:47
@haim770 – Fair point, updated. – Josh Burgess Nov 26 '14 at 18:48

Changing image src on hover

2 Answers2