
<script>

/* 다음은 테이블 내의 이미지에 마우스 hover시 해당 이미지가 마우스 위치 근처에 3배 확대되어 나타나도록 하는 jQuery 코드 예제입니다.

```html

동작 방식:

페이지 로드 시 body에 #zoomContainer라는 절대 위치의 div를 생성합니다.

#myTable 내부의 이미지에 마우스가 올라가면, 해당 이미지의 src와 크기를 가져와 3배 확대된 크기로 #zoomContainer에 이미지 태그를 생성하여 표시합니다.

마우스가 움직일 때마다 컨테이너의 위치를 마우스 포인터 근처로 업데이트합니다.

이미지에서 마우스가 벗어나면 확대된 이미지를 숨깁니다.

이 코드를 페이지 하단에 추가하면 원하는 기능을 구현할 수 있습니다.

*/
$(document).ready(function(){
    // 확대 이미지를 표시할 컨테이너가 없다면 body에 추가
    if($("#zoomContainer").length === 0) {
        $("body").append("<div id='zoomContainer' style='position: absolute; display: none; pointer-events: none; z-index: 9999;'></div>");
    }
    
    // #myTable 내부의 모든 이미지에 대해 이벤트 바인딩
    $("#myTable").on("mouseenter", "img", function(e){
        var imgSrc = $(this).attr("src");
        // 원본 이미지의 크기를 가져와서 3배로 확대
        var origWidth = $(this).width();
        var origHeight = $(this).height();
        var zoomWidth = origWidth * 4;
        var zoomHeight = origHeight * 4;
        // 확대 이미지 컨테이너에 이미지 삽입 (원하는 스타일로 꾸밀 수 있음)
        $("#zoomContainer").html("<img src='" + imgSrc + "' style='width:" + zoomWidth + "px; height:" + zoomHeight + "px; border: 1px solid #ccc; background: #fff;'>");
        // 마우스 위치 근처에 컨테이너 표시 (약간의 오프셋 추가)
        $("#zoomContainer").css({
            top: (e.pageY + 15) + "px",
            left: (e.pageX + 15) + "px",
            display: "block"
        });
    });
    
    // 마우스 이동에 따라 확대 이미지 컨테이너 위치 업데이트
    $("#myTable").on("mousemove", "img", function(e){
        $("#zoomContainer").css({
            top: (e.pageY + 15) + "px",
            left: (e.pageX + 15) + "px"
        });
    });
    
    // 마우스가 이미지 영역을 벗어나면 확대 이미지 숨김
    $("#myTable").on("mouseleave", "img", function(){
        $("#zoomContainer").hide();
    });
});
</script>