JavaScriptでnav設定 

JavaScriptでnav設定

nav練習

<<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>nav:JavaScript</title>
<style type="text/css">
<!--
nav{
	width=800px;
}
ul{
	list-style-type: none;
}
li{
	display: inline;
	float: left;
}
li a{
	width: 160px;
	display: block;
	text-decoration: none;
}
-->
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#"><img src="images/a.jpg" width="160" height="50" alt="" onMouseOver="this.src='images/a_o.jpg'" onMouseOut="this.src='images/a.jpg'"></a></li>
<li><a href="#"><img src="images/b.jpg" width="160" height="50" alt="" onMouseOver="this.src='images/b_o.jpg'" onMouseOut="this.src='images/b.jpg'"></a></li>
<li><a href="#"><img src="images/c.jpg" width="160" height="50" alt="" onMouseOver="this.src='images/c_o.jpg'" onMouseOut="this.src='images/c.jpg'"></a></li>
<li><a href="#"><img src="images/d.jpg" width="160" height="50" alt="" onMouseOver="this.src='images/d_o.jpg'" onMouseOut="this.src='images/d.jpg'"></a></li>
<li><a href="#"><img src="images/e.jpg" width="160" height="50" alt="" onMouseOver="this.src='images/e_o.jpg'" onMouseOut="this.src='images/e.jpg'"></a></li>
</ul>
</nav>
</body>
</html>

他にも『ビヘイビア-』や『rollover.js』の方法があった中で、この方法が一番ミスが少なくできそう。規則性を覚えれば活用できるなあ。
それにしてもDreamweverはコードヒントがでてくるので入力しやすい。このソフトに頼っていると単語や入力規則を忘れそう。このソフトを使う際はできるだけ自力で入力するよう心がけて、忘れないようにしなければ。。