20200629 おさらいナビゲーションの奮闘④ onmouseover="this.src='img/画像ファイル'"
JSを使用してオンマウスボタンを切り替える方法
今回はCSSの出番はリストのリセットと背景色の設定等で切り替えに携わる入力は無し。
HTML側のimgタグにonmouseoverとonmouseoutの打ち込みがメインになる。
<body>
<div class="box nav">
<div class="inner">
<ul>
<li class="menu1">
<a href="menu1.html">
<img src="img/s_btn01.gif" alt="メニュー１" onmouseover="this.src='img/s_btn01_on.gif'"
onmouseout="this.src='img/s_btn01.gif'" />
</a>
alt属性のあとに
onmouseover="this.src='画像のフォルダ名/ファイル名'"
onmouseout="this.src='画像のフォルダ名/ファイル名'" /←’と/を忘れがち
CSSにおける実装の手間が省けて多少楽にはなるかも？
言葉：ロールオーバー：要素上にマウスポインタが乗った時に色や画像等が切り替わる表現。切り替え動作そのものを指す。
