- 締切済み
ロールオーバー 外部シート
お世話になります。 ご質問ですがjavaccriptでロールオーバーメニューを作成したいと思います。 Aの画像からBの画像に入れ替えたいと考えています。 項目は8個ほどです。 img[0] = new Image(); img[1] = new Image(); img[0].src = "menu/pp001_1.gif"; img[1].src = "menu/pp001.gif"; img[2] = new Image(); img[3] = new Image(); img[2].src = "menu/pp002_1.gif"; img[3].src = "menu/pp002.gif"; 上記のような感じなのですが外部シートにするには どうすれば宜しくお願いいたします。 お手数掛けますがお願いいたします。
- nobubon
- お礼率77% (7/9)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- yambejp
- ベストアンサー率51% (3827/7415)
たとえば、idとclassをつかってこんなかんじでどうでしょ？ //hoge.htm <head> <script type="text/javascript" src="hoge.js"></script> </head> <body> <img src="1a.jpg" id="img1" class="rollover"> <img src="2a.jpg" id="img2" class="rollover"> <img src="3a.jpg" id="img3" class="rollover"> <img src="4a.jpg" id="img4" class="rollover"> </body> //hoge.js var objImgs; window.onload=function(){ setImages(); } function setImages(){ objImgs={ img1:{out:createImage("1a.jpg"),over:createImage("1b.jpg")} ,img2:{out:createImage("2a.jpg"),over:createImage("2b.jpg")} ,img3:{out:createImage("3a.jpg"),over:createImage("3b.jpg")} ,img4:{out:createImage("4a.jpg"),over:createImage("4b.jpg")} }; var tags=document.getElementsByTagName("img"); for(var i=0;i<tags.length;i++){ if(tags[i].className=="rollover"){ tags[i].onmouseover=function(){this.src=objImgs[this.id].over.src;} tags[i].onmouseout =function(){this.src=objImgs[this.id].out.src;} } } } function createImage(src){ var img=new Image(); img.src=src; return img; }
お礼
ありがとうございます。 非常にシンプルですね。 早速試しています。 ありがとうございます。 御礼申し上げます。