WebTecNote

[JS]ロールオーバースクリプト(画像名のOn/Offで判別)

前の記事はオーバーの画像だけonを追加するものだったが、
この記事ではオーバーの画像にON、アウトの画像にOFFをつけて、ONとOFFの部分だけで判別する。

ページ内の画像でoffが付いてるもの全てロールオーバーさせる、ということも可能。

<div id="menu">
<ul>
<li><a href="index.html"><img src="images/menu/01_off.png" /></a></li>
<li><a href="menu2.html"><img src="images/menu/02_off.png" /></a></li>
<li><a href="menu3.html"><img src="images/menu/03_off.png" /></a></li>
</ul>
</div>

マウスオーバーするとこうなる▼

<li><a href="index.html"><img src="images/menu/01_on.png" /></a></li>

window.onload = function() {
if(document.getElementById(“single”)){
var myMenu = document.getElementById(“menu”).getElementsByTagName(“a”);
var Over = “_on”;
var Off = “_off”;
var HrefList = new Array();
for (var i = 0; i

モバイルバージョンを終了