jQuery를 이용해서 롤오버시 이미지가 바뀌는 스크립트를 만들었습니다.
var imgSrc=''
$('#top_menu1 img').hover(function () {
imgSrc = $(this).attr('src');
if(imgSrc.indexOf('menu01.jpg')!=-1) {
$(this).attr('src', '<?=$g4[path]?>/assets/images/menu01_on.jpg');
} else if(imgSrc.indexOf('menu02.jpg')!=-1) {
$(this).attr('src', '<?=$g4[path]?>/assets/images/menu02_on.jpg');
} else if(imgSrc.indexOf('menu03.jpg')!=-1) {
$(this).attr('src', '<?=$g4[path]?>/assets/images/menu03_on.jpg');
}
}, function () {
$(this).attr('src', imgSrc);
});
이건 그 스크립트구요.
보시면 아시겠지만 attr로 src의 값을 변경해서 다른이미지로 바꾸고, 마우스가 빠져나오면 이미지가 원래대로 돌아오는 간단한 오버 코드입니다.
그런데 다른 브라우저에서는 알아서 브라우저가 캐싱을 해서 한번 이미지를 받아온 후 계속 사용하는데,
유독 익스플로러만 오버를 할 때마다 이미지를 계속 받아오네요.
저 문제 어떻게 할 방법 없나요?
수동적으로 캐싱하는 방법이나, 아니면 다른 방법좀 알려주시면 감사하겠습니다.
본인삭제금지
글쓰기