- 締切済み
マウスオーバー、アウト時の背景画像の変更
こんにちは。 どうしても上手く行かないので教えてください。 マウスオーバー時とクリック時に背景画像を変更したいので、下記のように書いてみました。 初め、８つあるメニューのどこかが必ず、他のメニューとは違う背景画像になっていて（クリックしたときと同じ背景画像）、それはランダムで決まっていません。 たとえばデフォルトの画像が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">メニュー１</A> <A onclick="ResetIMG('cl',1)" onmouseover="ResetIMG('ov',1)" onmouseout="ResetIMG()" id="menu2">メニュー２</A> <A onclick="ResetIMG('cl',2)" onmouseover="ResetIMG('ov',2)" onmouseout="ResetIMG()" id="menu3">メニュー３</A> <A onclick="ResetIMG('cl',3)" onmouseover="ResetIMG('ov',3)" onmouseout="ResetIMG()" id="menu4">メニュー４</A> <A onclick="ResetIMG('cl',4)" onmouseover="ResetIMG('ov',4)" onmouseout="ResetIMG()" id="menu5">メニュー５</A> <A onclick="ResetIMG('cl',5)" onmouseover="ResetIMG('ov',5)" onmouseout="ResetIMG()" id="menu6">メニュー６</A> <A onclick="ResetIMG('cl',6)" onmouseover="ResetIMG('ov',6)" onmouseout="ResetIMG()" id="menu7">メニュー７</A> <A onclick="ResetIMG('cl',7)" onmouseover="ResetIMG('ov',7)" onmouseout="ResetIMG()" id="menu8">メニュー８</A>
- ruru_gold
- お礼率65% (44/67)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- auty
- ベストアンサー率58% (284/486)
・ 意図が掴めてないかも知れませんが、 ＞＞＞ 初め、８つあるメニューのどこかが必ず、他のメニューとは違う背景画像になっていて これをするだけなら、 for(var i = 0 ; i < imgno ; i ++){ imgflag[i] = 0 } を var selNo = Math.floor(imgno*Math.random()); for (var i = 0; i < imgno; i++) { imgflag[i] = (i==selNo) ? 1 : 0; } window.onload = ResetIMG; とするだけでよいでしょう。 ・ 以下は、yambejp様を参考に作って見ました。 ------------------------------------------------------------ <html> <head> <style> #menu a { background-Image: url(img1.gif); } #menu a:hover{ background-Image: url(img2.gif); } </style> <script type="text/javascript"> <!-- var selObj; window.onload = function () { var menuItems = document.getElementById("menu").getElementsByTagName("A"); var selNo = Math.floor(menuItems.length * Math.random()); for (var i = 0; i < menuItems.length; i++) { menuItems[i].onclick = clickfunc; if (i == selNo) { selObj = menuItems[i]; selObj.style.backgroundImage = "url(img2.gif)"; } } }; function clickfunc() { selObj.style.backgroundImage = "url(img1.gif)"; selObj = this; selObj.style.backgroundImage = "url(img2.gif)"; } //--> </script> </head> <body> <div id="menu"> <a href="#">メニュー１</a> <a href="#">メニュー２</a> <a href="#">メニュー３</a> <a href="#">メニュー４</a> <a href="#">メニュー５</a> <a href="#">メニュー６</a> <a href="#">メニュー７</a> <a href="#">メニュー８</a> </div> <div></div> </body> </html>
- yambejp
- ベストアンサー率51% (3827/7415)
まずメニューをdivでくくり、idを振る・・・これでだいぶ変わってきます。 さらにmouseoverとmouseoutはcssにかえる onclickはスタイルをいじるのではなくclassを置き換えるようにする そうじてこんな感じ・・・ //hoge.htm <script type="text/javascript" src="hoge.js"></script> <link rel="stylesheet" type="text/css" href="hoge.css"> <!--とりあえず6番をえらんでおく--> <div id="menu"> <A href="#">メニュー１</A> <A href="#">メニュー２</A> <A href="#">メニュー３</A> <A href="#">メニュー４</A> <A href="#">メニュー５</A> <A href="#" class="selected">メニュー６</A> <A href="#">メニュー７</A> <A href="#">メニュー８</A> </div> //hoge.css #menu a{ background-Image:url(img1.gif); } #menu a:hover,#menu a.selected{ background-Image:url(img2.gif); } //hoge.js window.onload=function(){ var tags=document.getElementsByTagName("a"); for(var i=0;i<tags.length;i++){ if(tags[i].parentNode.id=="menu"){ tags[i].onclick=clickfunc; } } } function clickfunc(){ var n=this.parentNode.firstChild; while(n){ if(n.nodeName=="A" && n.className!=""){ n.className=""; } if(this==n) n.className="selected"; n=n.nextSibling; } }
お礼
ご回答ありがとうございます。 遅くなって申し訳ありません。 divとidはどちらも設定済みでした！ 教えていただいたとおりで、希望していたように動くのですが、 実はこのほかにも関連するファイルがいくつかありまして、それと一緒だとどうしても上手くいきません。 他に設定しているJavaScriptやCSSのせいかもしれないです・・・。 上記で記載したHTMLは、3分割した（上・右・左）フレームの、上の部分なんです。以前yambejpさんに教えていただいたgetElementByIdも踏まえて作りたいので、もともとのJavaScriptをあまり壊さずにというのは難しいでしょうか・・・。
お礼
ご回答ありがとうございます。 お礼が遅くなり申し訳ありません。 説明が下手で申し訳ありません。ランダムという言葉がいけなかったです。 記載したHTMLは、3分割（上・右・左）したフレームの、上のフレームになり、左フレームのリンクをクリックすると、それに該当する上メニューの色を変えたいのです。 私が書いたものだと、上フレームをクリックしている分にはいいのですが、左フレームリンクから上メニューをimg2に変えたあと（そこまではgetElementByIdでできています）、マウスオーバーすると、変わったimg2がimg1に戻ってしまうのです。他をクリックするまではimg2をキープしたいのです。 できれば教えていただいたような、今のJavaScriptをあまり変更せずにできるとうれしいです。 ご教授お願いいたします。