画像置換

授業

ナビゲーションボタンの表示の仕方

*今回はCSS Sprite以外の方法を実践
＜CSS Sprite＞　メリット：レスポンスが速い　デメリット：IEで表示が崩れる危険がある

・Photoshopでボタンを作成
　上記５種類×２（ホバー分）

１．CSSで表示

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ナビゲーション</title>
<style>
* {
	margin: 0;
	padding: 0;
}
nav {
	width: 800px;
	margin: 50px 0 0 50px ;
}
ul {
	list-style-type: none;
}
li {
	float: left;
	display: inline;
}
li a {
	width: 160px;
	height: 50px;
	display: block;
	text-decoration: none;
}
li#home a {
	background-image: url(img/nav/btn01.jpg);
}
li#home a:hover {
		background-image: url(img/nav/btn01_o.jpg);
}

li#css a {
	background-image: url(img/nav/btn02.jpg);
}
li#css a:hover {
		background-image: url(img/nav/btn02_o.jpg);
}
li#js a {
	background-image: url(img/nav/btn03.jpg);
}
li#js a:hover {
		background-image: url(img/nav/btn03_o.jpg);
}
li#as a {
	background-image: url(img/nav/btn04.jpg);
}
li#as a:hover {
		background-image: url(img/nav/btn04_o.jpg);
}
li#php a {
	background-image: url(img/nav/btn05.jpg);
}
li#php a:hover {
		background-image: url(img/nav/btn05_o.jpg);
}
em {
	visibility: hidden;
}
</style>
</head>
<body>
<nav>
<ul>
<li id="home"><a href="#"><em>Home</em></a></li>
<li id="css"><a href="#"><em>HTML+CSS</em></a></li>
<li id="js"><a href="#"><em>JavaScript</em></a></li>
<li id="as"><a href="#"><em>ActionScript</em></a></li>
<li id="php"><a href="#"><em>PHP</em></a></li>
</ul>
</nav>
</body>
</html>


２．ごく単純なJavaScriptで表示

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ナビゲーション</title>
<style>
* {
	margin: 0;
	padding: 0;
}  
nav {
	width: 800px;
	height: 50px;
	margin: 50px;
}
ul {
	list-style-type: none;
}
li {
	float: left;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#"><img src="img/nav/btn01.jpg" alt="" width="160" height="50" onMouseOver="this.src='img/nav/btn01_o.jpg'"
 onMouseOut="this.src='img/nav/btn01.jpg'"></a></li>
<li><a href="#"><img src="img/nav/btn02.jpg" alt="" width="160" height="50" onMouseOver="this.src='img/nav/btn02_o.jpg'"
 onMouseOut="this.src='img/nav/btn02.jpg'"></a></li>
<li><img src="img/nav/btn03.jpg" alt="" width="160" height="50" onMouseOver="this.src='img/nav/btn03_o.jpg'"
 onMouseOut="this.src='img/nav/btn03.jpg'"><a href="#"></a></li>
<li><a href="#"><img src="img/nav/btn04.jpg" alt="" width="160" height="50" onMouseOver="this.src='img/nav/btn04_o.jpg'" onMouseOut="this.src='img/nav/btn04.jpg'"></a></li>
<li><img src="img/nav/btn05.jpg" akt="" width="160" height="50" onMouseOver="this.src='img/nav/btn05_o.jpg'" onMouseOut="this.src='img/nav/btn05.jpg'"><a href="#"></a></li>
</ul>
</nav>
</body>
</html>


３．ライブラリを利用
Daniel Nolan氏の「rollover.js」ファイルを使用

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ナビゲーション</title>
<style>
* {
	margin: 0;
	padding: 0;
}  
nav {
	width: 800px;
	height: 50px;
	margin: 50px;
}
ul {
	list-style-type: none;
}
li {
	float: left;
}
</style>
<span class="deco" style="color:#FF0000;"><script src="js/rollover.js"></script></span>
</head>
<body>
<nav>
<ul>
<li><a href="#"><img src="img/nav/btn01.jpg" alt="" width="160" height="50"  <span class="deco" style="color:#FF0000;">class="imgover"</span>></a></li>
<li><a href="#"><img src="img/nav/btn02.jpg" alt="" width="160" height="50" <span class="deco" style="color:#FF0000;">class="imgover"</span>></a></li>
<li><a href="#"><img src="img/nav/btn03.jpg" alt="" width="160" height="50" <span class="deco" style="color:#FF0000;">class="imgover"</span>></a></li>
<li><a href="#"><img src="img/nav/btn04.jpg" alt="" width="160" height="50" <span class="deco" style="color:#FF0000;">class="imgover"</span>></a></li>
<li><a href="#"><img src="img/nav/btn05.jpg" akt="" width="160" height="50"<span class="deco" style="color:#FF0000;">class="imgover"</span>></a></li>
</ul>
</nav>
</body>
</html>
おまけ

DreamWeaverのビヘイビアで作成されたファイルに出会ったら。。。
スワップイメージのパネルで操作しましょう。

サムネイルで画像置換

小さい写真にオンマウスで大きなスペースに写真を表示させる。