본문 바로가기

정보

[HTML] 작은 이미지 마우스 오버하면 큰 이미지 보여주기


하나씩 배우면서 기록하자~

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<!--스크립트 출처 : http://bit.ly/g88x4f)! -->
<script language="javascript">
function cHange_iMage_vIew(thumbName)
{
document.getElementById("rEsult_iMage").innerHTML = "<img src=\"./"+thumbName+"\" width=\"300\" height=\"300\" alt=\""+thumbName+"\">";
}
</script>
</HEAD>


<div a href="#" onMouseover="cHange_iMage_vIew('1b.gif')">
    <img src="1s.gif" width="100" height="100" border="0">
        </a> 1b 큰 이미지, 1s 작은 이미지</div>
<div a href="#" onMouseover="cHange_iMage_vIew('2b.gif')">
    <img src="2s.gif" width="100" height="100" border="0">
        </a> 2b 큰 이미지, 2s 작은 이미지</div>
<div a href="#" onMouseover="cHange_iMage_vIew('3b.gif')">
    <img src="3s.gif" width="100" height="100" border="0">
           </a> 3b 큰 이미지, 3s 작은 이미지</div> <br/>
       
<div id="rEsult_iMage"> </div>
       



<body>
</body>
</html>