I've got some social media icons that I'd like to change color when they're hovered over. I figured the easiest way to do this is by replacing the image with a new one (they're small png files). What do you suggest? A dynamic function would be ideal.. there are four icons, each of which has a filename of demo.png, demo_hover.png. I'm using the jQuery library.

Thank you!

HTML

  <a class="a" id="interscope_icon" href="/" alt="Interscope Records" target="_blank"><img class="icon" id="interscope" src="../Images/icons/interscope.png" alt="Interscope Records" /></a>
  <a class="a" href="" alt="Twitter" target="_blank"><img class="icon" id="twitter" src="../Images/icons/twitter.png" alt="Fernando Garibay's Twitter" /></a>
</p>
<p>
  <a class="a" href="" alt="Facebook" target="_blank"><img class="icon" id="facebook" src="../Images/icons/facebook.png" alt="Fernando Garibay's Facebook" /></a>
  <a class="a" href="" alt="Myspace" target="_blank"><img class="icon" id="myspace" src="../Images/icons/myspace.png" alt="Fernando Garibay's Myspace" /></a>
</p>

jQuery

$('#interscope_icon').hover(function(){
  $('#interscope').attr('src', 'Images/icons/interscope.png');
});

I've got some social media icons that I'd like to change color when they're hovered over. I figured the easiest way to do this is by replacing the image with a new one (they're small png files). What do you suggest? A dynamic function would be ideal.. there are four icons, each of which has a filename of demo.png, demo_hover.png. I'm using the jQuery library.

Thank you!

HTML

  <a class="a" id="interscope_icon" href="http://www.interscope./" alt="Interscope Records" target="_blank"><img class="icon" id="interscope" src="../Images/icons/interscope.png" alt="Interscope Records" /></a>
  <a class="a" href="http://www.twitter./FernandoGaribay" alt="Twitter" target="_blank"><img class="icon" id="twitter" src="../Images/icons/twitter.png" alt="Fernando Garibay's Twitter" /></a>
</p>
<p>
  <a class="a" href="http://www.facebook./f2inc" alt="Facebook" target="_blank"><img class="icon" id="facebook" src="../Images/icons/facebook.png" alt="Fernando Garibay's Facebook" /></a>
  <a class="a" href="http://www.myspace./f2inc" alt="Myspace" target="_blank"><img class="icon" id="myspace" src="../Images/icons/myspace.png" alt="Fernando Garibay's Myspace" /></a>
</p>

jQuery

$('#interscope_icon').hover(function(){
  $('#interscope').attr('src', 'Images/icons/interscope.png');
});

• javascript
• jquery
• image
• hover

4 Answers 4

You're probably better off using the 'CSS sprite' method rather than loading a new image...

http://css-tricks./css-sprites/

The easy way is to do it the CSS way:

#interscope_icon { background-image: url(...) }
#interscope_icon:hover { background-image: url(...) }

I just had this dilemma as well so came up with my own method. Super easy, works great and no need for sprites, just an transparent PNG:

HTML:

<div class="facebookicon">
    <a href="#!"><img src="http://example./some.png"></a>
</div>

CSS:

.facebookicon img {
    background: #fff;
    transition:  background 400ms ease-out;
}

.facebookicon img:hover {
    background: #3CC;
    transition:  background 400ms ease-in;
}
/* you need to add various browser prefixes to transition */
/* stripped for brevity */

http://jsfiddle/mattmagi/MpxBd/

Let me know what you think.

I would give the social icons as the background-image on the anchors (with display: inline-block;) instead of as <img /> elements inside the anchors.

Then simply define an a:hover state that changes the CSS to a different background. Perhaps even sprite them.

Something like this:

#some_id { background-image: url(...); }
#some_id:hover { background-image: url(...); }