<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">


<style type="text/css">
div,ul,li {margin:0;padding:0;}
#prd-b {float:left;width:150px;margin-right:10px;}
#prd-b img {width:100px;height:100px;}
#prd-s {float:left;list-style-type:none;width:120px;}
#prd-s li {float:left;position:relative;font:12px Dotum;text-align:center;width:100px;height:20px;line-height:20px;}
#prd-s li img {position:absolute;left:-10000px;}
</style>

</head>

<body>


<ul id="prd-s">
<?
for($i=0; $i < 4; $i++) {
?>
 <li>숫자 <?=$i?><img src=".gif">http://ifull.co.kr/test/img/<?=$i?>.gif" alt=""></li>
<?
}
?>
</ul>
<div id="prd-b"><img src="http://ifull.co.kr/test/img/9.gif" alt=""></div>
<script type="text/javascript">
<!--
 var prdList = document.getElementById("prd-s").getElementsByTagName("li");
 for (i=0; i<prdList.length; i++) {
  prdList[i].onmouseover = function() {
 var imgn = this.getElementsByTagName("img")[0].src;
   document.getElementById("prd-b").firstChild.src = imgn;
  }
 }
//-->
</script>

</body>
</html>

 

이 게시물을