サムネイルのギャラリー化

授業まとめ javascript 


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
body{
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	background-color:#fff;
}

*{
	margin:0;
	padding:0;
}

h1{
	width:940px;
	line-height:2.0em;
	text-align:center;
}

img{
	border:none;
	margin:0 auto;  
}

#container{
	width:940px;
	background-color:#fff;
	color:#000;
	margin:10px auto;
	padding-bottom:20px;
}

#tumb{
	width:930px;
	background-color:#fff;
	margin:0 auto;
	padding-left:5px;
}

#photo_area{
	text-align:center;
	width:908px;
	height:605px;
	margin:0 auto;
	background-image:url(images/photo_bg.jpg);
	background-repeat:no-repeat;
}

</style>
<title>とある部屋から２</title>
<script type="text/javascript">
function over(obj,num){
	obj.style.cursor="pointer";
	//alert(num+":"+"images/pic0"+num+"_b.jpg");
	document.getElementById("photo").setAttribute("src","images/pic0"+num+"_b.jpg");
}

function out(obj,num){
	obj.style.cursor="default";
	document.getElementById("photo").setAttribute("src","");
}
</script>

</head>

<body>
<div id="container">
	<h1>とある部屋から２</h1>
  <div id="tumb">
  	<img src="images/pic01_t.jpg" class="thumbImg" onMouseOver="over(this,1)" onMouseOut="out(this,1)">
  	<img src="images/pic02_t.jpg" class="thumbImg" onMouseOver="over(this,2)" onMouseOut="out(this,2)">
  	<img src="images/pic03_t.jpg" class="thumbImg" onMouseOver="over(this,3)" onMouseOut="out(this,3)">
  	<img src="images/pic04_t.jpg" class="thumbImg" onMouseOver="over(this,4)" onMouseOut="out(this,4)">
  	<img src="images/pic05_t.jpg" class="thumbImg" onMouseOver="over(this,5)" onMouseOut="out(this,5)">
  </div>
	<div id="photo_area">
  	<img src="" name="photo" id="photo" />
  </div>
</div>



</body>
</html>