Бестолковые. jQuery Image Swap проблема в Firefox, работает на IExplorer 8

Question

У меня проблема с серией социальных кнопок и их опрокидыванием. У меня есть 6 изображений с классом «social32», которые я хотел бы изменить с их «выключенного» статуса на цветной. Все файлы названы как «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));
    });
});

И HTML-код не может быть проще.

    <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>

По любой причине, это отлично работает на IExplorer 8, но не на Firefox, Safari и Chrome.

Спасибо за ваш вклад заранее!

Answer 1

Используйте css для вещей css и используйте javascript для вещей javascript.

<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

Я согласен с Питером в этом. Я бы также порекомендовал вам создать спрайт как включенного, так и выключенного состояния образов социальной сети, чтобы вам не приходилось динамически загружать каждое изображение при наведении. Это поможет предотвратить ошибку мерцания в IE, а также уменьшит общее использование полосы пропускания. Преимущество этого состоит в том, что вам больше не нужны отдельные классы для выключенного состояния, просто изменение фонового позиционирования:

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