원본 사진 마우스 이동시 보여주기

원본 사진 마우스 이동시 보여주기

 

1. <style type="text/css">
2.     a img {
3.         border: none;
4.     } #largeImage {
5.         position: absolute;
6.         padding: .5em;
7.         background: #e3e3e3;
8.         border: 1px solid;
9.     }
10. </style>
11. <script type="text/javascript">
12. <!--
13.     maxWidth = 200;
14.     $(function(){
15.         var offsetX = 20;
16.         var offsetY = 10;
17.         $('a').hover(function(e){
18.             if($(this).attr('src')){
19.                 //mouse on
20.                 var href = $(this).attr('src');
21.                 $('<img id="largeImage" src="' + href + '">').css('top', e.pageY + offsetY).css('left', e.pageX + offsetX).appendTo('body');
22.  
23.                 // for chrome, firefox
24.                 var img = $("#largeImage");
25.                 img.load(function() {
26.                     if (img.width() > maxWidth)
27.                         img.width(maxWidth);
28.                 });
29.  
30.                 // for IE
31.                 var img = $("#largeImage");
32.                 var width = img.width() > 0 ? img.width() : parseInt(img.attr("rwidth"));
33.                 if(width > maxWidth || width=='')
34.                 {
35.                     img.removeAttr("width");
36.                     img.removeAttr("height");
37.                     img.removeAttr("style");
38.                     img.attr("width", maxWidth);
39.                     //img.css("cursor", "pointer");
40.                 }
41.  
42.             }
43.         }, function(){
44.             //mouse off
45.             $('#largeImage').remove();
46.         });
47.        
48.         $('a').mousemove(function(e){
49.             $('#largeImage').css('top', e.pageY + offsetY).css('left', e.pageX + offsetX);
50.         })
51.        
52.     });
53. -->
54. </script>