• ベストアンサー

マウスを置くと画像が切り替わる設定を２つ以上したい。

IRAMです。 リンクをメニューで作っています。 リンクはテキストと画像共に張っています。 画像に触れると、画像が切り替わるという動作を するソースを、 <a href="onsei.html" onMouseOver="if(document.images) IMAGE.src='Image/onsei_2sd.jpg'" onMouseOut="if(document.images) IMAGE.src='Image/onsei_s_mb.jpg'"> <IMG SRC="Image/onsei_s_mb.jpg" border="0" width=100 height=60 name="IMAGE"> </a> としました。 実際に表示させて見ると、 確かにマウスを置いたときに画像が切り替わった のですが、 この設定を２つ以上すると、 画像が切り替わらないのです。 マウスを置いたときに背景色が変わる設定は それぞれのリンクごとにできました。 しかし背景が画像であるとき、 ２つ以上の画像に設定すると動作しないのです。 つまり設定が一つの画像に対してのときだけ 動作します。 この場合はどのような対策を取れば よろしいのでしょうか。 どなたか回答をお待ちしています。 よろしくお願い致します。

  • IRAM
  • お礼率58% (17/29)

質問者が選んだベストアンサー

  • ベストアンサー
  • deadlock
  • ベストアンサー率67% (59/87)
回答No.4

#2で私が書いたとおり、下記の2箇所(「~~~」の部分)もIMAGE2,IMAGE3...と変えてください。 これらがimgタグのname(「^^^」の部分)と結びつきます。 ここがIMAGEをさしているので補足で仰る現象が出ます。 onMouseOver="if(document.images) IMAGE.src='Image/hands5.jpg'" ~~~~~~~~ onMouseOut="if(document.images) IMAGE.src='Image/hands1_2sd.jpg'"> ~~~~~~~~ <IMG SRC="Image/hands1_2sd.jpg" border="0" width=100 height=60 name="IMAGE2"> 　　　　　　　　　　　　　　　　　　　　^^^^^^^

IRAM
質問者

お礼

おっしゃるとおりに、直してみましたところ期待どおりの動作ができました。 とても助かりました。 ありがとうございました。

その他の回答 (4)

  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.5

#4の方の回答の通り、名前を合わせないといけません。

IRAM
質問者

お礼

はい、おっしゃるとおりに、直してみましたところ期待どおりの動作ができました。 お世話になりました。 ありがとうございました。

  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.3

>IMAGE2、IMAGE3のところは動作がおかしくなってしまっています。 実際のソースがどうなっているか補足してくれませんか？

IRAM
質問者

補足

IMAGE2↓ <Td Align="left" Valign="middle" Width="100" Height="60" BgColor="#FFD700"> <a href="tuuyaku.html" target="main" onMouseOver="if(document.images) IMAGE.src='Image/hands5.jpg'" onMouseOut="if(document.images) IMAGE.src='Image/hands1_2sd.jpg'"> <IMG SRC="Image/hands1_2sd.jpg" border="0" width=100 height=60 name="IMAGE2"> </a> </Td> IMAGE3↓ <Td Align="left" Valign="middle" Width="100" Height="60" BgColor="#FFD700"> <a href="sonota.html" target="main" onMouseOver="if(document.images) IMAGE.src='Image/hikidasi2_sv.jpg'" onMouseOut="if(document.images) IMAGE.src='Image/hikidasi.jpg'"> <IMG SRC="Image/hikidasi2_sv.jpg" border="0" width=100 height=60 name="IMAGE3"> </a> </Td> です。 <HEAD>環境内には以下のタグを書いています。 <SCRIPT language="JavaScript"> <!-- loadImage = new Image(); loadImage.src = ""; //--> </SCRIPT> よろしくお願いします。

  • deadlock
  • ベストアンサー率67% (59/87)
回答No.2

name="IMAGE"とされたタグが複数あるのが原因です。 あまりいいやり方ではありませんが、単純なやり方を書いておきます。 以下のように、Aタグの「IMAGE.src」とIMGタグの「name="IMAGE"」を、AタグとIMGタグのペアが登場する順にIMAGE1、IMAGE2、…というように番号を振ってみてください。 <a href="onsei.html" onMouseOver="if(document.images) IMAGE1.src='Image/onsei_2sd.jpg'" onMouseOut="if(document.images) IMAGE1.src='Image/onsei_s_mb.jpg'"> <IMG SRC="Image/onsei_s_mb.jpg" border="0" width=100 height=60 name="IMAGE1"> </a> <a href="onsei.html" onMouseOver="if(document.images) IMAGE2.src='Image/onsei_2sd.jpg'" onMouseOut="if(document.images) IMAGE2.src='Image/onsei_s_mb.jpg'"> <IMG SRC="Image/onsei_s_mb.jpg" border="0" width=100 height=60 name="IMAGE2"> </a>

IRAM
質問者

補足

質問しておきながら返事が遅くなってすみませんでした。 <SCRIPT language="JavaScript"> <!-- loadImage = new Image(); loadImage.src = ""; //--> </SCRIPT> を</head>の前に入れています。 IMAGE2、IMAGE3と違うふうに割り当ててみますと、動作がおかしくなってしまいました。 マウスを置いたら、画像が切り替わるようにしたかったのですが・・・。

  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.1

どんな風に書いてうまくいかなかったのか 補足で書いてくれますか？ 質問文のIMGは別に背景というわけではありません。

IRAM
質問者

補足

わざわざ返事してくださったのに、こちらの回答が遅れましてまことに申し訳ありません。 上でdeadlockさんが回答してくださったとおり、IMAGEの名前をそれぞれ別々に割り当ててみました。 そうすると、 <SCRIPT language="JavaScript"> <!-- loadImage = new Image(); loadImage.src = ""; //--> </SCRIPT> で指定しています。 IMAGEとわりあてた画像は動作したのですが、IMAGE2、IMAGE3のところは動作がおかしくなってしまっています。 IMAGE2をわりあてた画像にマウスをおくと、IMAGE2の画像ではなく、IMAGEの画像が、IMAGE2に変わってほしい画像に切り変わってしまいます。 IMAGE3をわりあてた画像にマウスをおいても同様で、IMAGEの画像だけが変わります。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • マウスポインタが画像に重なった時の処理

    初歩的な質問で申し訳ありません。 現在HTMLでウェブページを作っていて、画像を貼り付けてそこにマウスポインタが重なった時に、画像を替え、なおかつ効果音を鳴らしたいのですが、画像だけが変わり音が流れません。 ソースの書き方に問題があると思うのですが、どの部分が間違っているのかよく分からない為ご指摘いただけるとうれしいです。 <html> <head><title></title></head> <body> <bgsound src="sounds/beat0001.mp3" id="b" loop="1" autostart="true"> <a href="#" onMouseOver="document.a.src='images/link2.jpg'","document.all.b.src='sounds/beat0001.mp3'" onMouseOut="document.a.src='images/link1.jpg'"> <img src="images/link1.jpg" border="1" name="a"> </a> </body> </html>

  • マウスをアイコンに乗せたとき、画像が変わるGalleryを作りたいと思っています

    HTMLのホームページにおいて、マウスをアイコンに乗せたとき、画像が変わるGalleryを作りたいと思っています。 色々なページを見て、 （前略） <SCRIPT> <!-- function In(ImgSrc){ document.images['SCR'].src = "images/"+ImgSrc;} function Out(ImgSrc){ document.images['SCR'].src = "images/"+ImgSrc;} --> </SCRIPT> （中略） /*ボタン１　ここにマウスを乗せて画像１を変更する*/ <IMG onmouseover="In('gra01L.jpg')" onmouseout="Out('gra00.jpg')"src="botan_gra01.jpg" border="0"></TD> /*画像１*/ <IMG height="300" src="images/gra00.jpg" width="500" border="0" name="SCR"> /*ボタン２　ここにマウスを乗せて画像２を変更する*/ <IMG onmouseover="In('gra01.jpg')" onmouseout="Out('gra00.jpg')" src="botan_gra01.jpg" border="0"> /*画像２*/ <IMG height="300" src="images/gra00.jpg" width="500" border="0" name="SCR"> （後略） というやりかたでを採用したのですが、このやりかただと一つのページにつき、一箇所の画像しか変更させることができません。 （上では図２しか変更できません） 置いたアイコンによって、個別のウィンドーの画像を変更させたいのですが、どのようにすればいいでしょうか。 参考になるＨＰでもあれば教えてください。

    • ベストアンサー
    • HTML
  • マウスオーバー時に画像切り替え

    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 このサイトでは、リンクのところが文字ですが、私は、リンクなしで文字部分を画像になるようにしました。 画像が表示されないのは、何が問題なのでしょうか？ 画像は全てアップロードしました。

  • ｊａｖａでロールオーバー設定で教えてください

    外部ファイルで同じ設定でロールオーバーを設定しているのですが ポイントを合わせると画像が動く（ボタンでよくある下にへこむような動作）ものと動かないものが出てきます。 ロールオーバー自体はできているのですがその動きの違いは何なのでしょうか？ できれば全て動くようにしたいのですが… ＜外部ファイル＞ if (document.images) { var img1on = new Image(); img1on.src = "img/c2.png"; var img1off = new Image(); img1off.src = "img/c1.png"; } function On(name) { if (document.images) { document.images[name].src = eval(name + 'on.src'); } } function Off(name) { if (document.images) { document.images[name].src = eval(name + 'off.src'); } } ＜html＞ <p> <a href="home.html" onMouseOver="On('img1')" onMouseOut="Off('img1')"><img src="img/c1.png" alt="ホームへ" name="img1" border="0"></a> </p> これ以上のことはしていません。（全て統一でこのタグの 画像の名前やリンク先しかいじっていません。） 今貼り付けたものはへこむ動作はせずにロールオーバーのみが可能なものです。 誰か教えていただけませんでしょうか？ またへこむような動作はどこで設定されているのでしょうか？ 色々調べてはいるのですが初心者なもので分かりません… 宜しくお願い致します。

  • マウスオーバー

    マウスオーバーの制御で下記のソースなのですが、今まで、こちらを教えてもらってやっていました。 今のままだと、オーバーで画像が変わるだけでマウスが外れると、元の画像に戻ってしまいます。該当ページへジャンプしたときに画像が変わったままにするのにはどうしたらよいのでしょうか。 <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>

  • 縮小画像をマウスオーバーで画像を切り替えるjavaスクリプトで

    テーブルを４分割し左下に小さい画像、右上に大きい画像。でその小さい画像をマウスでロールオーバーした際に右上の大きい画像が変わるjavaスクリプトについてなんですが, ４分割（上記）のテーブルを一つ作成した所すんなり画像はかわり、思い通りで来たのですがもう一つすぐ下に同じようにしたら両方ともが変わらなくなりました。 ヘッド内のスクリプトは Images[1] = new Image(); Images[1].src = "画像url"; Images[2] = new Image(); Images[2].src = "画像url"; 画像に onMouseOver="change_image(1)" onMouseOut="change_image(2)" です。 ２個目のテーブルは Images[1] = new Image(); Images[1].src = "画像url"; Images[2] = new Image(); Images[2].src = "画像url"; この下に Images[3] = new Image(); Images[3].src = "画像url"; Images[4] = new Image(); Images[4].src = "画像url"; とし 画像には onMouseOver="change_image(3)" onMouseOut="change_image(4)" としました。 当方javaがほとんど分からない度素人なのです。 どなたか、よろしくお願いします。

  • カーソルを重ねると変わる画像

    <img src="(画像1のパス名)" width="60" height="40" 　　onmouseover="if(document.images) this.src='(画像2のパス)'" 　　onmouseout="if(document.images) this.src='(画像1のパス)'"> これを使ってマウスを重ねると画像が変わるようにしています。 次の画像を右隣に置きたいのですが、段落ちしてしまいます。 この段落ちした画像は、重ねると画像が変わるようにはしていない画像です。 隣同士に置くにはどのようにしたらよろしいですか？ ちなみに用語は改行してません。なので、改行による段落ちではないのは確かです。

    • ベストアンサー
    • HTML
  • 画像のランダム表示、及び画像毎のリンク設定に関して

    こんにちは。 サムネールの画像が、最終的には100個位出来ます。個々のサムネール画像毎にリンクを設定したいと思います。 サムネール画像をダブらずランダムに表示する方法は、過去の質問を拝見して実現出来ました。 下記の質問が参考なりました。 http://oshiete1.goo.ne.jp/qa716071.html 過去の質問のとおり、下記のソースをまねて画像のランダム表示は可能になりました。基本的に上記質問のソースとほぼ同じ内容になります。 <html> <head> <title>ランダム表示</title> <script type="text/javascript"> <!-- NoMem = new Array(); function RndmNo(n){ x=Math.floor(Math.random()*29); if (NoMem.length){ for (j=0; j<NoMem.length; j++){ if (NoMem[j]==x){ RndmNo(n);} } } x=new String(x); if (x.length==1){ x="000"+x;} else if (x.length==2){ x="00"+x;} else if (x.length==3){ x="0"+x;} NoMem[n]=x; } for (k=0; k<3; k++){ RndmNo(k); } RndImg= new Array(); for (i=0; i<3; i++){ RndImg[i]= new Image(); RndImg[i].src="images/image"+NoMem[i]+".jpg"; } function ImgDisp(){ document.images["imgs0"].src=RndImg[0].src; document.images["imgs1"].src=RndImg[1].src; document.images["imgs2"].src=RndImg[2].src; } window.onload=ImgDisp; //--> </script> </head> <body> <img src="*" name="imgs0"><br> <img src="*" name="imgs1"><br> <img src="*" name="imgs2"> </body> </html> 画像は、images と言うフォルダを作り、フォルダ内に、image0000.jpg から image0019.jpg の画像を20個用意する事で、ランダムにサムネール画像を表示出来るようになりました。 希望として、サムネール画像毎にリンク先を設定したいと思っています。 イメージとして、ランダムに表示するバナー広告みたくしたいと思います。 サムネール画像とリンク先とは具体的に。 image0000.jpg が表示されたら、同じサイト内に ./0000.html へリンクを張れるようにしたいと思います。 また、最終的にサムネール画像は100個近くになり、リンク先もサムネール画像と同じ数になりますので、リンク先は別ファイルで管理出来るようになれば嬉しく思います。 アドバイスか、ヒントを頂ければと思います。

  • 画像の切り替え

    教えてください。 画像がはじめに1つ表示されていて、 横にサムネイルが2つあり、 サムネイルのマウスオーバーで、その画像が大きく表示され、 マウスオーバーで、元の画像へと表示が戻り、 サムネイルのクリックで、その画像が大きく表示されたまま固定となる ということがしたいのですが、 マウスオーバー、マウスアウトはとりあえず実装できたのですが、 マウスクリックを実装しても、 やはり、マウスアウトで画像が切り替わってしまいます。 どうしたらいいのでしょうか？ <IMG src="images/a.jpg" id="display" name="display" width="100" height="100" border="0"> <a href="javascript:;" onClick="document.display.src='images/a.jpg'" onMouseOver="MM_swapImage('display','','images/item/a.jpg',1)" onMouseOut="MM_swapImgRestore()"> <IMG src="images/item/a.jpg" width="20" height="20" border="0" name="thumb1" id="thumb1"> </a> <a href="javascript:;" onMouseOver="MM_swapImage('display','','images/b.jpg',1)" onMouseOut="MM_swapImgRestore()" onClick="document.display.src='images/b.jpg'"> <IMG src="images/b.jpg" width="20" height="20" border="0" name="thumb2" id="thumb2"> </a> 以上 よろしくお願いします。

  • 関数の重複で動かない？

    ブログのサイドバーにjavascriptを使ってるのですが同じものを2個貼り付けたら古い方が動かなくなってしまいました。 関数の重複かも、というとところまではなんとなくわかったのですがどこをどうすれば動くようになるでしょうか？ ---------------------------------------- <HTML> <HEAD> <TITLE>TAG index Webサイト</TITLE> <SCRIPT TYPE="text/javascript"> <!-- if (document.images) { // 設定開始（使用する画像を設定してください） // 通常の画像 var img0 = new Image(); img0.src = "image/start.jpg"; // ポイント時の画像1 var img1 = new Image(); img1.src = "image/newyork.jpg"; // ポイント時の画像2 var img2 = new Image(); img2.src = "image/london.jpg"; // ポイント時の画像3 var img3 = new Image(); img3.src = "image/yokohama.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> <IMG SRC="image/start.jpg" ALT="START" WIDTH="150" HEIGHT="100" NAME="def"> <BR> <A HREF="change3.html" onMouseOver="On('img1')" onMouseOut="Off()">NEW YORK</A> ｜ <A HREF="change3.html" onMouseOver="On('img2')" onMouseOut="Off()">LONDON</A> ｜ <A HREF="change3.html" onMouseOver="On('img3')" onMouseOut="Off()">YOKOHAMA</A> </BODY> </HTML> ----------------------------------------------

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する