Home > Javascript > [js]ロールオーバー＋見てるページのメニュー画像変更

[js]ロールオーバー＋見てるページのメニュー画像変更

2008-05-15 (木) 16:40
Javascript
Javascript | rollover

メニュー画像をロールオーバーさせつつカレントページはon状態にするスクリプト。

見てるページのメニュースタイルを変更すると
ロールオーバースクリプト（画像名のOn/Offで判別）を足したソースです。
プリロードはついてません。

iframe対応のブラウザでご覧ください

PLAIN TEXT

JavaScript:

window.onload = function() {
if(document.getElementById("menu")){
var myMenu = document.getElementById("menu").getElementsByTagName("a");
var Over = "_on";
var Off = "_off";
var HrefList = new Array();
var myHref = document.location.href;
var myUrl = FilePass(myHref);
for (var i = 0; i <myMenu.length; i++) {
var HrefValue = myMenu[i].getAttributeNode("href").value;
var myHref = FilePass(HrefValue);
if(myHref == myUrl){
myMenu[i].firstChild.src = myMenu[i].firstChild.src.replace(Off,Over);
myMenu[i].onmouseover =function() {
return false;
}
}else{
myMenu[i].onmouseover =function() {
this.firstChild.src = this.firstChild.src.replace(Off,Over);
}
myMenu[i].onmouseout =function() {
this.firstChild.src = this.firstChild.src.replace(Over,Off);
}
}
}
}
}
function FilePass(str){
var FilePass = str.substring(str.lastIndexOf("/")+1,str.length);
return FilePass;
}

Tags:
Javascript , rollover

Comments:3

Luna 10-02-16 (火) 5:35

ロールオーバーしたい箇所をidではなくclassで判別するにはどうすればいいでしょうか？
単純にgetElementByIdをgetElementsByClassNameに置き換えてみたのですが、それだけでは動作しませんでした…。
お忙しいとは思いますが、お時間ある時にご教示お願い致します。

Tenderfeel 10-02-16 (火) 14:03

Luna さん＞

未検証ですが、ループ増やせばいけるんじゃないかと思います。


if(document.getElementsByClassName("menu")){

var menuWrap = document.getElementsByClassName("menu");

for(i=0; i < menuWrap.length; i++){
    var myMenu = menuWrap[i].getElementsByTagName("a");
    //以下同じ
}

}

Luna 10-02-16 (火) 17:47

その通りにやってみたところ動作してくれました。
どうもありがとうございます。

Trackbacks:1

Trackback URL for this entry: http://tenderfeel.xsrv.jp/javascript/193/trackback/
Listed below are links to weblogs that reference: [js]ロールオーバー＋見てるページのメニュー画像変更 from WebTecNote