Java Scriptでナビボタンをマウスオーバー

CSSでナビボタンをコントロールできます。hoverとか使えば、マウスオーバーも表現できます。これってJava Scriptでもできるんですね。って、Fire Worksでボタン作成して、マウスオーバー表現すると、それをHTMLに書き出してくれる機能を使うと、Java Scriptで書き出します。

「Java Scriptでやるのはできるだけよしたほうがよい」とか聞いことがあって、それにCSSでできるしぃ~と思ってました。でも、時代はHTML5。Java Scriptが重要になってくるとかいうと、話は違う?ってことになります。それにCSSだと、マウスを押した瞬間の表現ができません。

Java Scriptだと、マウスを乗せた瞬間(CSSでHoverで表現したときと同じ)だけでなく、マウス押したときの表現も可能です。

ということで、Java Scriptでナビボタンをマウスオーバーにトライですぅ。

XHTML

<ul>
<li><a href="#"><img src="img/navbtn01.gif" width="100" height="50" alt="" onmouseover="this.src='img/navbtn02.gif'" onmouseout="this.src='img/navbtn01.gif'" onmousedown="this.src='img/navbtn04.gif'"/></a></li>
<li><a href="#"><img src="img/navbtn01.gif" width="100" height="50" alt="" onmouseover="this.src='img/navbtn02.gif'" onmouseout="this.src='img/navbtn01.gif'" onmousedown="this.src='img/navbtn04.gif'"/></a></li>
<li><a href="#"><img src="img/navbtn01.gif" width="100" height="50" alt="" onmouseover="this.src='img/navbtn02.gif'" onmouseout="this.src='img/navbtn01.gif'" onmousedown="this.src='img/navbtn04.gif'"/></a></li>
<li><a href="#"><img src="img/navbtn01.gif" width="100" height="50" alt="" onmouseover="this.src='img/navbtn02.gif'" onmouseout="this.src='img/navbtn01.gif'" onmousedown="this.src='img/navbtn04.gif'"/></a></li>
</ul>

CSS

*{
padding:0;
margin:0;
}
ul{
width:400px;
margin:auto;
list-style-type:none;
}
li {
float:left;
}
img {
border:none;
}

▼サンプルはこちら

どうでしょう。とりあえず、できました。うひほほ。ちょっとずつ楽しくなってきた見習ですぅ。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


コメントフィード

トラックバックURL: https://pc.beginners-luck.net/pcwp/2011/12/24/java-script-onmouse-over01.html/trackback