• ベストアンサー

マウスオーバーで違う画像の表示をする

おはようございます。 ホームページビルダーを使用しているのですが、マウスオーバーで違う画像を現在ある画像の上に表示する方法をご存知の方、ぜひ教えて下さい。 例えば簡易な地図画像があり、その中で各地図上にしかけがあり、花屋さんの上にマウスがいったら花屋さんの情報がその地図画像の上に現れるような感じです。 よろしくお願い致します!!!!!

  • get3
  • お礼率71% (156/219)

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

  • ベストアンサー
回答No.2

例えば、普通のHTMLなら以下のようなコードになります。 <span onmouseout="changeimg.src='マウスが無い時の画像'" onmouseover="changeimg.src='マウスがある時の画像'"> <img src="マウスが無い時の画像" width="100" height="100" border="0" name="changeimg"> </span> あとは下地になる画像を細切れにして細かく設定すれば 希望する状態になると思います。面倒ですけど。 『マウスオーバー』で検索すればJavaScriptで変更するものとか、CSSで変更するものとか、色々出てきますので調べてみてください。

get3
質問者

お礼

お返事おそくなりすみません。 何とかできました。 ありがとうございました!!

その他の回答 (2)

  • Ace1
  • ベストアンサー率21% (555/2542)
回答No.3

貴方のビルダーに付いている解説書でロールオーバーと云う処を読んでその通りに作れば出来ます。 解説書が無ければ、ネットでロールオーバーで調べて下さい。

get3
質問者

お礼

お返事おそくなりすみません。 何とかできました。 ありがとうございました!!

noname#77845
noname#77845
回答No.1

JavaScript onmouse で検索してみましょう。 例としては、 <A href="." target="_blank" onMouseOver="sample1.src='on.gif'" onMouseOut="sample1.src='off.gif'"> <IMG src="off.gif" alt="sample1" name="sample1"> </A> のようになります。

get3
質問者

お礼

お返事おそくなりすみません。 何とかできました。 ありがとうございました!!

関連するQ&A

  • マウスオーバーで複数の画像を表示したいです。

    マウスオーバーで複数の画像を表示したいです。 マウスオーバーで複数の画像を任意の場所に表示して、 マウスアウトでそれぞれの画像を非表示にしたいです。 やりたい事は ■にマウスオーバーすると□が表示され、□をどれかマウスオーバーしても、□の画像3枚全部とも表示は続いてほしいです。■と□のどれかからマウスアウトすると非表示にしたいのです。 ■ □ □ □ よろしくお願いします。

  • 文字のマウスオーバーで、別フレームへ画像を表示させたいのですが

    ただいまHPビルダーにてHPを作成しています。 上下にフレームを分けており、 上:地図 下:地名 として・・・ 下フレームの地名(リンクを挿入してます)をマウスオーバーすれば、 上フレームの地図に場所を矢印で示す というような効果ができないものかと考えてます。 これが同じページ内であれば、 HPビルダーの、ロールオーバー効果にて作成することも可能なのですが、 下フレームの地名がたくさんあって スクロールする必要があるため、 常に地図を表示させるように 地図と地名を別フレームに分けたいのです。 アドバイスよろしくお願いいたします<(_ _)>

  • マウスオーバーで画像を拡大表示させたいです

    http://www.videocopilot.net/tutorials/ 上記サイトのように、マウスオーバー画像をマウスオーバーするだけで マウスカーソルに追尾して画像やflvを表示させるには、どのようなプログラムを行えばよいのでしょうか? または、ソフトの購入などが必要なのでしょうか? ヒントまたは参考サイトなどございましたら、教えてください。 お願い致します。

  • 画像にマウスを重ねると大きな画像を表示したい

    illustratorでスライスを作製し、画像を生成しました。 1000×1076のサイズで32個の画像で構成されるスライスになっています。 そのスライスの一部の画像にマウスオーバーするとスライス全体の 1000×1076と同じサイズの背景透明画像を上に表示したいのです。 よくあるボタンのマウスオーバーなどでやると元画像のまわりに画像がある想定ではないためか、マウスオーバーするとスライスが崩れてしまいます。 本来Flashなどでやるようなことと思いますが、 iPadでも見たいためCSSやJavascriptで実現したいと思います。 よろしくお願い致します。

    • 締切済み
    • CSS
  • マウスオーバーの情報が、この画像のように出ます。

    マウスオーバーの情報が、この画像のように出ます。 「・・・よりも大きい」・・って。 なぜ、このようにアバウトなんでしょうか? きっちり、全てのサイズを表示させるには、なにか設定があるのでしょうか? よろしくお願いいたします。

  • CSS マウスオーバーでテキストの上に画像を表示させるには?

    CSS で hover を使い、マウスオーバーするとリンクのテキストの上に画像を持ってくる(テキストが見えない状態にする)方法というのはありますか? background-image を使うとテキストが見えてしまいます・・ マウスオーバーで 画像1→画像2 と表示させる方法はこちらの他の回答で見つけたのですが、テキスト→画像 と表示させる方法は見つかりませんでした。 よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • 画像のホットスポットを使用し、マウスオーバーで近くに新たな画像を表示する方法

    お世話になっております。 ドリームウェーバーで画像に設定可能なホットスポットでマウスオーバーを取得し、それに対応する写真画像を近くにポップアップ表示する方法を探しています。 Java Scriptでの方法になるような気がするのですが、Javaに関しても素人なので、自力では難しく、今回相談させていただきました。 処理の例をあげると、地図の画像があり、その画像上の地名にホットスポットを適用、その地名をマウスオーバーすると近くにその地名の写真画像がポップアップ表示というものが作りたいです。 画像場所を指定したスワップの方法は分かるのですが、地図サイズがが大きいためユーザーのウインドウサイズによって表示場所が見えなくなってしまうことを避けるのが目的です。 よろしくお願い致します。

  • マウスオーバーについて

    ひとつの画像を区切って、区切ったそれぞれの枠(セルでもいい)でマウスオーバーを発生させるのってどうやるんですか。 よくホームページとかで見る、上にあるメニューです。 それを、2枚の画像を使ってやりたいんですけど・・・ また、タグが乗っている 詳しく説明されているホームページ輪ありませんか。 極力スタイルシートは使いたくないです。 また、ついでですが、スタイルシートを使わないでtableの、横だけを消す方法(透明にするか、たてと横で別のいろを指定します)ってないですか。

  • Javascriptのマウスオーバーについて

    Javascriptでマウスオーバーというものがあります。 画像の上にマウスを持っていくと、画像が切り替わるものです。参考:http://www14.plala.or.jp/sugachuu/JavaScript/k06.html そこで、質問なのですが、マウスオーバーのスクリプトを 同じページ内で いくつも表示させるのは可能ですか??(上記参考URLでたとえると、大きな画像1つと小さな画像4つを一まとめにして、一まとめしたものをいくつも同じページ内で表示することは可能ですか??) もし可能なら、そのやり方を教えてください。サンプルソースみたいなのをつけていただくと、うれしいです。 よろしくお願いします。

  • 画像のマウスオーバーの際のズレを直すには

    CSSを用いてマウスオーバーで画像に枠を付けるスタイルを使用したのですが、マウスオーバーした際に枠が出ると同時に画像が少し右下にずれてしまいます。マウスオーバーで枠を表示させながら画像は固定させるという事は出来るのでしょうか?宜しくお願いします。

    • ベストアンサー
    • HTML

専門家に質問してみよう