マウスオーバー、アウト時の背景画像の変更
こんにちは。
どうしても上手く行かないので教えてください。
マウスオーバー時とクリック時に背景画像を変更したいので、下記のように書いてみました。
初め、8つあるメニューのどこかが必ず、他のメニューとは違う背景画像になっていて(クリックしたときと同じ背景画像)、それはランダムで決まっていません。
たとえばデフォルトの画像がimg1.gif、変更画像がimg2.gifだとして、メニュー1の画像がimg2.gif、その他メニューはimg1.gifで、メニュー2をマウスオーバー(img2.gifに変更)、アウトしても、メニュー1の画像はimg2.gifのままで、メニュー2をクリックして初めて、メニュー1をimg1.gifに変更したいのです。
説明が下手で申し訳ありませんが、どなたかお知恵をお貸しいただけないでしょうか。わかりづらい点ありましたら補足いたします。
よろしくお願いいたします。
■JavaScript
var imgno = 8
var imgflag = new Array()
for(var i = 0 ; i < imgno ; i ++){
imgflag[i] = 0
}
function ResetIMG(m_flag,num){
if(m_flag == 'cl'){
for(var i = 0 ; i < imgno ; i ++){
if(i == num){
imgflag[num] = 1
}else{
imgflag[i] = 0
}
}
}
for(var i = 0 ; i < imgno ; i++){
if(imgflag[i] == 1){
document.getElementById("menu" + (i+1)).style.backgroundImage = "url(img1.gif)"
}else if(imgflag[i] == 0){
document.getElementById("menu" + (i+1)).style.backgroundImage = "url(img2.gif)"
}
}
if(m_flag == 'ov'){
document.getElementById("menu" + (num + 1)).style.backgroundImage = "url(img1.gif)"
}
}
■HTML
<A onclick="ResetIMG('cl',0)" onmouseover="ResetIMG('ov',0)" onmouseout="ResetIMG()" id="menu1">メニュー1</A>
<A onclick="ResetIMG('cl',1)" onmouseover="ResetIMG('ov',1)" onmouseout="ResetIMG()" id="menu2">メニュー2</A>
<A onclick="ResetIMG('cl',2)" onmouseover="ResetIMG('ov',2)" onmouseout="ResetIMG()" id="menu3">メニュー3</A>
<A onclick="ResetIMG('cl',3)" onmouseover="ResetIMG('ov',3)" onmouseout="ResetIMG()" id="menu4">メニュー4</A>
<A onclick="ResetIMG('cl',4)" onmouseover="ResetIMG('ov',4)" onmouseout="ResetIMG()" id="menu5">メニュー5</A>
<A onclick="ResetIMG('cl',5)" onmouseover="ResetIMG('ov',5)" onmouseout="ResetIMG()" id="menu6">メニュー6</A>
<A onclick="ResetIMG('cl',6)" onmouseover="ResetIMG('ov',6)" onmouseout="ResetIMG()" id="menu7">メニュー7</A>
<A onclick="ResetIMG('cl',7)" onmouseover="ResetIMG('ov',7)" onmouseout="ResetIMG()" id="menu8">メニュー8</A>
お礼
再びお答えありがとうございます。 色々試してる過程でそれも考えました。 実際やってみると、別ページに飛ぶ瞬間白くフラッシュするのが、 少し気にかかりますが、他に方法がなさそうですね。