jQuery는 참 좋은 물건인 것 같습니다. 이 놈만 가지고 있으면 정말 많은 것들을 편하게 할 수 있는 것 같습니다. 무엇보다 jQuery의 장점은 selector라고 생각하는데 이번에는 그 선택자를 이용한 이미지의 마우스 오버효과를 구현해 보았습니다.
일단 몇가지를 준비합니다. 먼저 이미지를 일정하게 만들어야 하는데, 다른 것은 없습니다. 평상시에 나오는 이미지와 마우스를 올렸을 때 보여질 이미지 두개를 만드는데, 이미지의 파일명을 동일하게, 그리고 이미지의 파일명의 맨 마지막에 “_on”, “_off” 를 붙여주면 됩니다. 물론 확장자도 상관이 없구요. (혹시나 확장자명이 4글자나 2글자일 경우에 문제가 생길 수 있지만 그럴 일은 별로 없겠죠? 그렇다면 이 것은 3글자일 경우에만 사용하기로 합시다.) 그런다음 jQuery를 다운로드 받아서 링크를 시킵니다. 작업을 할 때는 v1.4.2를 사용하였습니다. 다운받고 뭐하고 하는게 귀찮으시다면,,,,
다운로드 링크
이렇게 한줄을 긁어와서 구글api에 있는 것을 가지고 오는 것도 좋은 방법일 듯 하네요. 이렇게 되면 모든 준비는 끝났습니다. 작업을 시작하면 되는데요.
구글api의 jQuery
코드는 이렇게 넣으시면 됩니다.
스크립트 부분을 모든 페이지에서 동작하게 해주고 사용하려는 이미지에 "image_rollover"라는 클래스 명을 주면 모든페이지에서 사용할 수 있습니다. 아래는 사용예 입니다.
일단 몇가지를 준비합니다. 먼저 이미지를 일정하게 만들어야 하는데, 다른 것은 없습니다. 평상시에 나오는 이미지와 마우스를 올렸을 때 보여질 이미지 두개를 만드는데, 이미지의 파일명을 동일하게, 그리고 이미지의 파일명의 맨 마지막에 “_on”, “_off” 를 붙여주면 됩니다. 물론 확장자도 상관이 없구요. (혹시나 확장자명이 4글자나 2글자일 경우에 문제가 생길 수 있지만 그럴 일은 별로 없겠죠? 그렇다면 이 것은 3글자일 경우에만 사용하기로 합시다.) 그런다음 jQuery를 다운로드 받아서 링크를 시킵니다. 작업을 할 때는 v1.4.2를 사용하였습니다. 다운받고 뭐하고 하는게 귀찮으시다면,,,,
다운로드 링크
이렇게 한줄을 긁어와서 구글api에 있는 것을 가지고 오는 것도 좋은 방법일 듯 하네요. 이렇게 되면 모든 준비는 끝났습니다. 작업을 시작하면 되는데요.
구글api의 jQuery
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
코드는 이렇게 넣으시면 됩니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>rollover jQuery</title>
<script type="text/javascript" src="jquery.min.js"></script>
<style type="text/css">
img {border:none; display:block;}
</style>
</head>
<body>
<p>jQuery v1.4.2 loaded.</p>
<a href="#"><img src="img/jq_mo_01_off.jpg" alt="Monday" class="image_rollover" /></a>
<a href="#"><img src="img/jq_mo_02_off.jpg" alt="Tuesday" class="image_rollover" /></a>
<a href="#"><img src="img/jq_mo_03_off.jpg" alt="Wednesday" class="image_rollover" /></a>
<a href="#"><img src="img/jq_mo_04_off.jpg" alt="Thursday" class="image_rollover" /></a>
<a href="#"><img src="img/jq_mo_05_off.jpg" alt="Friday" class="image_rollover" /></a>
<a href="#"><img src="img/jq_mo_06_off.jpg" alt="Saturday" class="image_rollover" /></a>
<a href="#"><img src="img/jq_mo_07_off.jpg" alt="Sunday" class="image_rollover" /></a>
<script type="text/javascript">
$("img.image_rollover").mouseover(function(){
var temp = $(this).attr("src");
var length = temp.length;
var file_name = temp.substring(0, length-6)
var status = temp.substring(length-6).substring(0,2); //ff
var file_type = temp.substring(length-6).substring(3);
if (status == "ff") $(this).attr("src", file_name + "n." + file_type);
}).mouseout(function(){
var temp = $(this).attr("src");
var length = temp.length;
var file_name = temp.substring(0, length-6)
var status = temp.substring(length-6).substring(0,2); //on
var file_type = temp.substring(length-6).substring(3);
if (status == "on") $(this).attr("src", file_name + "off." + file_type);
});
</script>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>rollover jQuery</title>
<script type="text/javascript" src="jquery.min.js"></script>
<style type="text/css">
img {border:none; display:block;}
</style>
</head>
<body>
<p>jQuery v1.4.2 loaded.</p>
<a href="#"><img src="img/jq_mo_01_off.jpg" alt="Monday" class="image_rollover" /></a>
<a href="#"><img src="img/jq_mo_02_off.jpg" alt="Tuesday" class="image_rollover" /></a>
<a href="#"><img src="img/jq_mo_03_off.jpg" alt="Wednesday" class="image_rollover" /></a>
<a href="#"><img src="img/jq_mo_04_off.jpg" alt="Thursday" class="image_rollover" /></a>
<a href="#"><img src="img/jq_mo_05_off.jpg" alt="Friday" class="image_rollover" /></a>
<a href="#"><img src="img/jq_mo_06_off.jpg" alt="Saturday" class="image_rollover" /></a>
<a href="#"><img src="img/jq_mo_07_off.jpg" alt="Sunday" class="image_rollover" /></a>
<script type="text/javascript">
$("img.image_rollover").mouseover(function(){
var temp = $(this).attr("src");
var length = temp.length;
var file_name = temp.substring(0, length-6)
var status = temp.substring(length-6).substring(0,2); //ff
var file_type = temp.substring(length-6).substring(3);
if (status == "ff") $(this).attr("src", file_name + "n." + file_type);
}).mouseout(function(){
var temp = $(this).attr("src");
var length = temp.length;
var file_name = temp.substring(0, length-6)
var status = temp.substring(length-6).substring(0,2); //on
var file_type = temp.substring(length-6).substring(3);
if (status == "on") $(this).attr("src", file_name + "off." + file_type);
});
</script>
</body>
</html>
스크립트 부분을 모든 페이지에서 동작하게 해주고 사용하려는 이미지에 "image_rollover"라는 클래스 명을 주면 모든페이지에서 사용할 수 있습니다. 아래는 사용예 입니다.
'웹 > DOM' 카테고리의 다른 글
| [javascript] location 객체 설명 (0) | 2010.05.24 |
|---|---|
| [jQuery] 라이브러리를 블러와서 사용하는 법 (0) | 2010.05.20 |
| [jQuery] jQuery를 이용한 메뉴 (0) | 2010.05.10 |
| [jQuery] jQuery를 이용한 최근게시물보기(Latest) v1.0 (0) | 2010.05.10 |
| [jQuery] jQuery를 이용한 자주묻는질문(FAQ) v1.0 (0) | 2010.05.10 |
