Webサイトのナビ制作におけるJavascriptを用いたロールオーバー（画像置換）

HTML Javascript

本日より8月。
ということで、ブログのデザインを変えてみました。

久々に丁寧な言葉遣いになっていますが、
ついに待ちに待ったJavascriptの授業が本格的に始まったということで、
真面目に真剣に日々精進していこうと思います。

授業の話に戻って、Javascriptに関しては、基礎の部分は既に何度か授業で習いましたが、本日からは実践編ということで、まずはこれまでにCSSでの作り方を主としてきたWebサイトにおけるナビ部のロールオーバー（ホバー時の画像置換）の書き方からスタートです。

ナビを作るにあたって、これまでのCSSでの作り方では、デフォルト時とホバー時とを上下においたものを1枚の画像として作成して、CSSで背景画像の位置を調整（指定）するというやり方を多く使ってきましたが、Javascriptを用いる場合は、それぞれ別々にした２枚を作成します。

そしてCSSの時は、backgroundとして画像を指定していましたが、Javascriptの場合は、HTMLにimgタグを記述して、imgタグの中に指定を書きます。

<img src="img/01_1.jpg" width="100" height="50" alt="ホーム" onMouseOver="this.src='img/01_2.jpg'" onMouseOut="this.src='img/01_1.jpg'">

たったこれだけでホバー時の画像置換が設定できます。
「onMouseOver」にはホバー時の画像を指定し、「onMouseOut」にはマウスがボタン上からいなくなった際にデフォルト時に戻すための画像を指定します。

以下、横並びナビの簡単なコードサンプルです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Javascript画像置換練習</title>
<style>
body, div, ul, li, a, img {
  margin: 0;
  padding: 0;		
}
body {
  background:#CCCCCC;		
}
#nav {
  width: 800px;
  height: 50px;
  margin: 50px;
}

ul {
  list-style: none;	
}
li {
  float: left;		
}
a {
  text-decoration: none;		
}
img {
  border: none;
  vertical-align: bottom;		
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href=""><img src="img/01_1.jpg" width="160" height="50" alt="ホーム" onMouseOver="this.src='img/01_2.jpg'" onMouseOut="this.src='img/01_1.jpg'"></a></li>
<li><a href=""><img src="img/02_1.jpg" width="160" height="50" alt="フード" onMouseOver="this.src='img/02_2.jpg'" onMouseOut="this.src='img/02_1.jpg'"></a></li>
<li><a href=""><img src="img/03_1.jpg" width="160" height="50" alt="ドリンク" onMouseOver="this.src='img/03_2.jpg'" onMouseOut="this.src='img/03_1.jpg'"></a></li>
<li><a href=""><img src="img/04_1.jpg" width="160" height="50" alt="インフォ" onMouseOver="this.src='img/04_2.jpg'" onMouseOut="this.src='img/04_1.jpg'"></a></li>
<li><a href=""><img src="img/05_1.jpg" width="160" height="50" alt="コンタクト" onMouseOver="this.src='img/05_2.jpg'" onMouseOut="this.src='img/05_1.jpg'"></a></li>
</ul>
</div>
</body>
</html>