롤오버 간단하게 하는법이 있나용?
본문
안녕하세요~ 수고 많으십니다~~ ㅎㅎ
롤오버를 만들어 보려고 하니 코드가 너무 많은데 간결하게 줄인 코드가 없나요 ㅠㅠ
웹에디터로 하려니 롤오버 한번 하려니까 코드 엄청 생겨서요
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>
서태민님이 참조해주신 내용을 이용해서 위와 같이 구성하시면 되겠습니다.
민기쓍님 방식은 로컬에는 문제가 없겠지만 웹서버에서는 롤오버되는 이미지가 마우스오버가 되어야 로딩이 되므로 처음에 이미지가 엑박으로 보여질 수 있으므로 권장하기는 좀 않 좋은 방법인 듯 하고요.
제이쿼리를 이용해서 롤오버 이미지를 미리 로딩하는 방식으로 간단하게 구성하는 것이 좋을 겁니다.
!-->
<img src='1.jpg' onmounseover="this.src='1_r.jpg';" onmouseout="this.src='1.jpg'">
답변을 작성하시기 전에 로그인 해주세요.