お世話になります。
ご質問ですが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";
上記のような感じなのですが外部シートにするには
どうすれば宜しくお願いいたします。
お手数掛けますがお願いいたします。
投稿日時 - 2008-09-14 01:57:06
0人が「このQ&Aが役に立った」と投票しています
回答（1件中 1～1件目)
たとえば、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;
}
投稿日時 - 2008-09-14 13:43:00
お礼
ありがとうございます。
非常にシンプルですね。
早速試しています。
ありがとうございます。
御礼申し上げます。
投稿日時 - 2008-09-15 17:09:06
