롤오버 간단하게 하는법이 있나용?

ideaman

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2015-02-09 (월) 21:42:35 4,501

안녕하세요~ 수고 많으십니다~~ ㅎㅎ

롤오버를 만들어 보려고 하니 코드가 너무 많은데 간결하게 줄인 코드가 없나요 ㅠㅠ

웹에디터로 하려니 롤오버 한번 하려니까 코드 엄청 생겨서요

1.jpg 원이미지

1_r.jpg 롤오버할 이미지

이렇게 있다고 하면 정말 간단하게 ㅠㅠ 롤오버 하는법이 있을까해서 질문드려요

그누보드5

답변 3개 / 댓글 3개

채택된 답변

+20 포인트

port

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2015-02-10 (화) 11:32:04

Copy

<!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>

서태민님이 참조해주신 내용을 이용해서 위와 같이 구성하시면 되겠습니다.

민기쓍님 방식은 로컬에는 문제가 없겠지만 웹서버에서는 롤오버되는 이미지가 마우스오버가 되어야 로딩이 되므로 처음에 이미지가 엑박으로 보여질 수 있으므로 권장하기는 좀 않 좋은 방법인 듯 하고요.

제이쿼리를 이용해서 롤오버 이미지를 미리 로딩하는 방식으로 간단하게 구성하는 것이 좋을 겁니다.