Clueless. jQuery Image Firefox에서 스왑 문제, IExplorer 8에서 작동합니다.

Question

일련의 소셜 버튼 및 롤오버 이벤트에 문제가 있습니다. 나는 6 개의 이미지를 가지고 있는데, 'social32'클래스는 'off'상태에서 착색 된 것으로 바꾼다. 모든 파일은 '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에서 완벽하게 작동하지만 않습니다!

Answer 1

CSS 사용에는 CSS를 사용하고 자바 스크립트에는 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의 깜박 거림을 방지하고 전반적인 대역폭 사용을 줄일 수 있습니다. 이렇게의 장점은 더 이상, 오프 상태에 대한 배경 위치에서 단순히 변화 별도의 클래스를 필요로하지 않습니다 :이에서 더 많은 jQuery를 배우고 기대했다

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