작성일 : 11-11-30 15:04
|
[JQuery] (JQuery Source) 마우스 오버시 큰 이미지 보여주기
|
 |
|
글쓴이 :
조형래
 조회 : 3,988
|
<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>
<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>
|
|
948
