<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
</script>
<title>New Web Project</title>
<style type="text/css">
a img {
border: none;
} #largeImage {
position: absolute;
padding: .5em;
background: #e3e3e3;
border: 1px solid;
}
</style>
<script type="text/javascript">
$(function(){
var offsetX = 20;
var offsetY = 10;
$('a').hover(function(e){
//mouse on
var href = $(this).attr('href');
$('<img id="largeImage" src="' + href + '">').css('top', e.pageY + offsetY).css('left', e.pageX + offsetX).appendTo('body');
}, function(){
//mouse off
$('#largeImage').remove();
});
$('a').mousemove(function(e){
$('#largeImage').css('top', e.pageY + offsetY).css('left', e.pageX + offsetX);
})
});
</script>
</head>
<body>
<a href="http://static.naver.com/www/u/2010/0611/nmms_215646753.gif"><img src="http://blogimgs.naver.com/section/h_naver2.gif"></a><a href="http://static.naver.com/www/u/2010/0611/nmms_215646753.gif"><img src="http://blogimgs.naver.com/section/h_naver2.gif"></a>
</body>
</html>
'jquery' 카테고리의 다른 글
| toggle 탭 (0) | 2012.02.17 |
|---|---|
| 배경 어둡게 레이어효과 (0) | 2012.02.17 |
| 한줄 스크롤 - 전광판처럼 기능 (0) | 2012.02.17 |
| 페이지내 이동2 (0) | 2012.02.17 |
| 페이지내 이동1 (0) | 2012.02.17 |