글 수 34
보짱this를 사용해서 정말 간단하게 롤오버 이미지를 만들수가 있네요.
- jQuery
$(function() {
$("#menu img").hover(function() {
$(this).attr("src", $(this).attr("src").split(".").join("-hover."));
}, function() {
$(this).attr("src", $(this).attr("src").split("-hover.").join("."));
});
});
- html
<ul id="menu">
<li><a href="#"><img src="item1.gif" /></a></li>
<li><a href="#"><img src="item2.gif" /></a></li>
<li><a href="#"><img src="item3.gif" /></a></li>
</ul>jQuery 코드를 보시면 아시겠지만 롤오버 시 이미지명은 평상시 이미지명-hover.gif 입니다.
더 깊숙한 설명은 필요 없을 것 같군요;; 그냥 보면 아실테니까요;;
출처 및 원문 : http://www.shopdev.co.uk/blog/jquery-rollovers-using-this/
또 다른 롤오버 이미지 : http://www.vozzang.net/jquery/436
