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;
}
どうでしょう。とりあえず、できました。うひほほ。ちょっとずつ楽しくなってきた見習ですぅ。
2011年12月24日1:45 AM| カテゴリー: Java ScriptとJ Query,見習い奮闘記| コメント (0)