JavaScript & HTML

마우스 오버 이미지 미리보기 (썸네일 확인)

husks 2015. 6. 22. 16:46
반응형


동적으로 이미지 리스트를 생성 할때 on을 사용하여 이미지 확대 하는 소스 입니다.

body 에 p 태그를 선언하고 해당 테그 안에 이미지를 넣어 보여주는 소스 입니다.

<html>
    <head>
        <title>Test</title>
        <script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                 
                var xOffset = 10;
                var yOffset = 30;

                $(document).on("mouseover",".thumbnail",function(e){ //마우스 오버시
					
					$("body").append("<p id='preview'><img src='"+ $(this).attr("src") +"' width='400px' /></p>"); //보여줄 이미지를 선언						 
					$("#preview")
						.css("top",(e.pageY - xOffset) + "px")
						.css("left",(e.pageX + yOffset) + "px")
						.fadeIn("fast"); //미리보기 화면 설정 셋팅
				});
				
				$(document).on("mousemove",".thumbnail",function(e){ //마우스 이동시
					$("#preview")
						.css("top",(e.pageY - xOffset) + "px")
						.css("left",(e.pageX + yOffset) + "px");
				});
				
				$(document).on("mouseout",".thumbnail",function(){ //마우스 아웃시
					$("#preview").remove();
				});
                 
            });
        </script>
            
		<style>
			/* 미리보기 스타일 셋팅 */
			#preview{
				z-index: 9999;
				position:absolute;
				border:0px solid #ccc;
				background:#333;
				padding:1px;
				display:none;
				color:#fff;
			}
		</style>
    </head>
     
    <body>
        <img src="https://www.gstatic.com/webp/gallery/1.sm.jpg" class="thumbnail" height='50px' />
    </body>
</html>



참고: http://cssglobe.com/easiest-tooltip-and-image-preview-using-jquery/


반응형