マウスオーバー、アウト時の背景画像の変更

締切済

質問者：ruru_gold
質問日時：2008/07/04 18:35
回答数：2件

こんにちは。
どうしても上手く行かないので教えてください。

マウスオーバー時とクリック時に背景画像を変更したいので、下記のように書いてみました。
初め、８つあるメニューのどこかが必ず、他のメニューとは違う背景画像になっていて（クリックしたときと同じ背景画像）、それはランダムで決まっていません。
たとえばデフォルトの画像が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>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.2

回答者： auty
回答日時：2008/07/04 21:16

・　意図が掴めてないかも知れませんが、

＞＞＞　初め、８つあるメニューのどこかが必ず、他のメニューとは違う背景画像になっていて

これをするだけなら、
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">

</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>

- 0
- 件

通報する

この回答へのお礼

ご回答ありがとうございます。
お礼が遅くなり申し訳ありません。

説明が下手で申し訳ありません。ランダムという言葉がいけなかったです。
記載したHTMLは、3分割（上・右・左）したフレームの、上のフレームになり、左フレームのリンクをクリックすると、それに該当する上メニューの色を変えたいのです。

私が書いたものだと、上フレームをクリックしている分にはいいのですが、左フレームリンクから上メニューをimg2に変えたあと（そこまではgetElementByIdでできています）、マウスオーバーすると、変わったimg2がimg1に戻ってしまうのです。他をクリックするまではimg2をキープしたいのです。

できれば教えていただいたような、今のJavaScriptをあまり変更せずにできるとうれしいです。
ご教授お願いいたします。

通報する

お礼日時：2008/07/07 12:30

No.1

回答者： yambejp
回答日時：2008/07/04 19:19

まずメニューを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">


<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;
}
}

- 0
- 件

通報する

この回答へのお礼

ご回答ありがとうございます。
遅くなって申し訳ありません。

divとidはどちらも設定済みでした！
教えていただいたとおりで、希望していたように動くのですが、
実はこのほかにも関連するファイルがいくつかありまして、それと一緒だとどうしても上手くいきません。
他に設定しているJavaScriptやCSSのせいかもしれないです・・・。

上記で記載したHTMLは、3分割した（上・右・左）フレームの、上の部分なんです。以前yambejpさんに教えていただいたgetElementByIdも踏まえて作りたいので、もともとのJavaScriptをあまり壊さずにというのは難しいでしょうか・・・。

通報する

お礼日時：2008/07/07 12:18

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！