11/7 JavaScript:画像置換

JavaScript

画像置換

  • ナビゲーションボタンをそれぞれ別々作る。
  • ボタン名は01、02など番号にする。
  • 「hover」時の画像名には「_o」を使用する。

20111107235659

onMouseOver & onMouseOut

書き方は古いが、エラーは起きない。

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

em {
 visibility: hidden;	
}

img {
	border-style: none;
}

nav {
	width: 810px;
	height: 50px;
	margin: 50px 0 0 50px;
}

ul {
	list-style-type: none;
}

li {
	display: inline;
	float: left;
}
-->
</style>
</head>

<body>
<nav>
<ul>
<li><a href="#"><img src="images/01_o.jpg" width="160" height="50" onMouseOver="this.src='images/01.jpg'" onMouseOut="this.src='images/01_o.jpg'"></a></li>
<li><a href="#"><img src="images/02.jpg" width="160" height="50" onMouseOver="this.src='images/02_o.jpg'" onMouseOut="this.src='images/02.jpg'"></a></li>
<li><a href="#"><img src="images/03.jpg" width="160" height="50" onMouseOver="this.src='images/03_o.jpg'"  onMouseOut="this.src='images/03.jpg'"></a></li>
<li><a href="#"><img src="images/04.jpg" width="160" height="50" onMouseOver="this.src='images/04_o.jpg'" onMouseOut="this.src='images/04.jpg'"></a></li>
<li><a href="#"><img src="images/05.jpg" width="160" height="50" onMouseOver="this.src='images/05_o.jpg'" onMouseOut="this.src='images/05.jpg'"></a></li>
</ul>
</nav>
</body>
</html>

ライブラリ[Image Rollover Code]を利用する

  • 「hover」時に「 _o.jpg」画像を表示する。
  • rollover.jsファイルをjsホルダーに保存する。
  • 下記scriptを書く。

class="imgover"指定する。

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

em {
 visibility: hidden;	
}

img {
	border-style: none;
}

nav {
	width: 810px;
	height: 50px;
	margin: 50px 0 0 50px;
}

ul {
	list-style-type: none;
}

li {
	display: inline;
	float: left;
}
-->
</style>

<script src="js/rollover.js" type="text/javascript"></script>

</head>

<body>
<nav>
<ul>
<li><a href="#"><img src="images/01_o.jpg" width="160" height="50" alt="" class="imgover"></a></li>
<li><a href="#"><img src="images/02.jpg" width="160" height="50" alt="" class="imgover"></a></li>
<li><a href="#"><img src="images/03.jpg" width="160" height="50" alt="" class="imgover"></a></li>
<li><a href="#"><img src="images/04.jpg" width="160" height="50" alt="" class="imgover"></a></li>
<li><a href="#"><img src="images/05.jpg" width="160" height="50" alt="" class="imgover"></a></li>
</ul>
</nav>
</body>
</html>