JavaScriptでnav設定
JavaScriptで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はコードヒントがでてくるので入力しやすい。このソフトに頼っていると単語や入力規則を忘れそう。このソフトを使う際はできるだけ自力で入力するよう心がけて、忘れないようにしなければ。。