11/9 JavaScript:画像置換

JavaScript

ボタンで背景色を変える

表示内容を置換する

onmouseover="this.src='images/◎◎.jpg'"
onmouseout="this.src='images/◎◎.jpg'"

20111110014454

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Pictures of trees</title>
<style type="text/css">
<!--
* {
	margin: 0;
	padding: 0;
}

body {
	background-color: #000;
	font-family:
	"ヒラギノ角ゴ Pro W3", 
	"Hiragino Kaku Gothic Pro",
	 "メイリオ", 
	 Meiryo, Osaka, 
	 "ＭＳ Ｐゴシック",
	  "MS PGothic",
	   sans-serif;
	
	background-image: url(images/b.png);
	background-repeat:repeat;   
	   
}

#container {
	width: 680px;
	height: auto;
	margin: 0 auto;
	text-align: center;
	line-height: 1.5;
	background-color: #000;
}

h1 {
	color: #fff;
	font-size: 1.5em;
	padding: 30px 0 10px 0;
}

p {
	color: #fff;
	font-size: 0.875em;
	padding: 0 0 20px 0;
}


p img {
 margin: 0 5px 5px 5px;
}
-->
</style>
</head>

<body>
<div id="container">
<h1>Pictures of trees</h1>
<p>画像上へマウスを移動すると、その画像をカラーで表示できます。</p>

<p><img src="images/01m.jpg" width="300" height="230" alt="" onMouseOver="this.src='images/01.jpg'" onMouseOut="this.src='images/01m.jpg'"><img src="images/02m.jpg" width="300" height="230" alt="" onMouseOver="this.src='images/02.jpg'" onMouseOut="this.src='images/02m.jpg'"><img src="images/03m.jpg" width="300" height="230" alt="" onMouseOver="this.src='images/03.jpg'" onMouseOut="this.src='images/03m.jpg'"><img src="images/04m.jpg" width="300" height="230" alt="" onMouseOver="this.src='images/04.jpg'" onMouseOut="this.src='images/04m.jpg'"><img src="images/05m.jpg" width="300" height="230" alt="" onMouseOver="this.src='images/05.jpg'" onMouseOut="this.src='images/05m.jpg'"><img src="images/06m.jpg" width="300" height="230" alt="" onMouseOver="this.src='images/06.jpg'" onMouseOut="this.src='images/06m.jpg'">
</p>

</div>
</body>
</html>

サムネールで画像置換


20111110020210

<!DOCTYPE HTML>
<html llang="ja">
<head>
<meta charset="UTF-8">
<title>Blue! Blue! Blue!</title>
<style type="text/css">
<!--
* {
	margin: 0;
	padding: 0;
}

body {
	font-family:
	"ヒラギノ角ゴ Pro W3",
	 "Hiragino Kaku Gothic Pro",
	 "メイリオ",
	 Meiryo, Osaka,
	 "ＭＳ Ｐゴシック", 
	 "MS PGothic", 
	 sans-serif
}

h3 {
	color: #03C;
	margin: 0 0 10px 0;
}

p img {
	cursor:pointer;
}

p img {
	border: none;
}


#container {
	width: 600px;
	margin: 30px auto;
	text-align:center;
	border: 2px dotted #666;
}

#content {
	width: 560px;
	margin: 20px 20px 20px 20px;
	
	
}

.main {
	width: 560px;
	background-image: url(images/back.jpg);
	background-repeat:no-repeat;
	padding: 20px 0 0 0;
}
-->
</style>
</head>

<body>
<div id="container">
<div id="content">
<h3>Blue! Blue! Blue!</h3>
<P><img src="images/01s.jpg" width="104" height="84" alt="" onMouseOver="document.bgimg.src='images/01.jpg'">
<img src="images/02s.jpg" width="104" height="84" alt="" onMouseOver="document.bgimg.src='images/02.jpg'">
<img src="images/03s.jpg" width="104" height="84" alt="" onMouseOver="document.bgimg.src='images/03.jpg'">
<img src="images/04s.jpg" width="104" height="84" alt="" onMouseOver="document.bgimg.src='images/04.jpg'">
<img src="images/05s.jpg" width="104" height="84" alt="" onMouseOver="document.bgimg.src='images/05.jpg'"></P>

<p class="main"><img src="images/01.jpg" width="520" height="420" alt="" name="bgimg"></p>
</div>
</div>
</body>
</html>