画像置換@11月9日 - WEBデザインを学ぶ

データを持ち帰り損ねたので、途中だった画像置換を作成しました。フレームの白地が狭かったかな。画像がセンターに入ってくれず、微調整しました。

画像置換1

onMouseOver="this.src='images/◎◎.jpg'"
onMouseOut="this.src='images/◎◎.jpg'"

  <!DOCTYPE HTML>
<html lang="ja">
<head>
<meta  charset="utf-8">
<title>画像置換1</title>
<style type="text/css">
<!--
*{
	margin:0;
	padding: 0;
}
body {
	background-color: #000;
	text-align: center;
}
#container {
		 width:630px;
		height: auto;
		margin:20px auto;
}
img {
	 border:none;
}
h1 {
	 font-size: 1.3em;
	 margin:10px;
	 color: #fff;
	 }
p {
	font-size:0.9em;
	color: #fff;
	margin: 5px 0 ;
}
p img {
	margin: 0 10px 5px 0 ;
}
-->
</style>
</head>
<body>
<div id="container">
<h1>田舎の小さな家</h1>
<p>◎画面上へマウスを移動すると。その画像をカラーで表示できます。</p>
<p>
<img src="images/mono01.jpg" width="300" height="250" alt=""
onMouseOver="this.src='images/01.jpg'" onMouseout="this.src='images/mono01.jpg'"><img src="images/mono02.jpg" width="300" height="250" alt=""onMouseOver="this.src='images/02.jpg'" onMouseOut="this.src='images/mono02.jpg'">
<img src="images/mono04.jpg" width="300" height="250" alt=""onMouseOver="this.src='images/04.jpg'" onMouseOut="this.src='images/mono04.jpg'"><img src="images/mono03.jpg" width="300" height="250" alt=""onMouseOver="this.src='images/03.jpg'" onMouseOut="this.src='images/mono03.jpg'">
<img src="images/mono06.jpg" width="300" height="250" alt=""onMouseOver="this.src='images/06.jpg'" onMouseOut="this.src='images/mono06.jpg'"><img src="images/mono05.jpg" width="300" height="250" alt=""onMouseOver="this.src='images/05.jpg'" onMouseOut="this.src='images/mono05.jpg'">
</p>
</div>
</p>
<script type="text/javascript">
var Accordion1 = new Spry.Widget.Accordion("Accordion1");
</script>
</body>
</html>

画像置換2

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>画像置換え2</title>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}

body {
	background-color:#fff;
	text-align: center;
	margin: 0 auto;
}
img {
	border:none;
}
#cotaniner {
	width:630px;
	height: auto;
	text-align: center;
}
h1 {
	font-size: 1.4em;
	color:#69F;
	margin: 20px 0 0 0;
}
p.main{
	background: url(images/back.jpg) no-repeat #fff;
  background-positon: center center;
	width:630px;
	height:530px;
	margin: 0 auto;
}
p.main img {
	margin: 15px 17px 15px 13px;
}
p.sabu {
	margin: 15px 0 10px 10px;
}
p.sabu img {
	margin: 0 10px 0 0;
}
</style>
</head>
<body>
<div id="container">
<h1>空のある風景</h1>
<p class="sabu"><img src="images/s01.jpg" width="112" height="93" alt=""
onMouseOver="document.mainimg.src='images/01.jpg'"><img src="images/s02.jpg" width="112" height="93" alt=""
onMouseOver="document.mainimg.src='images/02.jpg'">
<img src="images/s03.jpg" width="112"
height="93" alt=""  onMouseOver="document.mainimg.src='images/03.jpg'">
<img src="images/s05.jpg" width="112" height="93" alt=""
onMouseOver="document.mainimg.src='images/05.jpg'"><img src="images/s06.jpg" widht="112" height="93" ait=""
onMouseOver="document.mainimg.src='images/06.jpg'">
</p>
<p class="main">
<img src="images/01.jpg" width="600" height="500" alt="" name="mainimg"></p>
</div>
</body>
</html>

◎メイン画像を上にする場合は、HTMLを入れ替える。

背景色の変換

document.bgColor

<body>
<p>以下のように表示しなさい。</p>
<h1>背景色の変更</h1>
<p>※以下のボタンをクリックすると、ホームページの背景色を変更できます赤色</p>
<button onClick="document.bgColor='#ff69b4'">ピンク</button>
<button onClick="document.bgColor='#1E90FF'">青色</button>
<button onClick="document.bgColor='#ff4500'">オレンジ</button>
<button onClick="document.bgColor='#000'">黒色</button>
<button onClick="document.bgColor='#fff'">白色</button>
</body>
</html>