• 締切済み

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

こんにちは。 どうしても上手く行かないので教えてください。 マウスオーバー時とクリック時に背景画像を変更したいので、下記のように書いてみました。 初め、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>

みんなの回答

  • auty
  • ベストアンサー率58% (284/486)
回答No.2

・ 意図が掴めてないかも知れませんが、 >>> 初め、8つあるメニューのどこかが必ず、他のメニューとは違う背景画像になっていて これをするだけなら、 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="#">メニュー1</a> <a href="#">メニュー2</a> <a href="#">メニュー3</a> <a href="#">メニュー4</a> <a href="#">メニュー5</a> <a href="#">メニュー6</a> <a href="#">メニュー7</a> <a href="#">メニュー8</a> </div> <div></div> </body> </html>

ruru_gold
質問者

お礼

ご回答ありがとうございます。 お礼が遅くなり申し訳ありません。 説明が下手で申し訳ありません。ランダムという言葉がいけなかったです。 記載したHTMLは、3分割(上・右・左)したフレームの、上のフレームになり、左フレームのリンクをクリックすると、それに該当する上メニューの色を変えたいのです。 私が書いたものだと、上フレームをクリックしている分にはいいのですが、左フレームリンクから上メニューをimg2に変えたあと(そこまではgetElementByIdでできています)、マウスオーバーすると、変わったimg2がimg1に戻ってしまうのです。他をクリックするまではimg2をキープしたいのです。 できれば教えていただいたような、今のJavaScriptをあまり変更せずにできるとうれしいです。 ご教授お願いいたします。

  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.1

まずメニューを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="#">メニュー1</A> <A href="#">メニュー2</A> <A href="#">メニュー3</A> <A href="#">メニュー4</A> <A href="#">メニュー5</A> <A href="#" class="selected">メニュー6</A> <A href="#">メニュー7</A> <A href="#">メニュー8</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; } }

ruru_gold
質問者

お礼

ご回答ありがとうございます。 遅くなって申し訳ありません。 divとidはどちらも設定済みでした! 教えていただいたとおりで、希望していたように動くのですが、 実はこのほかにも関連するファイルがいくつかありまして、それと一緒だとどうしても上手くいきません。 他に設定しているJavaScriptやCSSのせいかもしれないです・・・。 上記で記載したHTMLは、3分割した(上・右・左)フレームの、上の部分なんです。以前yambejpさんに教えていただいたgetElementByIdも踏まえて作りたいので、もともとのJavaScriptをあまり壊さずにというのは難しいでしょうか・・・。

関連するQ&A

  • マウスオーバーで画像の切替でタイマーをつけるには?

    <html> <head> <script type="text/JavaScript"> <!-- imglist = ["img1.gif", "img2.gif"]; preImage = new Array(); for (i=0; i<imglist.length; i++) { preImage[i] = new Image(); preImage[i].src = imglist[i]; } //--> </script> </head> <body> <img src="img1.gif" onmouseover="this.src='img2.gif'" onmouseout="this.src='img1.gif'"> </body> </html> 例えば上記のようなソースでimg1の画像にマウスオーバーでimg2に画像が入れ替わるのですが、 マウスアウトした時に、すぐimg1の画像に戻るのではなく、img2の画像を1分くらい出して その後img1に入れ替わるようにしたいのですが、どうしたらよいでしょうか? 教えてください。よろしくお願いいたします。

  • マウスオーバー時に画像切り替え

    JavaScriptで文字(画像)上にマウスポインターをオーバーするともう一つの大きな画像を切り替える、という風にしたくて、以下のようにしました。 <html> <head> <title><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Rosery de la mort PC profile2</title> <style type="text/css"> <!-- HTML { SCROLLBAR-FACE-COLOR: #990000; SCROLLBAR-HIGHLIGHT-COLOR: #993366; SCROLLBAR-SHADOW-COLOR: #660000; SCROLLBAR-3DLIGHT-COLOR: #993366; SCROLLBAR-ARROW-COLOR: #ff0033; SCROLLBAR-TRACK-COLOR: #000000; SCROLLBAR-DARKSHADOW-COLOR: #660000 } BODY { SCROLLBAR-FACE-COLOR: #990000; SCROLLBAR-HIGHLIGHT-COLOR: #993366; SCROLLBAR-SHADOW-COLOR: #660000; SCROLLBAR-3DLIGHT-COLOR: #993366; SCROLLBAR-ARROW-COLOR: #ff0033; SCROLLBAR-TRACK-COLOR: #000000; SCROLLBAR-DARKSHADOW-COLOR: #660000 } --> </style> <script type="text/javascript"> <!-- if (document.images) { // 設定開始(使用する画像を設定してください) // 通常の画像 var img0 = new Image(); img0.src = "image/p1.jpg"; // ポイント時の画像1 var img1 = new Image(); img1.src = "image/p2.jpg"; // ポイント時の画像2 var img2 = new Image(); img2.src = "image/p3.jpg"; // ポイント時の画像3 var img3 = new Image(); img3.src = "image/p4.jpg"; // ポイント時の画像4 var img4 = new Image(); img4.src = "image/p5.jpg"; // ポイント時の画像5 var img5 = new Image(); img5.src = "image/p6.jpg"; // ポイント時の画像6 var img6 = new Image(); img6.src = "image/p7.jpg"; // 設定終了 } // ポイント時の処理 function On(name) { if (document.images) { document.images['def'].src = eval(name + '.src'); } } // 放した時の処理 function Off() { if (document.images) { document.images['def'].src = img0.src; } } // --> </script> </head> <body bgcolor="#000000" text="#ffffff"> <center><img height="75" alt="" src="roseblue-i3.gif" width="72" align="baseline" border="0"><font size="7"><font face="Script" color="#ffffff"><em><strong>&nbsp;Profile &nbsp;<img height="75" alt="" src="roseblue-i5.gif" width="72" align="baseline" border="0"></strong></em></font></font></center> <br><br> <center> <img src="yl2.jpg"> <p><img src="image/p1.jpg" alt="start" name="def"></p> <br><br><br> <p> <onMouseOver="On('img1')" onMouseOut="Off()"><img src="pp1.jpg"> <onMouseOver="On('img2')" onMouseOut="Off()"><img src="pp2.jpg"> <onMouseOver="On('img3')" onMouseOut="Off()"><img src="pp3.jpg"> <onMouseOver="On('img4')" onMouseOut="Off()"><img src="pp4.jpg"> <onMouseOver="On('img5')" onMouseOut="Off()"><img src="pp5.jpg"> <onMouseOver="On('img6')" onMouseOut="Off()"><img src="pp6.jpg"> </p> <br><br> </center> </body> </html> 上のようにしたのですが、アップロードしても、画像が全く表示されません。 因みに参考にしたところはここです。 http://www.tagindex.com/javascript/link/change3.html このサイトでは、リンクのところが文字ですが、私は、リンクなしで文字部分を画像になるようにしました。 画像が表示されないのは、何が問題なのでしょうか? 画像は全てアップロードしました。

  • マウスオーバー

    マウスオーバーの制御で下記のソースなのですが、今まで、こちらを教えてもらってやっていました。 今のままだと、オーバーで画像が変わるだけでマウスが外れると、元の画像に戻ってしまいます。該当ページへジャンプしたときに画像が変わったままにするのにはどうしたらよいのでしょうか。 <script LANGUAGE="JavaScript"> <!-- if (document.images) { //if image object is available img1on = new Image(); // MouseOver Images img1on.src = "image/1.gif"; img2on = new Image(); img2on.src = "image/2.gif"; img1off = new Image(); // MouseOut Images img1off.src = "image/1_1.gif"; img2off = new Image(); img2off.src = "image/2_2.gif"; } function imgOn(imgName) { if (document.images) { document[imgName].src = eval(imgName + "on.src"); }} function imgOff(imgName) { if (document.images) { document[imgName].src = eval(imgName + "off.src"); }} //--> </script> ***HTML***** <a onMouseOver="imgOn('img1')" onMouseOut="imgOff('img1')" TARGET="_self" href="index.htm"> <img NAME="img1" image/1_1.gif" width="130" height="20"></a> <a onMouseOver="imgOn('img2')" onMouseOut="imgOff('img2')" href="next.htm"> <img NAME="img2" SRC="image/2_2.gif" width="130" height="20"></a>

  • javascript について追加の質問

    質問NO6591909=3/14 10:59の追加の質問です。 素晴らしい回答で非常に感謝いたしますが、追加でもう一つお願いします。あと一息といったところです。最後の部分なのですが、 function pd1() { if(flag) document.getElementById('ID1').style.visibility = "hidden"; else document.getElementById('ID1').style.visibility = "visible"; var img = document.getElementById('s1').getElementsByTagName("img"); img[0].src = "別の画像のURL" flag = !flag; } function fx(){ var num = location.search.substr(1,1); var the_id = "ID" + num.toString(); var the_id2 = "s" + num.toString(); document.getElementById(the_id).style.visibility = "visible"; var img = document.getElementById(the_id2).getElementsByTagName("img"); img[0].src = "別の画像のURL" } この3行上の"別の画像のURL"とありますが、上記ですと決まった一枚の画像しか表示できないということになりますよね? IDは9つありまして、9つ別々の画像をそれぞれ選択できるようにしたいのですが、その点を考慮するとどのような文になりますでしょうか?(function fx()を9つ別々に書くんでしょうか?・・・・・・)よろしくお願いいたします。 因みにここからhtml↓(さっきも書きましたが、また書いておきます。) <div id= "w1" onMouseover="document.s1img.src='img/s1rr.gif'" onMouseout="document.s1img.src='img/s1w.gif'"> <a href="javascript:pd1()">テキスト</a></div> <div id="ID1" style="visibility: hidden;" onMouseover="document.s1img.src='img/s1rr.gif'" onMouseout="document.s1img.src='img/s1w.gif'"> <p>テキスト<br /> </div> <div id="s1"><img src="img/s1w.gif" width="29" height="39" name="s1img"/></div>

  • 複数の画像を連動してロールオーバーさせたいのですが

    宜しくお願い致します。 現在WEBショップを運営しているのですが、 「商品一覧ページ」から「商品詳細ページ」へリンクする画像が3つあり、 現在、それぞれの画像は個別にはロールオーバーするのですが、 3つの画像のどこにポインタを当てても、3つの画像全てが連動してロールオーバーするようにするにはどうすれば良いのでしょうか? (3つの画像のリンク先は全て同じです) どなたかご存知な方がいらっしゃいましたらご教授頂けると幸いです。 宜しくお願い致します。 <td><p><A href="リンク先(1)" ><img src="img/商品名_1.gif" alt="" onmouseover="this.src='img/商品名_2.gif'" onmouseout="this.src='img/商品名_1.gif'" width="133" height="28" /></A></p> <p><A href="リンク先(1)" ><img src="img/詳細ページ_1.gif" alt="" onmouseover="this.src='img/詳細ページ_2.gif'" onmouseout="this.src='img/詳細ページ_1.gif'" width="133" height="18" /></A></p>

    • ベストアンサー
    • HTML
  • 離れた場所にマウスオーバーで画像を変えたい。

    宜しくお願いします。 色々と調べて試してみるのですが解決できず、こちらでご相談させ頂こうと思います・・・。 サイト内にあるボタン自体をマウスオーバーで変化させ、かつそのボタンを選択している時には、別の離れた場所にも指定した画像を表示させたいと考えております。 1つやっかいなのが、今回.3つ画像があるのですが、3つとも微妙に異なる場所へ表示させなければなりません。一応、簡単な資料を作成しましたので添付のデータをご確認頂きたいのですが・・・。 配置はそれぞれ記載されている感じで、#A、#B、#Cというコンテナ内に入っているボタン画像にマウスが行くと、ボタン自体もマウスオーバーで変化し、かつ、#container内の赤い画像の場所にも別のsampleA.pngを表示させたいと考えています。 BとCに関しても同様で、それぞれ個別の位置に画像を表示させたいと思います。 ボタン側のマウスオーバーは出来たのですが、更に加えて離れた場所に画像を表示させる方法が分かりません。 <div id="container">ここに画像を表示させたいです!</div> <div id="A"><a href="***"><img src="images/1.png" onmouseover="this.src='images/over1.png'" onmouseout="this.src='images/1.png'"></a></div> <div id="B"><a href="***"><img src="images/2.png" onmouseover="this.src='images/over2.png'" onmouseout="this.src='images/2.png'"></a></div> <div id="C"><a href="***"><img src="images/3.png" onmouseover="this.src='images/over3.png'" onmouseout="this.src='images/3.png'"></a></div> どなたか、こういった方法でサイトを作成させた方いらっしゃいましたらアドバイスいただけますと助かります。 どうぞ、宜しくお願いいたします。m(_ _)m

    • ベストアンサー
    • CSS
  • よろしくお願いいたします。cssを使ってロールオーバーを横並びにしたい

    よろしくお願いいたします。cssを使ってロールオーバーを横並びにしたいと考えております。そこで以下のような記述をしたいと考えているのですがうまく行かず、また原因もわからずに困っておます。どなた様かご指導のほどよろしくお願いいたします。 まず以下の記述をしました。 [html] <div id="menu"> <ul> <li id="menu1"><a href="a/index.html" title="HOME" ><img src="img/1.gif" alt="HOME" onmouseover="this.src='img/11.gif' onmouseout="this.src='img/1.gif'" /></a></li> <li id="menu2"><a href="b/index.html" title="ホームページ製作"><img src="img/3.gif" alt="HOME" onmouseover="this.src='img/33.gif' onmouseout="this.src='img/3.gif'" /></a></li> <li id="menu3"><a href="c/index.html" title="ネットショツプ製作"><img src="img/4.gif" alt="HOME" onmouseover="this.src='img/44.gif' onmouseout="this.src='img/4.gif'" /></a></li> <li id="menu4"><a href="d/index.html" title="SNSサイト製作"><img src="img/6.gif" alt="HOME" onmouseover="this.src='img/66.gif' onmouseout="this.src='img/6.gif'" /></a></li> <li id="menu5"><a href="e/index.html" title="SEOプロモーション"><img src="img/7.gif" alt="HOME" onmouseover="this.src='img/77.gif' onmouseout="this.src='img/7.gif'" /></a></li> <li id="menu6"><a href="f/index.html" title="出版・印刷・その他"><img src="img/8.gif" alt="HOME" onmouseover="this.src='img/88.gif' onmouseout="this.src='img/8.gif'" /></a></li> <li id="menu7"><a href="g/index.html" title="お問合せ・御注文"><img src="img/5.gif" alt="HOME" onmouseover="this.src='img/55.gif' onmouseout="this.src='img/5.gif'" /></a></li> </ul></div> [css] #menu ul{ list-style-type:none; } #menu ul li{ display:inline; } http://desktop10.web.fc2.com/test.html 上記URLにアップしています。よろしければ見てみてください。 画像も、横並びにならず、マウスを合わせたときの画像も変化しません。また、ブラウザ上の左下に ページでエラーが発生しました。と出てしまいます。 お手数では御座いますがどなた様かご教示をお願いできませんでしょうか? わたしとしては、以下のような感じにしたいと考えております。 http://desktop10.web.fc2.com/test1.html なお、一応記載させて頂きますが画像の中に「ホームページ製作」や「SNS」等と・・・ありますが、私は 現在cssの学習をしており、特別パソコン関係の商売をしているわけでもありません。ただ、今後の自分のために色々と出来ればよいと考えているところであります。 初心者では御座いますが、どなた様かご指導のほどよろしくお願いいたします。

    • ベストアンサー
    • HTML
  • マウスオーバーの合体

    マウスオーバーのプルダウンメニューと マウスオーバー画像変更スクリプトを組み合わせることは可能なのでしょうか? イメージとしては所期画面に画像Aがあり、マウスを載せると画像Aが画像Bになり、 更に画像Bの下にプルダウンメニューが表示されるイメージです。 尚、現在は以下の組み合わせがうまくいかない為(不可能?) 個々にスクリプトを記載しておきます。 ↓↓↓↓↓↓マウスオーバーのプルダウンメニュー↓↓↓↓↓↓ <html> <head> <script language="JavaScript"><!-- vType = ["hidden","visible"]; function pdMenu(mName) { Menu = document.all[mName].style; Menu.visibility = vType[Menu.visibility.indexOf("hidden") + 1]; } // --></script> </head> <body> <img src="main.png" onMouseover="pdMenu('Menu')"><br> <div id="Menu" style="visibility:hidden" onMouseout="pdMenu('Menu')"> <a href="http://www.yahoo.co.jp/" ><img src="sub01.png" border="0"></a><br> <a href="http://www.google.co.jp/"><img src="sub02.png" border="0"></a><br> </div> </body> </html> ↑↑↑↑↑↑マウスオーバーのプルダウンメニュー↑↑↑↑↑↑ ↓↓↓↓↓↓マウスオーバー画像変更スクリプト↓↓↓↓↓↓ <img border="0" src="main.png" onmouseover="this.src='main2.png'" onmouseout="this.src='main.png'"> ↑↑↑↑↑↑マウスオーバー画像変更スクリプト↑↑↑↑↑↑

  • マウスオーバーで画像変更で

    以下のような方法で画像変換を行っています。 <script language="JavaScript"> function imageChange(imageName,imageURL){ document.images[imageName].src = imageURL; } </script> <TR><TD><IMG SRC="./img/01.gif" NAME="image01" style="position:absolute;top:20;left:10;" onMouseOver="imageChange('image01','sub01_01b');"> </TD></TR> <IMG SRC="./img/01_01b.gif" name="sub01_01b"> 実際にマウスオーバーさせると×印が出てしまいます。 onMouseOver="this.src='./img/01_01b.gif'" とするとできるのですが。 どこかに間違いがあるのだと思うのですが、自分で発見できません(><) 間違いを訂正してください!

  • クリックして変更した画像を他の画像をクリックしたとき戻すには?

    以前、別で下記のような質問がありました。 ●質問------------------- 複数の同じ画像があるとします。 そのひとつをクリックすると画像が変わるようにします。 その後別の画像をクリックすると先ほどクリックした画像が初期の状態に戻るようにしたいのですが、どのような記述にすればよいのでしょうか? どなたかご教授おねがいします。 ---------------------- 上記の質問を受けての回答が下記のような感じで ●回答------------------- <script> function change(obj){ var orgimg="a.gif"; var newimg="b.gif"; var imgs=document.getElementsByTagName('img') for(var i=0;i<imgs.length;i++){ if(imgs[i].className==obj.className){ if(imgs[i]==obj) imgs[i].src=newimg; else imgs[i].src=orgimg; } } } </script> <img src="a.gif" class="hoge" onClick="change(this)"> <img src="a.gif" class="hoge" onClick="change(this)"> <img src="a.gif" class="hoge" onClick="change(this)"> ---------------------- これで終わってしまっていたのですが、画像が複数のパターンある場合はどのようにすればよいでしょうか。 例えば 「a1.gif」をクリックすると「a2.gif」に変更するようにして、さらに「b1.gif」というものがあって、クリックすると「b2.gif」に変更するように設定してあるとします。 「a1.gif」をクリックして「a2.gif」になっている状態で「b1.gif」をクリックすると「a2.gif」が「a1.gif」に戻るようにするにはどのようにすればよいでしょうか。 このb1が、c1,d1,e1・・・・とたくさんある感じです。 質問の内容がわかりづりかもしれませんが、どなたかご教示いただけると幸甚です。 宜しくお願い申し上げます。