<html>
<title>:: 상품박스 ::</title>
<head>
<style type="text/css"> .represent { border:1px solid #FF0000; width:460px; overflow:auto; }
ul {
list-style:outside none none;
margin:0;
padding:0;
}
li {
margin:0 0 0 0;
padding:0 0 0 0;
border:0;
float:left;
width:20%;
}
img {
width:100%;
}
</style>
</head>
<script src="http://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript">
function changeRepresentImage(num) {
var link = jQuery(".imgServe").eq(num).attr("src");
jQuery("#imgRepresent").attr("src", link);
}
</script>
<body>
<div class="represent">
<img id="imgRepresent" src="./image/Box_01.png" style="width:460px;height:460px;"/>
<ul>
<li>
<a href="javascript:;" onMouseover="changeRepresentImage('0');">
<img class="imgServe" src="./image/Box_01.png"/>
</a>
</li>
<li>
<a href="javascript:;" onMouseover="changeRepresentImage('1');">
<img class="imgServe" src="./image/Box_02.png"/>
</a>
</li>
<li>
<a href="javascript:;" onMouseover="changeRepresentImage('2');">
<img class="imgServe" src="./image/Box_03.png"/>
</a>
</li>
<li>
<a href="javascript:;" onMouseover="changeRepresentImage('3');">
<img class="imgServe" src="./image/Box_04.png"/>
</a>
</li>
<li>
<a href="javascript:;" onMouseover="changeRepresentImage('4');">
<img class="imgServe" src="./image/Box_05.png"/>
</a>
</li>
</ul>
</div>
</body>
</html>
|
merchandise.zip
