[jQuery] 마우스 오버시 큰 이미지 보이기 > 팁앤테크

• 목록

• 페이스북 공유
• 트위터 공유
• 

<?php
$width = 400;
$height = 400;
?>
<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 + "' width='<?php echo $width?>'/>"; // 큰이미지 설정
            $("#showImage").html(imgSrc); // 레이어에 HTML 추가
        });
        // 마우스 오버시 레이어 숨기기
        $('#product img').mouseout(function () {
            $("#showImage").hide(); // 레이어 숨기기
        });
    });
</script>
 
<div id="product">
    <div id="showImage" style="border:1px solid #dddddd;width:<?php echo $width?>px;height:<?php echo $height?>px;overflow:hidden;">
        
    </div>
    <img src="" height="250" width="250">
    <img src="" height="250" width="250">
    <img src="" height="250" width="250">   
</div>