답변 3개
채택된 답변
+20 포인트
10년 전
</p><p><!doctype html>
<head>
<meta charset="utf-8">
<title>롤오버</title>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script type='text/javascript'>
$(document).ready(function(){
$(".button").hover(function() {
$(this).attr("src","1_r.jpg");
}, function() {
$(this).attr("src","1.jpg");
});
});
</script>
</head></p><p><body>
<img src="1.jpg" class="button">
</body>
</html></p><p>서태민님이 참조해주신 내용을 이용해서 위와 같이 구성하시면 되겠습니다.
민기쓍님 방식은 로컬에는 문제가 없겠지만 웹서버에서는 롤오버되는 이미지가 마우스오버가 되어야 로딩이 되므로 처음에 이미지가 엑박으로 보여질 수 있으므로 권장하기는 좀 않 좋은 방법인 듯 하고요.
제이쿼리를 이용해서 롤오버 이미지를 미리 로딩하는 방식으로 간단하게 구성하는 것이 좋을 겁니다.
로그인 후 평가할 수 있습니다
답변에 대한 댓글 3개
i
ideaman
10년 전
답변감사합니다 근데 메뉴가 2개이상일 경우는 소스를 어떻게 해야하나요 ㅜㅜ 메뉴한개 롤오버하는데 코드가 상당하네요 ㅎ
p
port
10년 전
소스가 길다구요??? 저 정도는 가장 간단한 소스입니다. 만일 소스가 길다면 자바스크립트 부분을 js파일로 따로 구성하시면 되죠.
다중 롤오버는 http://ggavang.tistory.com/95 참조하시면 되겠습니다.
다중 롤오버는 http://ggavang.tistory.com/95 참조하시면 되겠습니다.
i
ideaman
10년 전
답변감사합니다 ㅎㅎ 저는 코딩에 대해서 많이 몰라서요 롤오버가 눈에 보이기엔 간편해 보이잖아요~ 그래서요 ㅎㅎ
역시 프로그래머분들은 대단하신거 같습니다 저정도 코드가 간단한거면 ㅠㅠㅠ ㅎㅎㅎ 답변 감사합니다 다중소스~! 적용해보겠습니다
역시 프로그래머분들은 대단하신거 같습니다 저정도 코드가 간단한거면 ㅠㅠㅠ ㅎㅎㅎ 답변 감사합니다 다중소스~! 적용해보겠습니다
댓글을 작성하려면 로그인이 필요합니다.
10년 전
http://bavotasan.com/2009/a-simple-mouseover-hover-effect-with-jquery/">http://bavotasan.com/2009/a-simple-mouseover-hover-effect-with-jquery/
여기 참조하셔여
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인