Day 11: Fun Image Hovering

http://blog.themeforest.net/tutorials/jquery-for-absolute-beginners-day-11/

by hohoya33

HTML

<a href="one.jpg"><img src="http://2.s3.envato.com/files/32564991/screenshot-wordpress.jpg" alt="Bi" /></a>
<a href="two.jpg"><img src="http://1.s3.envato.com/files/50857963/theme-icon.png" alt="S" /></a>
<a href="three.jpg"><img src="http://1.s3.envato.com/files/50857963/theme-icon.png" alt="Sa" /></a>

<div id="test"></div>

CSS

a img{border: 0;}
#largeImage{position: absolute;padding: 5em;width: 150px;height: 50px;border: 1px solid #bfbfbf;background: #e3e3e3;}

JavaScript

$(function() {
    var offsetY = 20; //마우스로부터 세로 거리간격
    var offsetX = 10; //마우스로부터 가로 거리간격
    
  $('a').hover(function(e) {
        var href = $(this).attr('href');
    
        $('<img id="largeImage" src="'+ href +'" alt="image" />')
        .css('top', e.pageY + offsetY)
        .css('left', e.pageX + offsetX)
        .appendTo('body');
   
      $('#test').html('pageY:' + e.pageY + 'pageX' + e.pageX);
      
    }, function() {
        $('#largeImage').remove();
        });
        
    $('a').mousemove(function(e){
        $('#largeImage').css('top', e.pageY + offsetY).css('left', e.pageX + offsetX);    
    });
 });