롤오버 간단하게 하는법이 있나용?
본문
안녕하세요~ 수고 많으십니다~~ ㅎㅎ
롤오버를 만들어 보려고 하니 코드가 너무 많은데 간결하게 줄인 코드가 없나요 ㅠㅠ
웹에디터로 하려니 롤오버 한번 하려니까 코드 엄청 생겨서요
1.jpg 원이미지
1_r.jpg 롤오버할 이미지
이렇게 있다고 하면 정말 간단하게 ㅠㅠ 롤오버 하는법이 있을까해서 질문드려요
답변 3
<!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>
<body>
<img src="1.jpg" class="button">
</body>
</html>
서태민님이 참조해주신 내용을 이용해서 위와 같이 구성하시면 되겠습니다.
민기쓍님 방식은 로컬에는 문제가 없겠지만 웹서버에서는 롤오버되는 이미지가 마우스오버가 되어야 로딩이 되므로 처음에 이미지가 엑박으로 보여질 수 있으므로 권장하기는 좀 않 좋은 방법인 듯 하고요.
제이쿼리를 이용해서 롤오버 이미지를 미리 로딩하는 방식으로 간단하게 구성하는 것이 좋을 겁니다.
답변감사합니다 근데 메뉴가 2개이상일 경우는 소스를 어떻게 해야하나요 ㅜㅜ 메뉴한개 롤오버하는데 코드가 상당하네요 ㅎ
소스가 길다구요??? 저 정도는 가장 간단한 소스입니다. 만일 소스가 길다면 자바스크립트 부분을 js파일로 따로 구성하시면 되죠.
다중 롤오버는 http://ggavang.tistory.com/95 참조하시면 되겠습니다.
답변감사합니다 ㅎㅎ 저는 코딩에 대해서 많이 몰라서요 롤오버가 눈에 보이기엔 간편해 보이잖아요~ 그래서요 ㅎㅎ
역시 프로그래머분들은 대단하신거 같습니다 저정도 코드가 간단한거면 ㅠㅠㅠ ㅎㅎㅎ 답변 감사합니다 다중소스~! 적용해보겠습니다
<img src='1.jpg' onmounseover="this.src='1_r.jpg';" onmouseout="this.src='1.jpg'">
