| 02.ShowBigImg.htm |
|
<html xmlns="http://www.w3.org/1999/xhtml"> <head>
<title>마우스 오버시 큰 이미지 보여주기</title>
<script src="../jQuery/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> </body> </html> |
| 결과화면 |
[그림28-1] |
02.ShowBigImg.htm'jQuery | javascript | CSS' 카테고리의 다른 글
| 30.jQuery - RemoveAttr ( 03.Attributes - 04.RemoveAttr) (0) | 2009.11.10 |
|---|---|
| 29.jQuery - MapCollection ( 03.Attributes - 03.MapCollectio ) (0) | 2009.11.10 |
| 27.jQuery - Attributes ( 03.Attributes - 01.Attr ) (0) | 2009.11.10 |
| -- 현재 까지의 jQuery 소스2 -- (0) | 2009.11.09 |
| 26.jQuery - 선택값 가져오기 ( 02.Selectors - 04.Selected ) (0) | 2009.11.09 |
Comments