- ベストアンサー
画像の重なり順について
お世話になります。 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はどのようにして覚えられましたか。 自分でかけるようになりたいのですが、 学ぶコツ、サイト、書籍などオススメがあればなぁ・・・と。 長くなってしまいました。お答え頂ける範囲で構いませんので、 よろしくお願いします！！ また、早速の回答まことにありがとうございました。
関連するQ&A
- LightBoxなどで画像サイズが指定したい
PHPでコードを書いています。 画像をクリックすると、拡大表示されるようにしたいのでLightBox(JQuery版）で作りました。 ↓↓↓これ http://leandrovieira.com/projects/jquery/lightbox/ しかし、画像サイズが1MBを超えると画像の表示サイズが大きすぎて、 スクロールバーが出ます。 画像サイズをWindowサイズくらいにしたいのですが、 拡大表示される画像サイズをカスタマイズ出来るライブラリはないでしょういか。 そもそもの画像サイズを小さくするという方法もありますが、 今回はそれは抜きにして考えています。 LightBoxでなくてもいいのですが、他の名前がわからなくて、調べきれませんでした。
- ベストアンサー
- JavaScript
- ページ横スクロールでjQuery lightBox
横に長いwebページを作っています。 ページの途中でjQuery lightBox plugin （http://leandrovieira.com/projects/jquery/lightbox/） を使って拡大画像を表示させたいのですが、 サムネイルをクリックすると、ページのはじめの方に拡大画像が表示されてしまいます。（拡大時の背景のオーバーレイもずれている） これを、サムネイルのあるページ上に表示させるようにしたいのですが、javascriptがよくわからないので、どのように修正したらよいか教えていただけないでしょうか。
- ベストアンサー
- JavaScript
- jQuery版のlightbox.jsについての質問です。
jQuery版のlightbox.jsについての質問です。 配布元：http://leandrovieira.com/projects/jquery/lightbox/ お客さまから、1つの画像から複数の拡大画像にリンクさせたいという要望があって困っています。 a要素に「lightbox」というclassが指定されているとlightboxが動くようになっており、 お客様の方で下記のソースコードで一応実現できているようなのですが バリデータでエラーがあるのでもっと良いやり方はないか、というご要望です。 <a href="拡大画像1" class="lightox"><img src="縮小画像1"></a> <a href="拡大画像2" class="lightox"></a> <a href="拡大画像3" class="lightox"></a> 上記のソースで、縮小画像1をクリックすると拡大画像1に「next」が付いて次の拡大画像も表示出来るようになりますが、1つ目以外のa要素が当然空になるので文法上よくない状態です。 文法もおかしくなく、1つの縮小画像から複数の拡大画像を表示していくことは可能でしょうか。 JavaScriptに詳しい方、方法をご存じの方がいらっしゃいましたら、教えていただけるとありがたいです。 よろしくお願いいたします。
- 締切済み
- JavaScript
- 画像の重なりの順序を代える方法を教えてください。
画像の重なりの順序を代える方法を教えてください。 HTML <IMGで複数の画像を表示し、重なった部分があります。 INPUTボタンなどでJavaScriptを起動し、JavaScriptで背面にある画像を前面に表示 する方法を教えてください。 画像1：背面 画像2：前面 ↓ ボタンAをクリック ↓ 画像1：前面 画像2：背面 ↓ ボタンBをクリック ↓ 画像1：背面 画像2：前面 サンプルなどがあれば助かります。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
- Lightbox Plusで
http://serennz.sakura.ne.jp/toybox/lightbox/?ja こちらのものを設置して、動作までは何とかこぎつけました。 ところが一つ困ったことがあります。 画像をクリックして拡大表示したときに、下のところに説明として一文つけたいのです。 そうするためには、リンクタグのところに「title=""」を付け足すと 拡大した画像の下にそれが表示されるのですが、 このタグはオンマウスでも表示されてしまいますよね。 これがちょっと鬱陶しく感じるし、改行も付けているのでみっともないんです・・・。 例えば画像にオンマウスした時に＜BR＞山頂です！＜BR＞ などとタグまでそのままポップアップしてしまうんです。 こうならないようにする方法ってないでしょうか？ご存知の方がいましたら助けてくださいm(__)m
- ベストアンサー
- JavaScript
- オンマウスで、画像切り替え＋別箇所の画像も同時に切り替えられのでしょうか？
お世話になっております。 もしJavascriptのカテゴリーと違うものでしたらすみません。 オンマウスにて画像を切り替えるJavascriptがあるのは存じておりますが、 オンマウス時にそのような画像切り替えをすると同時に 別部分にある画像エリアの画像、（もしくはHTML）も切り替える事は可能なのでしょうか。 別々に切り替え設定をすることは出来そうですが、同時に切り替えが出来るものなのかと思いまして、今回質問させて頂きました。 何ぶんよくわかっていないもので説明不足な点も多いかと思いますが、何卒宜しくお願い致します。
- ベストアンサー
- JavaScript
- javascript 画像のワイプ表示
javascript(特にjquery)を用いて画像ファイルをPowerPointのアニメーションにある「ワイプ」(オブジェクト端から特定方向にフェード表示)のように表示させる方法を探しています。 CSSで画像のwidthを0にしてanimate()で100%に拡大する方法だとあまりきれいなワイプにならず、さらにheightも拡大されてしまうため1点から拡大したようになり、思っているアニメーションと異なります。 何か方法を伝授していただければ幸いです。
- 締切済み
- JavaScript
- jQuery版のlightbox.jsのカスタマイズについて質問です。
jQuery版のlightbox.jsのカスタマイズについて質問です。 やりたいことは下記の2点です。 1.「prev」や「next」をhover時ではなく絶えず出ているようにする。 2.任意でグルーピングをする。 使用したjQuery版lightbox.jsは下記のサイトからダウンロードしました。 jQuery lightBox plugin http://leandrovieira.com/projects/jquery/lightbox/ JavaScriptに詳しい方、方法をご存じの方がいらっしゃいましたら 教えていただきたいです。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
- jQuery LightBox Plugin動かず
複数の画像をLightBoxで表示したくて http://shanabrian.com/web/library/jlightbox.php#option のページ参考にテストしてみました。紹介されてるダウンロードページからデータを取得し、 解凍後、css、images、jsディレクトリを適用するファイルと同じディレクトリに設置しました。 そしてJavaScriptおよびCSSをhead内にコピーし a要素にrel="lightbox"を追加 これで完了のはずですが、しかし動作しません。 画像のページが開いてしまいます。なぜ動かないのでしょうか？ <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>テスト</title> <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script> <script type="text/javascript"> $(function() { $('#gallery a').lightBox(); }); </script> </head> <body> <a href="images/sample1.jpg" rel="lightbox"><img src="photos/image1.jpg" width="200" height="300"></a> <a href="images/sample2.jpg" rel="lightbox"><img src="photos/image2.jpg" width="200" height="300"></a> <a href="images/sample3.jpg" rel="lightbox"><img src="photos/image3.jpg" width="200" height="300"></a> </body> </html> お願いします。
- ベストアンサー
- JavaScript
- オンクリックで画像とテキストの指定位置表示について
フレームを使用してサムネイルをクリックしてメイン部分に拡大画像を表示しています。 また同時に、メインページにおいて、画像表示ごとに「次の画像」「前の画像」「TOPに戻る」リンクを張っています。 この場合、メインに表示させるhtmlファイルを画像枚数分作成する必要があります。 そこでこれをノーフレーム版で、かつ１枚のhtmlシートで作れればいいのですが、javascriptの変数(?)などを使って可能でしょうか。 画像は100枚くらい存在するものとし、ファイルNoにより区分しています。 なお当方javascriptの知識はありません。 これに類するもので lightbox Plus （lightboxの拡張版） http://serennz.sakura.ne.jp/toybox/lightbox/ があって、画像内にページ送りのアイコンが表示されるようになっていてこれでもいいのですが、このアイコンの表示が画像表示のあと少しタイムラグがあるため、javascript等で作れないものかと考えてます。 よろしくお願いします。
- ベストアンサー
- JavaScript
お礼
とても丁寧に回答ありがとうございました！ 質問を締め切ります（＾＾）。
補足
fujillinさん 拝見しました！すごいです。ワガママな私の補足まで・・・。 「拡大画像で他のサムネイルを隠してしまうことになる」は、おっしゃるとおりです。 そのあたりを考慮してコーディングをしなきゃなと思っています。 リストを使って並べるあたりも個人的には理想的です。 週末試してみて、改めてお礼に参ります。（ひょっとするとお礼で質問するかもしれません・・・(；´Д`A ``` 検証の上回答いただいたみたいで本当に助かります。 ネットで覚えられるなんて～・・・（＠＠;）！ああ眩しい。 ありがとうございました！