• ベストアンサー

画像の入れ替え

お世話になります。 以下のページでは、FALSHで作成されているのですが、 特定なテキストにマウスをあわせると、 別の場所に表示されていた画像を入れ替えることは JavaScriptで可能ですか? http://messenger.msn.co.jp/ よろしくお願いいたします。

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

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

<img src="hoge1.png" name="imgarea"> <span onMouseOver="imgarea.src='hoge2.png'" onMouseOut="imgarea.src='hoge1.png'">ここにマウスポインタを置くと変わる。離れると戻る。</span> onMouseOver というのは「マウスポインタが画像に乗った時」 onMouseOut というのは「マウスポインタが画像から離れた時」です。 <span>タグにてそれぞれのタイミングで<img>タグのsrc値を切り替えを記述すれば、マウスが乗っている間だけ画像を変更し、離れた時に戻す事が出来ます。 別の場所に表示されている画像と入れ替える場合、'hoge2.png'等のパスではなく、画像名.srcで置き換える事で可能です。

rabu_chihaha
質問者

お礼

ありがとうございます。 できました。

全文を見る
すると、全ての回答が全文表示されます。

その他の回答 (2)

noname#19884
noname#19884
回答No.3

http://sample.sakage.cc/ajax1/test.html やっぱり動くの見た方が解りやすいと想いますので、こんなの作ってみました。 最近はやりのAjaxです。

rabu_chihaha
質問者

お礼

ありがとうございます。 こんなこともできるのですね。 Ajaxなんてぜんぜん知りませんでした。 参考になりました。

全文を見る
すると、全ての回答が全文表示されます。
noname#19884
noname#19884
回答No.1

オンマウスオーバーイベントを使えばマウスをあわせたときにアクションできます。 画像の入れ替え自体は http://himajin.moo.jp/ ここが非常に参考になります。 また、実装の際にはまず 『IE以外のブラウザでの正常動作を確認した後にIEでの動作確認を行う』 ことを推奨します。

rabu_chihaha
質問者

お礼

ありがとうございます。 教えていただいたページは他にも参考になりそうなものが いっぱいで、助かります。

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • 画像の上にマウスが乗ったときに、指定した場所にテキストを表示させる方法!

    画像の上にマウスが乗っている時に、指定した別の場所に、任意のテキストを表示したいのですが、このようなことができるJavaScriptはあるのでしょうか? 例えば、写真集のようなものを作るときに、その写真の上にマウスを合わせると、決まったところに、その説明文がテキストで表示されるようにしたいのです。 もしあるようであれば、ぜひ教えてください。

  • 画像の入れ替え

    簡単なショッピングサイトを作成しています。 色々な色を取り揃えている商品があるのですが、 ページの中央に1枚大きく画像を表示してその下に他の色(約20色)の画像を小さく表示しています。 下の小さい画像をクリックすると中央の大きい画像がクリックされた色にかわるようにしたいです。 色々なサイトを検索してもクリックしたその画像を入れ替える方法は書いてあってもまったく別の画像の入れ替えの方法が見つかりません。 試行錯誤で色々試しているのですが中央の画像が変わらず他の場所にある画像がかわったりとなかなか上手くいきません。 どなかた書き方ご存知の方教えてください。 よろしくお願いします。

  • 画像のランダム表示とリンク、alt属性について

    はじめまして。 検索かけてみましたが、自分の納得が得られる回答が無かったため、質問させていただきました。 ページを更新するごとに画像とテキスト(その画像の作成者などを書きたい)をランダムで表示させ、なおかつ他へリンクし、画像にはALT属性、テキストにはTITLE属性を付けられるJavaScript、もしくは、CGIを探しています。 可能であれば、画像とテキストを別々の場所へリンクしたいと思います。 このようなJavaScript、またはCGIを知っている方、ご教授お願いします。

  • クリックしたらJavaScriptで数カ所に一度に画像を表示させたい

    以下のようなことがJavaScriptでできるでしょうか? できる場合、関数等のヒントをいただけないでしょうか。 webページにおいて、 「画像を表示」というリンク、あるいは同様のボタンをクリックすると、 同ページ内の複数の場所(特定)に、それぞれ指定した画像を一度に表示させる。 よろしくお願いいたします。

  • クリッカブルマップの部分的な画像の入れ替え

    HTMLの頁に大きな一枚の画像を貼り付け、クリッカブルマップで7か所にリンクボタンを作りました。マウスがリンクボタン上に来た時、そのボタンエリアにだけ違う画像を表示したいのですが、どなたかお教え願えないでしょうか?当方javascriptは初心者です。よろしくお願いします。

    • ベストアンサー
    • HTML
  • サムネイルにマウスで画像表示

    HTML勉強中の者です。 5つのサムネイルにマウスをのせると、同一ページの同じ場所(1箇所)にそれぞれの画像を表示させ、マウスが離れると表示を消す方法---(1) とそのまま表示する方法---(2)を教えてください。  (HTMLで可能であればその方が良いのですが、自分が勉強した範囲ではできません。別HTMLリンクならわかりますが・・・) Javascriptなら可能でしょうか? よろしくお願いいたします。

  • 画像の入替について

    ホームページビルダーV8を使用しています。 同一ページにあるサムネイル画像をクリックすると、別の 場所に画像が現れるにはどのように指定したらいいのでし ょうか?

  • 画像クリックにて自分自身を別画像に入れ替えるには?

    ホームページを作成中なのですが、メニュー欄をそれぞれ画像にて表示し、画像クリックにて対象ページに飛ぶようにしております。 このたび、選択されたメニューを識別できるように、クリックされた画像を別画像に入れ替えて表示させようとしています。 onMouseOverやonMouseOut時に一時的に画像を入れ替えるロールオーバーのサンプルはよく見かけますが、できればロールオーバー的なものではなく、onClick時に自分自身の画像を入れ替えし、別の画像がクリックされるまで、ずっと入れ替えた画像を表示しておきたいのです。 JavaScript、CSSなど方法は問いません。 なお、テキストエディタにて作成しています。 どなたかよきアドバイスをお願いいたします。 よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • HTML上の画像にマウスオーバーして、同HTML内にswfを表示させたい

    HTMLページ内のサムネイル画像にマウスオーバーして大きい画像を表示させるJavaScriptがありますが、そういうイメージでswfの表示ができないでしょうか。 マウスオーバーじゃなくて、クリックでもいいのですが、ポップアップウインドウや別ページに表示させるのではなく、サムネイル画像をクリックすると、同一ページのお決まりの場所でswfムービーを表示させたいのです。 表示させるムービーは、音声が流れたり、swf内で数ページクリックして内容が見れるものです。誰か、ご存知の方、いらっしゃいませんか?よろしくお願いします。

    • ベストアンサー
    • Flash
  • ドラッグできる画像

    こんにちは。2回目の質問です。 またJavaScriptについての質問なんですが、 HTMLページに画像が複数あって、マウスで自由にドラッグして好きな場所に配置したいです。これはHPで解説してくれているページを見つけたんですが、ちょっと違います。 どこが違うかというと、画像の重なり具合が調節できないこと。参考までにつぎのHPをみてください。(注:ポップアップの広告が出ます) http://holden.hp.infoseek.co.jp/sample/c_img5.html ここのお地蔵さんは、招き猫の上に表示することはできません。ただしドラッグしている間は別ですが。 このお地蔵さんと招き猫のようにドラッグで移動できて、さらに画像の上下(前後)をマウスクリックで変えるようにするにはどうしたらいいでしょうか? また2つ以上の画像を配置したい場合はどうしたら良いですか? JavaScriptの記述は私が参考に出したHPのもの意外でもかまいません。できればJavaScriptの記述を書いてほしいです。 お願いします。