소스
<!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>
<title></title>
<meta name="generator" content="editplus" />
<meta name="author" content="김종현" />
<style type="text/css">
#div {text-align:center;}
#bigDiv {
width:500px; height:500px;
border:2px solid black;
margin:0px auto;
background-color:#afafe7;
}
#smallDiv {
width:400px; height:70px;
border:1px solid black;
margin:5px auto;
}
.small {
width:65px
}
#big {
width:300px;
margin-top:70px;
}
</style>
<script type="text/javascript">
function Show(file) {
document.getElementById("big").src = "images/" + file;
//images/cry.png 큰이미지
}
function ShowBig() {
document.getElementById("big").style.visibility = "visible";
}
function HideBig() {
document.getElementById("big").style.visibility = "hidden";
}
</script>
</head>
<body>
<!--Ex12.htm-->
<div id="div">
<div id="bigDiv">
<img id="big" src="./images/adore.png" />
</div>
<div id="smallDiv">
<img class="small" src="./images/adore.png" onmouseover="Show('adore.png');" />
<img class="small" src="./images/after_boom.png" onmouseover="Show('after_boom.png');" />
<img class="small" src="./images/angry.png" onmouseover="Show('angry.png');" />
<img class="small" src="./images/cool.png" onmouseover="Show('cool.png');" />
<img class="small" src="./images/cry.png" onmouseover="Show('cry.png');" />
</div>
<div>
<input type="button" id="" value="보이기" onclick="ShowBig();" />
<input type="button" id="" value="감추기" onclick="HideBig();" />
</div>
</div>
</body>
</html>
결과
