image with hover? (mouse over)

Question

Hi, i want my icon

<img class="addFriend" src="images/addFriend.png" style="padding-right: 55px;">

to change to

when mouse over.. like you can do with a:hover, how can i do this?

I tried

addFriend img:hover{
    background: url(images/addFriend_hover.png);
}

Answer 1

You have to use a container with a background image, e.g. a div with a specified height and width. Then you can use the background image and a :hover-pseudo-class.

Answer 2

Ditch the img tag, and do it without javascript

(off the top of my head, untested)

HTML

<div class="addFriend"><a href="addfriend.html">Add Friend</a></div>

CSS

.addFriend { background: url(images/addFriend.png); }
.addFriend:hover { background: url(images/addFriend_hover.png); }

Answer 3

You could also use jQuery.

$('img.addFriend').hover(function() {
$(this).attr('src','images/addFriend_hover.png');
}, function() {
$(this).attr('src','images/addFriend.png');
});

Edit You could also do non-jQuery, I assume you don't want a background-image or an href

<img src='images/addFriend.png' onmouseover='this.src="images/addFriend_hover.png"' onmouseout='this.src="images/addFriend.png"' />

Answer 4

For it to work in all browsers with the least amount of code you can do it with CSS.

<a href="#" class="icon">Add A Friend</a>



.icon {
  display: block;
  width: (width of image);
  height: (height of image);
  text-indent: -9999px; /* hides the text 'Add A Friend' */
  background: url(url of image) no-repeat center center;
  padding-right: 55px;
}

.icon:hover {
  background: url(url of new image) no-repeat center center;
}

Answer 5

This tutorial might be useful: http://www.w3schools.com/js/js_animation.asp To see if it does what you want, scroll down to "The Entire Code" and click "Try it yourself".