Attributes - 마우스 오버시 큰 이미지 보여주기
.NET프로그래밍/jQuery 1.3.2 2009. 11. 10. 09:33 |
[ShowBigImg.htm]
<!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>
<title>마우스 오버시 큰 이미지 보여주기</title>
<script src="../js/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
// 아래 코드는 모든 이미지 파일의 이미지명을 얻어,
// bigs/ 폴더에 있는 동일한 이미지를 div에 보여준다.
$('#product img').mouseover(function () {
$("#showImage").show(); // 이미지 보여줄 레이어 보이기
var imgSrc = ""; // 이미지 소스 저장 변수
imgSrc = $(this).attr("src"); // attr()로 src get하기
imgSrc = imgSrc.substr(imgSrc.lastIndexOf("/") + 1); // 순수 파일명만 얻기
imgSrc = "<img src='../ProductImages/bigs/" + imgSrc + "' />"; // 큰이미지 설정
$("#showImage").html(imgSrc); // 레이어에 HTML 추가
});
// 마우스 오버시 레이어 숨기기
$('#product img').mouseout(function() {
$("#showImage").hide(); // 레이어 숨기기
});
});
</script>
</head>
<body>
<div id="product">
<img src="../ProductImages/Book-01.jpg" />
<img src="../ProductImages/Hardware-01.jpg" />
<img src="../ProductImages/Online-01.jpg" />
<div id="showImage"
style="border:1px solid red;width:400px;height:400px;">
</div>
</div>
</body>
</html>
-------------------------------------------------------------------------------------
[실행결과]
--> 아래그림에서, 위에 있는 작은 3개의 이미지중 하나의 이미지에 마우스오버(mouseover)하면 그 아래에 해당이미지가 큰이미지로 출력된다.
'.NET프로그래밍 > jQuery 1.3.2' 카테고리의 다른 글
| Attributes - 특정 속성을 지우기 (0) | 2009.11.10 |
|---|---|
| Attributes - 맵(컬렉션)으로 다중 속성 지정 (0) | 2009.11.10 |
| Attributes - DOM요소의 attribute 읽어오기 (0) | 2009.11.09 |
| Form관련 jQuery 선택기 명령어 - :selected (드롭다운리스트에서 선택한 값 가져오기) (0) | 2009.11.09 |
| Form관련 jQuery 선택기 명령어 - 암호확인(PasswordConfirm) 기능 구현하기 (0) | 2009.11.09 |