• ベストアンサー

オンマウスで離れた画像が変わる。

HPを作っているのですが、Aの画像にマウスを乗せたときに、そのAの画像が変化することは出来るのですが、 『Aにマウスを乗せたとき、少し離れたところにあるBの画像が変化する』 と、言うようなことはどのようにすれば出来るのでしょうか? また、『A1、A2、A3と、マウスを乗せるところがあり、変化する画像はBの位置の画像のみ』・・・のようなことは出来ないでしょうか? 上手く説明できないのですが、回答、どうぞよろしくお願いします。

  • HTML
  • 回答数2
  • ありがとう数2

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

  • ベストアンサー
  • leap_day
  • ベストアンサー率60% (338/561)
回答No.2

こんにちは <script language="JavaScript"> <!-- function SwapImage(img) { obj = document.getElementById("image"); obj.src = img; } //--> </script> <img src="./A1.gif" onmouseover="SwapImage('./A1.gif')"> <img src="./A2.gif" onmouseover="SwapImage('./A2.gif')"> <img src="./A3.gif" onmouseover="SwapImage('./A3.gif')"> <img src="./B.gif" id="image" width="100px" height="100px" border="1"> という感じになるかと思います

miyako_pikatyu
質問者

お礼

お返事遅くなってすいません。 色々応用した結果、おかげさまで上手くいきました! 丁寧にタグまで張ってくださって、ありがとうございます

その他の回答 (1)

  • maxmixmax
  • ベストアンサー率10% (91/908)
回答No.1

Bの画像を name="B" で指定してあげて A1、A2には onMouseOver="if(document.images)『B』.src='『変わった後の画像』'" これでなるかな?

miyako_pikatyu
質問者

お礼

お返事遅くなってすいません。 解説有難うございます。なんとか出来ました。

関連するQ&A

  • 教えて下さい!リンクボタンの画像をオンマウスで変える方法

    今HPを縦フレームで左ページにメニュー、右ページにtarget指定でページが切り替わるようにしています。 左ページのメニューはgif画像のボタンなのですが、画像に触れると画像が変化し、画像からマウスを放すと元の画像に戻るようにしたいのです。 1.マウスで画像1に触れると画像2に変化(マウスを放すと画像2は1にもどる) 2.クリックした時に一瞬画像2がへこみ、離すと画像2に戻る。 3.当然同時に右ページも変わる。 4.右のページがくりっくしたメニュー画像のリンク先の間は画像2のまま変化しない。 5.そのほかのメニュー画像をクリックすると画像2は画像1にもどる。 というのはどうすればいいのでしょうか? リンクボタンをへこませる方法はどこかで見たのですが、 それを今のhtmlのどこに書けばいいのかもわかりません。 ちなみに、外部のcssがあります。テンプレートを加工しているので。 宜しくお願いします!

    • ベストアンサー
    • HTML
  • オンマウスで矢印の横に画像を表示させたい・・・・。

    初めまして。さっそくですが、質問させて頂きます。 リンクを貼っている文字にマウス(矢印)を乗せた時に、矢印の横に説明を出す方法はわかるのですが、その位置に画像を表示させたいのです。 どうしたら良いでしょうか・・・・。 お願いします。

  • オンマウス時に別画像を上に重ねる方法。

    オンマウス時に別画像、png画像を重ねたいと思っています。 置き換えではありません。 a.jpgを用意して マウスオーバーで b.pngを重ねたいです。 常にa.jpgは表示し続けるという意味ですがどうやればいいのでしょうか。 ※a.jpgにb.pngが重なっているc.jpgを用意して、置き換えるという答えはなしでお願いします。 説明不足の場合補足いたします。 どうぞよろしくお願いします。

    • ベストアンサー
    • CSS
  • html オンマウスで変化する画像の位置の指定方法

    よくHPなどで使われるオンマウスによって変化する画像。 私は今その変化する画像の位置を指定のに苦労しています。 画像が添付してあると思われます。 今現在こういった感じになっています。 緑・・・オンマウス位置 赤・・・オンマウスによる画像表示位置 青・・・現在のオンマウス位置 黄・・・現在のオンマウスによる画像表示位置 私はこの青、黄を緑、赤の場所まで移動させたいと思っています。 http://copicopi.com/onmousepic.html こちらのサイトのオンマウス画像4を参考にしています。 また、たまに表示される画像が激しく点滅する事もあります。 どういった風に書き換えれば位置を綺麗に指定する事ができるのでしょうか。 教えて頂けると幸いです。

    • ベストアンサー
    • HTML
  • オンマウスで2箇所の画像を変えたい

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

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

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

  • 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だと表示がおかしくなります。 改善方法はありませんでしょうか? 助けてください!

  • HPの画像について。

    HP上にある、画像についてなんですけど、 画像Aとリンク文字Bがあったとします。 Bの上にカーソルを持って行っただけでAが違う画像に 変わる・・・っていうのをあるHPで見たんですけど、 どうやってするんですか? とってもわかりにくい説明ですいません。

  • オンマウスで背景画像を変えたいのですが・・・

    こんばんは。 HPビルダー7を使っています。 タイトル通りなのですが、ある画像(リンクあり)の上にマウスポインタをのせた時に、初めからある背景とは違う背景に変わるようにしたいのです。 素材屋さんで見かけた事はあるのですが…。 色々と検索して挑戦してみたものの、上手くできません。 ビルダーで出来るのなら、お手数ですがその方法を教えて頂けませんでしょうか? よろしくお願いします。

  • オンマウスでの画像+テキスト表示

    いつも的確な回答をいただいて、非常に感謝しております。 違うカテで同じような質問をさせていただいたのですが少しやりたいことが変わったので 再度、質問いたしました。 今、HPを作成しているのですがテーブルを左右(左を大きく、右を6つくらい)に分けて 右にはいくつか写真を小さく載せてその右の写真にマウスを乗せると左に大きく表示されるようにしたいのです。 そして、その大きな写真の下にはテキストも載せたいのです (マウスを乗せた写真によって違うテキストを載せる)。 ~こんなかんじ~ │ ̄ ̄│□□□ │__│□□□ テキスト ~~~~~~~~ 検索ではビルダーを使った説明しかありません。 もし、フリーのHP作成ソフト(私が使っているのはalphaEDIT)でのやり方が乗っているサイト 無ければ、ご存知の方に教えていただきたいです。 よろしくお願いいたします。