- ベストアンサー
画像の重なり順について
お世話になります。 Javascriptで、次のことを実現したいと考えています。 １）オンマウスで画像が拡大 ２）拡大画像は別途用意（拡大前と拡大後の２つ用意する） ２）画像クリックで別ページにリンク 自分なりに調べて、z-indexを使った方法が有効だと分かり、 一番シンプルなものは見つけました。↓ http://game.gr.jp/mycom/14/s/c01/sample.htm しかし、これは1つの画像について重なり順を指定しているだけなので ２）のようにオンマウス用に別の画像を用意したい場合はどのように記述 すればよいかわかりません。 Lightboxなど他の方法もあるかと思いますが、できるだけシンプルな JavasciptでjQueryなど使わない方法で準備できたらと思うのですが どなたかお詳しい方、お教えいただけないでしょうか。 よろしくお願いします。
- cafemilk
- お礼率90% (122/135)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
サムネイルと拡大画像が同じ場所にあると、拡大画像で他のサムネイルを隠してしまうことになるので、選択の変更ができないとかユーザビリティが落ちる気もしますが… ソースが何もないので、レイアウトなどは適当だし、あくまでも一例です。（方法はたくさん考えられると思うので） *）FFだと、拡大画像にz-indexを設定しておけばOKなのですが、IEがうまく動いてくれないので、スクリプトで親要素のz-indexを変更しています。 （ちなみにスクリプトはネットのみで覚えた程度です） <html> <head><title>test</title> <style type="text/css"> div.betugazou { position:relative; } #fukidasi { position:absolute; top:30px; left:50px; background:white; } ul.pict { list-style:none; margin:0; padding:0; } ul.pict li { float:left; margin:2px; position:relative; } ul.pict li span { display:none; } ul.pict img { width:50px; height:50px; } ul.pict img.big { position:absolute; width:150px; height:150px; top:0; left:0; border:0; display:none; } </style> <script type="text/javascript"> function func(evt) { var t = evt.target || evt.srcElement; if (t.nodeName != 'IMG') return; var p = t.parentNode; var f = document.getElementById('fukidasi'); while (p.nodeName != 'LI') p = p.parentNode; if (evt.type=='mouseout' && t.className == 'big') { t.style.display = 'none'; p.style.zIndex = ''; f.innerHTML = ''; } else if (evt.type == 'mouseover' && t.className != 'big') { var e = p.getElementsByTagName('IMG'); if (e[1] && e[1].className == 'big') { t = e[1]; p.style.zIndex = 10; t.style.display = 'block'; e = p.getElementsByTagName('SPAN')[0]; if (e) f.innerHTML = e.innerHTML; } } } </script> </head> <body> <div class="betugazou"> <span id="fukidasi"></span> <img src="D.jpg"> </div> <hr> <ul class="pict" onmouseover="func(event)" onmouseout="func(event)"> <li> <img src="A.jpg"> <a href="http://www.yahoo.co.jp/index.html"> <img class="big" src="Abig.jpg"></a> <span>三毛猫</span> </li> <li> <img src="B.jpg"> <a href="http://www.google.co.jp/"> <img class="big" src="Bbig.jpg"></a> <span>アメショー</span> </li> <li> <img src="C.jpg"> <a href="http://infoseek/"> <img class="big" src="Cbig.jpg"></a> <span>マンチカン</span> </li> </ul> </body> </html>
その他の回答 (1)
- tem_stint
- ベストアンサー率0% (0/1)
同じ場所に拡大画像と縮小画像があるなら。。 [style] #neko1 { position:absolute; top:0px; left:0px; display: block; } #neko2 { position:absolute; top:0px; left:0px; display: none; } [html] <div id="neko1"><img src="xx.gif" width="32" height="32" onmouseover= " setTglImages( 'neko2', 'neko1' )"></div> <div id="neko2"><a harf="xx.html"> <img src="xx.gif" width="64" height="64 onmouseout=" setTglImages( 'neko1', 'neko2' )"></a></div> [javascript] function setTglImages( frontImg, backImg ) { var front_img = document.getElementById( frontImg ); var back_img = document.getElementById( backImg ); front_img.style.display = 'block'; back_img.style.display = 'none'; } javaScript OFF の環境ではリンク先に飛べないけれど..。 absolute を使うとCSS OFF の環境では滅茶苦茶になると思うけど..。 （動作未確認）
お礼
回答ありがとうございました！ 質問を締め切ります（＾＾）。
補足
tem_stintさん 拝見しました！なるほど、オンマウス用の画像を非表示にしておいて、オンマウス時に入れ替えるのですね・・・。 動作確認してみます。懸念材料も丁寧にアドバイス助かります。 ただ、ハードルが更にあがってしまい(；´Д`A ```、この挙動プラスでもう1動作加える必要が出てきてしまいました。 うーん、ここまでくるとFLASH使った方が早いかも・・・。 と思いつつ、補足でもう1つ質問よいですか。 ----------------------------------- 画像A、B、Cと3つ横に並べています。 その下に、画像Dがあります。 画像A、B、Cに、それぞれオンマウスしたときの挙動として、次を実現したいです。 １）オンマウスで画像が拡大 ２）拡大画像は別途用意（拡大前と拡大後の２つ用意する） ３）画像クリックで別ページにリンク ↑ここまでは質問と同じです。追加で、 ４）オンマウスで、画像Dも変更される 例えばABCに違う種類の猫の写真があるとして、 Aにオンマウスで「三毛猫」という噴出し（画像D） Bにオンマウスで「アメショー」という噴出し（画像D） Cにオンマウスで「マンチカン」という噴出し（画像D） を連動させたい、という意味なのですが・・・。 おわかりになるでしょうか。 画像Dは実際は3つの画像（D1、D2、D3）がありますが、 画像Aにオンマウスされたときは、「アメショー」「マンチカン」が非表示 でなければなりません。B、Cも同様に「対」で表示させたいと思います。 ----------------------------------- ちなみに、tem_stintさんは「一般人」とありますが、 Javascriptはどのようにして覚えられましたか。 自分でかけるようになりたいのですが、 学ぶコツ、サイト、書籍などオススメがあればなぁ・・・と。 長くなってしまいました。お答え頂ける範囲で構いませんので、 よろしくお願いします！！ また、早速の回答まことにありがとうございました。
お礼
とても丁寧に回答ありがとうございました！ 質問を締め切ります（＾＾）。
補足
fujillinさん 拝見しました！すごいです。ワガママな私の補足まで・・・。 「拡大画像で他のサムネイルを隠してしまうことになる」は、おっしゃるとおりです。 そのあたりを考慮してコーディングをしなきゃなと思っています。 リストを使って並べるあたりも個人的には理想的です。 週末試してみて、改めてお礼に参ります。（ひょっとするとお礼で質問するかもしれません・・・(；´Д`A ``` 検証の上回答いただいたみたいで本当に助かります。 ネットで覚えられるなんて～・・・（＠＠;）！ああ眩しい。 ありがとうございました！