オンマウスで2箇所の画像を変えたい

前へ 次へ
このQ&Aのポイント
  • 画像Ｂをオンマウスで画像Ａ→画像A-1、かつ、画像Ｂ→画像Ｂ’、画像Ｃをオンマウスで画像Ａ→画像A-2、かつ、画像Ｃ→画像Ｃ’、画像Ｄをオンマウスで画像Ａ→画像A-3、かつ、画像Ｄ→画像Ｄ’となるようにしたい。
  • 画像Ｂ～はリンクになっていて、他ページへ飛ぶようになっております。
  • 似た内容の質問をいくつか拝見したのですが、どうしても解決できず…よろしくお願いいたします。
回答を見る
  • ベストアンサー

オンマウスで2箇所の画像を変えたい

似た内容の質問をいくつか拝見したのですが、どうしても解決できず…よろしくお願いいたします。 □　←画像Ａ ----------- □　←画像Ｂ □　←画像Ｃ □　←画像Ｄ 　　・（以下同型のものが複数） 　　・ とある時に、 画像Ｂをオンマウスで画像Ａ→画像A-1、かつ、画像Ｂ→画像Ｂ’ 画像Ｃをオンマウスで画像Ａ→画像A-2、かつ、画像Ｃ→画像Ｃ’ 画像Ｄをオンマウスで画像Ａ→画像A-3、かつ、画像Ｄ→画像Ｄ’ となるようにしたいのです。 関係ないかもしれませんが、画像Ｂ～はリンクになっていて、他ページへ飛ぶようになっております。 皆様、どうかよろしくお願いいたします。

  • hhdd
  • お礼率100% (4/4)
  • HTML
  • 回答数1
  • ありがとう数1

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

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

たとえば画像Ｂのところに <img src="画像Ｂ.jpg" onmouseover="document.getElementById("画像Aのid").src='画像A-1.jpg';this.src='画像Ｂ’.jpg'"> って感じにすればよいでしょう

hhdd
質問者

お礼

返答ありがとうございました！ 上述のソースで２枚の画像を表示するところまではできたのですが、マウスアウトした時に、その画像が残ったままになってしまいます。 マウスアウト時はデフォルトの画像に戻って欲しいのですが…。 質問時にそのことを書かずに申し訳ありません。 よろしくお願いいたします。

hhdd
質問者

補足

↓すいません、補足ではなくお礼の所に書き込んでしまいました。 その後、マウスアウト時の処理もできるようになりました！（よく調べずに書き込んでしまいまいして申し訳ありません） 大変ありがとうございました、助かりました！

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

関連するQ&A

  • 1つの画像オンマウスで3つの画像を切り替えたい！

    現在、下記のような感じで一つの画像オンマウスでその画像を含む3つの画像が切り替わるようにしています。 ---------------------------------- <a href="#" onMouseOver="11111.src='a.gif';22222.src='b.gif';33333.src='c.gif'" onMouseOut="11111.src='a_01.gif';22222.src='b_01.gif';33333.src='c_03.gif'"><img src="aaaaaa.gif" alt="" width="94" height="32" border="0" name="11111" /></a> <img src="b_01.gif" alt="" width="572" height="50" name="22222" /> <img src="c_01.gif" alt="" width="96" height="32" border="0" name="33333" /> ---------------------------------- IE6だと、きちんと表示されるのですが、 Firefoxだと表示がおかしくなります。 改善方法はありませんでしょうか？ 助けてください！

  • オンマウスで画像が切り替わった先の画像にリンク

    オンマウスで画像が切り替わった先の画像に別ページのリンクを新窓で立ち上げたいのですが、方法が分かりません。 参考までに該当ページのURLを落としていきます。 http://rs-produce.net/html/deco-goods/order/or_004.html

  • リンクと画像に触れると数カ所の画像が替わる

    わかりづらいかもしれませんので、例をあげながら質問いたします。 アルファベットのリンク画像にマウスが触れると、 同じ場所に読みであるカタカナの画像を表示させるためには、 オンマウスのタグを入れてあげればいいんですよね。 ところがもう一つ、別の場所（テーブル）に写真画像も入れ替えて表示させたいのです。 アルファベットのリンク画像がいくつかリストになっていて、 触れると同じ場所に読みの画像が入れ替わって教えてくれると同時に、 別のテーブルに１ケ所だけ写真サイズの画像のスペースがあり、 そこにリストに合わせた写真画像を入れてあげたいのですが。 オンマウスオーバーとオンマウスアウトを2個ずつ入れてあげることになりますが、 連動で数カ所の複数の画像を表示、非表示で入れ替えるのは可能なのでしょうか。 何度組み合わせても、ひとつしか替わらないのです。 別のテーブルにある画像を表示させるのにはHTMLで、 同じ場所にある画像を変化させるのにはリンク画像に触れるJavascriptを使いました。 オンマウスオーバーとオンマウスアウトの記述を 2つ並べて記述するのが間違ってるんだと思うのですが。 連動で同じ箇所と別の箇所に複数の画像を表示させてリストごとに替わる記述法があれば、ぜひ教えてください。 また、リンクに対するオンマウスではなく、 画像に対するオンマウスっていうのはあるんでしょうか。 知識不足で、しかも長文になり申し訳ありません。 お忙しいところ恐縮ですが、よろしくお願いいたします。

  • オンマウスで画像変更、クリックでリンク先に飛ばしたいのです。

    オンマウスで画像変更、クリックでリンク先に飛ばしたいのです。 右側にメニューボタン（１～４）があり 各ボタンにオンマウスすると左側に画像を表示、 クリックすると別ページにリンクさせたいのです。 フレームは使っていません。 初心者なので具体的なタグを教えていただくと助かります。

  • オンマウスで特定の画像だけ1ピクセル下げたい

    オンマウス時にボタンを押したような効果を出すためリンク画像を1ピクセル下げたいのですが cssで指定の際 a:hover { position: relative; top: 1pt; } 等としてしまうと、リンクが設定されている文字も画像も全てオンマウス時に動いてしまいます。 自分でもしばらく調べてみたのですが、検索の語がイマイチなのか欲しい情報にヒットしませんでした。 特定のの画像だけ、または文字列だけを動かす指定の書き方がありましたら 教えていただけるとありがたいです。

    • ベストアンサー
    • HTML
  • 画像をチェンジ→もとに戻す

    ひとつのページに複数のリンクがあります すこしはなれた場所には、リンクと関係ない　画像A　がひとつあります テキストリンク０１　にマウスカーソルをのせます すると　画像A　は　画像B　と入れ替わります テキストリンク０１　からカーソルをはずします すると　画像B　は　画像A　にもどります テキストリンク０２　にマウスカーソルをのせます すると　画像A　は　画像C　と入れ替わります テキストリンク０２　からカーソルをはずします すると　画像C　は　画像A　にもどります テキストリンク０３　にマウスカーソルをのせます すると　画像A　は　画像C　と入れ替わります テキストリンク０３　からカーソルをはずします すると　画像C　は　画像A　にもどります ...................... このようなことをしたいんですが少しわがままかもしれないので、無理なら どのテキストリンクにカーソルを置いても 画像A　→　画像B　 はずすと 画像B　→　画像A こういうJavascriptを教えてください

    • ベストアンサー
    • HTML
  • リンク画像をオンマウスで変えたい

    今、ホームページを作成しています。 それで、以下のようなことをしたいのですが、可能でしょうか？ １　最初の画面に、ＥＮＴＥＲの画像を表示する ２　『１』の画像をオンマウスすると、画像が変わる ３　『２』の画像からマウスを放すと、画像が『１』に戻る　 ４　『２』の画像をクリックすると、別のページに飛ぶ なんだか説明下手ですいません・・・ 一応自分で調べてみたのですが、それらしい物が見つからず、失敗してばかりなので、質問させていただきました。よろしくお願いします！

  • マウスオーバー：一つの画像だけを変えるには？

    javascript初心者です。マウスオーバーの記述について教えてください。 ３つのリンクボタンがあるのですが、このうち、一つだけ画像が変わるようにしたいと思っています。 ※リンク先は、３つもと同じです。 例：A・B・Cのリンク画像　A～CのどれをオンマウスしてもAの画像だけが変わるようにしたい。 また、マウスアウトした時には、元の画像に戻るようにしたいです。 以上、よろしくお願い致します。

  • それぞれの画像をオンマウスのときに違う画像にしたい

    下記【１】の通り、画像のランダムリンクはできたのですが それぞれの画像をオンマウスしたときに 違う画像を表示するにはどうすればよいでしょうか？ JavaScriptを使わずに、一枚の画像だけを変える場合は↓のようにやっておりました <a href="http://～" target="_blank" ><img src="img[0] " height="" width="" border="0" onmouseover="this.src='img[0] の色違い画像など';" onmouseout="this.src='img[0] と同じ、もしくは違う画像';"></a> ※例えばimg[0]をオンマウスしたときにimg[2]にしたいのではなく、 それぞれ個別に用意した画像(通常時、オンマウス時、離した後の画像３枚)にしたいのですが。 【１】 // ランダムに画像を表示する jmp = new Array(); img = new Array(); // ジャンプ先のアドレス(数字は画像と対応) jmp[0] = "http://～"; jmp[1] = "http://～"; jmp[2] = "http://～"; jmp[3] = "http://～"; jmp[4] = "http://～"; // 画像のアドレス(数字はジャンプ先のアドレスと対応) img[0] = "img/img1.jpg"; img[1] = "img/img2.jpg"; img[2] = "img/img3.jpg"; img[3] = "img/img4.jpg"; img[4] = "img/img5.jpg"; n = Math.floor(Math.random()*jmp.length); document.write("<a href='"+jmp[n]+"' target='_blank'>"); document.write("<img src='"+img[n]+"' border='0'>"); document.write("</a>");

  • オンマウスで・・・

    ホームページビルダー（V6.5）で、HPを作成しているのですが http://tgtag.chu.jp/pb1c.html こちらのサイトのように、オンマウスでリンクできるメニューのリストが出てくる方法を知りたいです。 初心者なので、専門用語も全然わからないので、 質問の内容が通じなかったら、すみません。 よろしくおねがいします！

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する