- 締切済み
OnMouseOverで画像のサムネイルを別レイヤーに書き出したい
こんにちは。 今、HPで写真公開ページを作っています。 写真へのリンクをクリックすると別ウィンドウで表示するようにしたいのですが、それに加え、マウスをそのリンクの上にもってきたら、ページの特定の領域に小さなサムネイルがプレビューとして表示できるようにしたいです。 なお、サムネイルのファイルはあらかじめサイズを変更して、別ファイルで作っておいてもいいです。 onMouseOverでJavascriptの関数を呼び出して、その関数で、別レイヤーを書き出す(document.write("<div id="preview1">..(中略)...");とすれば良いのかなと思いましたが、うまくいきません。 どなたか、アドバイスいただけますか？ もしくは、いいチュートリアルのサイトなど、教えていただけませんか？
- Sawara13
- お礼率48% (46/94)
- JavaScript
- 回答数2
- ありがとう数0
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- todo36
- ベストアンサー率58% (728/1234)
<body> <a href="a.html" onmouseover="document.imgpreview.src='a.gif'" onmouseout="document.imgpreview.src='null.gif'" >写真集A</a> <a href="b.html" onmouseover="document.imgpreview.src='b.gif'" onmouseout="document.imgpreview.src='null.gif'" >写真集B</a> <br> <img name="imgpreview" src="null.gif" width=100 height=100> </body> こんな感じで行けると思ったのですが、私の勘違い？
- todo36
- ベストアンサー率58% (728/1234)
imgタグのsrcを動的に変えればいいでしょう。
補足
アドバイスありがとうございます。 参考URLの、「マウスを乗せると絵が変わる」ですよね？ ただ、このサンプルでは、onMouseOverイベントは<a>エレメントにセットされていますね。 で、<a>エレメントの上(？)のイメージを切替える、ということでしょうか。 私がやりたかったのは、ここで<a>エレメントにマウスを載せると、別の場所、ここでは別レイヤーに画像を書き換えることなんですが。 あ、あらかじめレイヤーを作っておいて、そこにデフォルトの<img>エレメントを書いておけばいいのかな？
補足
ありがとうございます！ えっと、それで、レイヤーはどこですか？ すみません、あまりよく分からなくて... 動的にレイヤーを書けるといいな、と思ったのですが...