Clueless. jQuery Image Swap problem in Firefox, works on IExplorer 8

Question

Hi all

I'm having a problem with a series of social buttons, and their rollover event. I have 6 images, with class 'social32' which I'd like to change from their 'off' status to their coloured one. All files are named like 'facebook_32.png' & 'facebook_32_off.png'

$(".social32").each(function(){
    var t=$(this);
    var src1= $(this).attr("src");
    var newSrc = src1.substring(src1.lastIndexOf("/"), src1.lastIndexOf("_off."));
    $(this).hover(function(){
  $(this).attr("src", "imgs/"+newSrc+"." + /[^.]+$/.exec(src1));
    }, function(){
  $(this).attr("src", "imgs/"+newSrc+"_off." + /[^.]+$/.exec(src1));
    });
});

And the HTML code can't be easier.

    <p class="bottom10">
<img class="social32" src="imgs/facebook_32_off.png" width="32" height="32" alt="Facebook" id="Facebook" />
    <img class="social32" src="imgs/twitter_32_off.png" width="32" height="32" alt="Twitter" id="Twitter" />
    <img class="social32" src="imgs/linkedin_32_off.png" width="32" height="32" alt="LinkedIn" id="Linkedin" />
    <img class="social32" src="imgs/skype_32_off.png" width="32" height="32" alt="Skype" id="Skype" />
    <img class="social32" src="imgs/googletalk_32_off.png" width="32" height="32" alt="Google Talk" id="GTalk" />
    <img class="social32" src="imgs/googlewave_32_off.png" width="32" height="32" alt="Google Wave" id="GWave" />
    </p>

For any reason, this works perfectly on IExplorer 8, but doesn't on Firefox, Safari nor Chrome ..

Thanx for your input beforehand!

Answer 1

Use css for css things and use javascript for javascript things.

<style>
.social32{
    float: left;
    width: 32px;
    height: 32px;
    text-indent: -9999px;
}
.facebook{
    background: url(imgs/facebook_32_off.png);
}
.facebook:hover{
    background: url(imgs/facebook_32.png);
}
.twitter{
    background: url(imgs/twitter_32_off.png);
}
.twitter:hover{
    background: url(imgs/twitter_32.png);
}
/* continue with others */
</style>

<p class="bottom10">
    <a href="#" class="social32 facebook">Facebook</a>
    <a href="#" class="social32 twitter">Twitter</a>
    <a href="#" class="social32 linkedin">Linkedin</a>
    <a href="#" class="social32 skype">Skype</a>
    <a href="#" class="social32 qoogletalk">GTalk</a>
    <a href="#" class="social32 googlewave">GWave</a>
</p>

Answer 2

I agree with peter on this one. I would also recommend you create a sprite of both the on and off states of the social network images so you don't have to dynamically load each image on hover. This would aid in preventing the flicker bug in IE as well as reduce your overall bandwidth usage. The benefit of doing so is you no longer need separate classes for the off state, simply a change in background positioning:

/* assumes your icons are 16x16 and you have created a 16x32 icon with on and off states */
.off { background-position: 0 -16px; }