自作の画像でロールオーバーしたいのですが。

質問

自作の画像(gif)を二つ用意して、マウスが乗っていない時の画像を(1.gif )、そしてマウスを乗せた時の画像(2.gif )に切り替わるようにしたいです。そして、クリックすると、リンクが張られていて、新しいウィンドウで開くようにしたいのですが、Java scriptでどのようなソースを記述すれば良いのですか？
初心者なので詳しく教えて頂きたいのですが、どなたか分かる方よろしくお願い致します。

回答No.2

touko1978 · ベストアンサー

これでどうでしょうか？

マウスが乗っていない時の画像＝1.gif
マウスが乗った時の画像＝2.gif
クリックしたときに別ウィンドウで開くHTMLファイル＝a.html
とします。

<a href="a.html" target="_blank"><img onmouseover='this.src="2.gif"' onmouseout='this.src="1.gif"' src="2.gif"></a>

この方法でとりあえずいけると思います。

お礼

ありがとうございました。
このようにすればいいのですね。出来ました。

回答No.3

karumakaruma

＃２さんの方法でも大概のブラウザで動きますが
古いブラウザによっては、<img>タグに
onMouseover,onMouseoutが使えないものもあります。

＃だから<A>タグにonMouseover,onMouseoutを付け、
＃関数を実行する形でimgのsrcを変更する方法を取ります。

回答No.1

karumakaruma

とりあえず、まず聞く事よりも調べる事を
覚えてください。

この掲示板は、確かに質問をすれば回答が返ってくる
というシステムですが、過去に同じ質問で悩んだ人の
質問と回答を共有するという意味もあります。

「ロールオーバー」というキーワードを知ってるので
あれば、そのキーワードで調べてみてください。
上の方に、検索用のテキスト入力欄がありますから
そこにロールオーバーと書いて「教えてボタン」を
押せばOKです。

＃まぁ、これも一つのアドバイスという事で・・

お礼

アドバイスありがとうございます。
結構基本の質問なので、この手の質問は同じものがあると思い、キーワードを入れて質問する前に調べてみました。しかし、通常のロールオーバーではなく、もっと応用のロールオーバーであったり、画像ではなくテキストのロールオーバーであったり、リンクがないものであったり、あるいは、ホームページビルダーでのやり方は載っていたのですが・・・しかし、見落としているかもしれませんし、もっとよく調べてみます。