1. 마우스 오버시 다른 이미지와 아웃시 원래 이미지 보여주기 및 attr로 속성 가져오기 예제
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;" charset="utf-8" >
<title> jquery </title>
<script src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script>
$(document).ready(function (){
alert($('a').attr('href')); //get
//1 : img에 마우스 오버시 이미지 변경
$('img:first').mouseover(function(){
$(this).attr("src", "http://img.naver.net/static/www/up/2013/0419/mat_16592711c.jpg");
});
//2 ; 마우스 오버/아웃시 다른 이미지 표시
$('#copy').mouseover(function(){
$(this).attr("src", "../images/icon_copy_over.gif");
});
$('#copy').mouseoout(function(){
$(this).attr("src", "../images/icon_copy.gif");
});
});
</script>
</head>
<body>
<a href="http://www.naver.com">네이년</a>
<img src="image/logo.jpg" alt="이미지1">
<img src="image/logo.jpg" alt="이미지2" id="copy">
</body>
</html>
'강좌 > jQuery' 카테고리의 다른 글
| 제이쿼리(jQuery) - 폼 요소의 값 가져오기 및 설정 (0) | 2013.04.22 |
|---|---|
| jQuery Attributes(jQuery로 요소의 속성 변경하기, 맵 이용) - 3 (0) | 2013.04.22 |
| jQuery Attributes(jQuery로 요소의 속성 변경하기) - 1 (0) | 2013.04.22 |
| 제이쿼리(jQuery) - jQuery 선택기 설명 2 (패스워드 일치) (0) | 2013.04.22 |
| 제이쿼리(jQuery) - jQuery 선택기(셀렉터, 실렉터, 선택자, Selector) 설명 1 (0) | 2013.04.22 |
