画像の入れ替え

質問

お世話になります。
以下のページでは、FALSHで作成されているのですが、
特定なテキストにマウスをあわせると、
別の場所に表示されていた画像を入れ替えることは
JavaScriptで可能ですか？

http://messenger.msn.co.jp/

よろしくお願いいたします。

回答No.2

Chronos198 · ベストアンサー

<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で置き換える事で可能です。

お礼

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

回答No.3

noname#19884

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

お礼

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

回答No.1

noname#19884

オンマウスオーバーイベントを使えばマウスをあわせたときにアクションできます。

画像の入れ替え自体は
http://himajin.moo.jp/
ここが非常に参考になります。

また、実装の際にはまず
『IE以外のブラウザでの正常動作を確認した後にIEでの動作確認を行う』
ことを推奨します。

お礼

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