ロールオーバー まとめ

ロールオーバには、javascriptとCSS版がある。

マウスが操作された時、下記の状態を変化させる。
・ノーマル
・マウスオーバー
・マウスダウン

• • • • • • • • • • • • • • • • • • • • • • • • • -

★★マウスオーバーJS版★★

■その1　分かりやすく書いた初心者向けの書き方。

<li><a href="#mokuteki" id="sidenav01" onmouseover="overSN01();" onmousedown="downSN01();" onmouseout="outSN01();"><span>文字列1</span></a></li>

<script type="text/javascript">
	function overSN01(){
		document.getElementById("sidenav01").style.backgroundImage="url('images/sidenav01_o.gif')";
	}
	function downSN01(){
		document.getElementById("sidenav01").style.backgroundImage="url('images/sidenav01_d.gif')";
	}
	function outSN01(){
		document.getElementById("sidenav01").style.backgroundImage="url('images/sidenav01_n.gif')";
	}
</script>

■その2　その１を複数設けた場合の書き方。

<li><a href="#mokuteki" id="sidenav01" onmouseover="chBimg('sidenav01','images/sidenav01_o.gif');" onmousedown="chBimg('sidenav01','images/sidenav01_d.gif');"  onmouseout="chBimg('sidenav01','images/sidenav01_n.gif');"><span>文字列1</span></a></li>
<script type="text/javascript">
	//区切りの「"」とかぶってしまうので「"」をエスケープシーケンスで「”」に認識させる。
	function chBimg(ID,IMAGE){
		var VALUE ="url(\"" +IMAGE+ "\")";
		document.getElementById(ID).style.backgroundImage=VALUE;
	}
</script>

• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • -

★★マウスオーバーCSS版★★

HTML　Aに画像を配置　A:hover時に画像を非表示にし、
liの背景画像を表示させる。

<ul><li><a href="index.html"><img src="img/home_out.png" width="100" height="90" alt="home"></a></li></ul>

#nav ul li a{
	display: inline-block;
}
#nav ul li a:hover img{
	visibility:hidden;
}
#nav ul {
	list-style-type: none;
	overflow: hidden;
}
#nav ul li {
	float: left;
}

#nav ul li:nth-of-type(1) {
	background: url("../img/about_img.png") no-repeat;
}

※コツは、a要素を『inline-block;』にしないと
ロールオーバー時に画面にちらつき画発生するので注意。