Javascriptでボタン作成＠11月7日

Java SCript

テストはボタン作成。先生のサイトを良く見ずに、ボタンを10個も作って切り抜くという、遠回りなやり方をしてしまった。いかに効率的に作るか、作業前に考えよう。

簡単なJavascriptのボタン

◎画像は、バラバラに作る
◎「hover」時の画像名には「_o」を使用する。

<!DOCTYPE HTML>
<html>
<head lang="ja">
<meta charset="utf-8">
<title>bottum</title>
<style type="text/css">
<!--
*{
    margin:0;
    padding:0
}
img{
    border:none;
}
nav{
    width:800px;
    height: 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="51" alt="" 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="51" alt="" 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="51" alt="" 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="51" alt="" 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="51" alt="" onMouseOver="this.src='images/05_o.jpg'" onMouseOut="this.src='images/05.jpg'"></a></li>

</ul>
</nav>
</body>
</html>

DreamWeaberでのやり方

ビヘイビアーを利用する。書き込まれるソースが多くて綺麗ではないらしい。使わないようにとの事。上の方が楽だし。

Image Rollover Codeを利用する。

海外サイトで、jsファイルをダウンロードして使うだけ。
全く理解できない内容だったけど、便利だな〜。
（やり方は、トップページに解説付き）
Image Rollover Code