<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>마우스 오버시 이미지 보여주기</title>
<script src="http://ifull.co.kr/js/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#product img').mouseover(function () {
$("#showImage").show();
var imgSrc = "";
imgSrc = $(this).attr("Bigname"); // Bigname 이미지 얻기
imgSrc = "<img src='"+imgSrc+"' />";
$("#showImage").html(imgSrc); // 출력
});
// 마우스 오버시 레이어 숨기기
$('#product img').mouseout(function() {
var org_imgSrc = "";
org_imgSrc = $(this).attr("Oriname"); // Oriname 이미지 얻기
org_imgSrc = "<img src='"+org_imgSrc+"' />";
$("#showImage").html(org_imgSrc);
});
});
</script>
</head>
<div id="showImage" style="border:1px solid red;width:400px;height:400px;"></div>
<BR>
<div id="product">
<img src="http://ifull.co.kr/std/img/1.gif" Bigname="http://ifull.co.kr/std/img/5.gif" Oriname="http://ifull.co.kr/std/img/0.gif" />
<img src="http://ifull.co.kr/std/img/2.gif" Bigname="http://ifull.co.kr/std/img/6.gif" Oriname="http://ifull.co.kr/std/img/0.gif" />
<img src="http://ifull.co.kr/std/img/3.gif" Bigname="http://ifull.co.kr/std/img/7.gif" Oriname="http://ifull.co.kr/std/img/0.gif" />
</div>