- ベストアンサー
ウェブサイトのポップアップのようなものについて
現在ホームページを作成していて、実現したい機能があるのですが、実装どころか機能の名称すらわからないため、質問させていただきます。 【実装したい物】 作りたいのは、リンクをクリックした際に、現在開いているページの上にパネルのようなものを表示し、そこに詳細な情報を表示するというものです。 たとえばAmazonで商品写真をクリックした際などに拡大写真用のパネルが表示されるようになっていますが、やりたい事のイメージとしてはあんな感じです。 【質問】 上記の機能に名称などはあるのでしょうか？ そして、実現するには何が必要なのでしょうか？ ご存知の方がいらっしゃいましたら、ご教授お願いします。
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
javascriptで「見えていない要素をクリックやマウスオーバーで見えるようにする。」ということです。 写真だけでよければ「Lightbox」という既製品が一番簡単。 http://news.mynavi.jp/articles/2007/06/14/lightbox/index.html 手作りなら、こんな感じで。 <script language="JavaScript"> function VIS(name){ document.all(name).style.visibility="visible"; document.layers[name].visibility="visible"; } function HID(name){ document.all(name).style.visibility="hidden"; document.layers[name].visibility="hidden"; } </Script> <body> 画像にマウスを当てると別の要素が現れます。 <hr> <center> <a href="javascript:void(0)" onMouseover="VIS('L1')" onMouseout="HID('L1')"><img src="redcube.gif" border=0 align=middle></a> <span id="L1" style="position:relative;visibility:hidden"> これは赤い正方形です。 </span><br> <a href="javascript:void(0)" onMouseover="VIS('L2')" onMouseout="HID('L2')"><img src="bluecube.gif" border=0 align=middle></a> <span id="L2" style="position:relative;visibility:hidden"> これは青い正方形です。 </span> </body>
お礼
ライブラリの紹介だけでなく、サンプルコードまでありがとうございます。 実はやりたかったこととしては画像ではなくHTMLファイルの表示だったのですが、提示していただいたサンプルで十分ヒントになりました。 参考にさせていただきます。