New image when hovering on link

Question

<div id="social-links"> 
    <div><a href=""><img src="pictures/facenh.png"/></a></div>
    <div><a href=""> <img src="pictures/twitternh.png"  /></a></div>
    <div><a href=""> <img src="pictures/ytnh.png"  /></a></div>
    <div><a href=""> <img src="pictures/mailnh.png"  /></a> </div>  
</div>

This is the code I'm using. The thing I want to do is to make another image appear when hovering over the image/link. I'm not sure how to do it, so i would love some help please.

#social-links {
    float: left;
    width: 100px;
    height: 500px;
    margin-left: -20px;
}

If you need to know the css for social-links, it's right there. All i want to do is to make another image appear when hovering over the links/the images. Perhaps Javascript is needed?

Check out the accepted answer for this question: http://stackoverflow.com/questions/4717117/css-image-link-change-on-hover?rq=1 . That is the approach that I would suggest. — talemyn, Nov 13 '13 at 00:55
possible duplicate of [CSS Sprites - not only for background images?](http://stackoverflow.com/questions/2428053/css-sprites-not-only-for-background-images) — Bram Vanroy, Nov 13 '13 at 01:16

score 2 · Answer 1 · answered Nov 13 '13 at 01:15

No JavaScript required, you can just use CSS.

It's not great practice to use images for links as search engines won't read them or get any context from them. Much better to have a text link that you replace with an image in the CSS - e.g.

<div id="social-links"> 
    <div><a href="" id="facebookLink"><span>Facebook</span></a></div>
    ...
</div>

Then, in your CSS, simply hide the text, and replace with image for both standard and hover.

#social-links {
    float: left;
    width: 100px;
    height: 500px;
    margin-left: -20px;
}

#social-links a span {
    display: none;
}

#facebookLink {
    display: block;
    background: url('path-to-facebook-image.jpg');
    width: 50px;
    height: 50px;
}

 #facebookLink:hover {
    background: url('path-to-facebook-hover-image.jpg');
}

This is the way to go. I was just trying to stick to the markup they already had. Plus one from me. — j0hnstew, Nov 13 '13 at 13:01

score 0 · Accepted Answer · edited May 23 '17 at 12:12

0

Here is a jQuery solution. Fiddle Here.

$("#facebook").hover( function () {
    $(this).find("img").attr('src', "http://placehold.it/150x150/ff0000/000000");
}, function () {
    $(this).find("img").attr('src', 'http://placehold.it/150x150');
});

I really think this Link from @talemyn is what you are looking for also. Either way should get the job done.

edited May 23 '17 at 12:12

Community

1
1

answered Nov 13 '13 at 01:14

j0hnstew

709
8
25

New image when hovering on link

2 Answers2