DIVで同一ページ内にポップアップ可能か？
- 普通ポップアップをするときには別ウィンドウを立ち上げますが、DIVを使ってリンク元があるhtmlに別のhtmlを立ち上げることは可能でしょうか？画像のポップアップを同一ページに立ち上げるポップアップは既に手元にあります。それを立ち上げるのを画像ではなくhtmlにしたいんです。
- JavaScriptを使用して、DIV要素を使った同一ページ内のポップアップを実現することが可能です。具体的には、ポップアップするHTMLコンテンツをDIVで囲み、そのDIV要素の表示・非表示を制御するJavaScript関数を作成します。
- ポップアップの表示は、指定したDIV要素のvisibilityプロパティを'visible'に設定することで行われます。ポップアップを閉じる際には、visibilityプロパティを'hidden'に設定します。また、ポップアップ内のコンテンツを切り替える場合は、JavaScriptを使用して要素の内容を変更します。
- ベストアンサー
DIVで同一ページ内にポップアップってできる？？
普通ポップアップをするときには別ウィンドウを立ち上げますが、DIVを使ってリンク元があるhtmlに別のhtmlを立ち上げることは可能でしょうか？？ 画像のポップアップを同一ページに立ち上げるポップアップは既に手元にあります。 それを立ち上げるのを画像ではなくhtmlにしたいんです。 ----ソース---- 【HTML】 <div id="pWindow" style="position:absolute; visibility:hidden; width:100%; height:100%;"> <table style="width:100%; height:100%;" border="0" cellspacing="0" cellpadding="0"> <tr><td align="center" valign="middle"> <table style=" background-color:#FFF; border:1px solid #000;" border="0" cellspacing="15" cellpadding="0"> <tr><td align="center" valign="middle"> <img src="img/loading.gif" width="400" height="300" id="lPhoto"> </td></tr> <tr><td align="center" valign="middle"> <a href="javascript:cls()"><img src="img/close.gif" width="53" height="17" border="0"></a> </td></tr> </table> </td></tr> </table> </div> 【JavaScript】 //拡大画像を表示する function pwinOpen(imgSrc){ var lgPhoto=document.getElementById('lPhoto'); lgPhoto.src = imgSrc; var pWin=document.getElementById('pWindow'); pWin.style.visibility = 'visible'; } //拡大画像を閉じる function cls(){ var pWin=document.getElementById('pWindow'); pWin.style.visibility = 'hidden'; var lgPhoto=document.getElementById('lPhoto'); lgPhoto.src = "img/loading.gif"; } 分かる方、お忙しいところ申し訳ないんですがご教授ください！！
- ky_riku
- お礼率50% (3/6)
- JavaScript
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
こんばんわぁ、Blackwinglsです。 単純に文章を隠したり表示したりすんじゃぁなくて、htmlファイルを読み込んで表示したり隠したりしたいんですよね？ でしたら、既にky_rikuさんが補足に書かれた内容でＯＫですよ。 JavaScriptは殆ど変更ありません。 //拡大画像を表示する function pwinOpen(imgSrc){ var lgPhoto=document.getElementById('lPhoto'); lgPhoto.src = imgSrc; var pWin=document.getElementById('pWindow'); pWin.style.visibility = 'visible'; } //拡大画像を閉じる function cls(){ var pWin=parent.document.getElementById('pWindow'); pWin.style.visibility = 'hidden'; // var lgPhoto=document.getElementById('lPhoto'); // lgPhoto.src = "img/loading.gif"; } てな感じです。 読み込ませるhtmlファイルは <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>PHOTO GALLERY</title> <script SRC="photowin.js"></script> </head> <body style="background-color:#D8DAE1; margin:0px; padding:0px;"> <img src="img/loading.jpg" width="300" height="200" id="lPhoto"><br> <a href="javascript:cls()">閉じる</a> </body> </html> てな感じ 大本は <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>PHOTO GALLERY</title> <script SRC="photowin.js"></script> </head> <body style="background-color:#D8DAE1;"> <div id="pWindow" style="position:absolute; top:150px; left:85px; visibility:hidden; z-index:1;"> <iframe src="#" width="400" height="300" scrolling="no" id="lPhoto"> </iframe> </div> <div style="position:absolute; top:100px; left:130px; z-index:0;"> <table border="0" cellspacing="20" cellpadding="0" style="background-color:#F3F5FD; border:1px solid #666;"> <tr> <td> <table border="0" cellspacing="7" cellpadding="0"> <tr> <td><a href="javascript:pwinOpen('1.htm')" onFocus="this.blur()"><img src="img/p01s.jpg" width="80" height="60" border="0"></a></td> <td><a href="javascript:pwinOpen('2.htm')" onFocus="this.blur()"><img src="img/p02s.jpg" width="80" height="60" border="0"></a></td> <td><a href="javascript:pwinOpen('3.htm')" onFocus="this.blur()"><img src="img/p03s.jpg" width="80" height="60" border="0"></a></td> </tr> <tr> <td><a href="javascript:pwinOpen('4.htm')" onFocus="this.blur()"><img src="img/p04s.jpg" width="80" height="60" border="0"></a></td> <td><a href="javascript:pwinOpen('5.htm')" onFocus="this.blur()"><img src="img/p05s.jpg" width="80" height="60" border="0"></a></td> <td><a href="javascript:pwinOpen('6.htm')" onFocus="this.blur()"><img src="img/p06s.jpg" width="80" height="60" border="0"></a></td> </tr> <tr> <td><a href="javascript:pwinOpen('7.htm')" onFocus="this.blur()"><img src="img/p07s.jpg" width="80" height="60" border="0"></a></td> <td><a href="javascript:pwinOpen('8.htm')" onFocus="this.blur()"><img src="img/p08s.jpg" width="80" height="60" border="0"></a></td> <td><a href="javascript:pwinOpen('9.htm')" onFocus="this.blur()"><img src="img/p09s.jpg" width="80" height="60" border="0"></a></td> </tr> <tr> <td><a href="javascript:pwinOpen('10.htm')" onFocus="this.blur()"><img src="img/p10s.jpg" width="80" height="60" border="0"></a></td> <td><a href="javascript:pwinOpen('11.htm')" onFocus="this.blur()"><img src="img/p11s.jpg" width="80" height="60" border="0"></a></td> <td><a href="javascript:pwinOpen('12.htm')" onFocus="this.blur()"><img src="img/p12s.jpg" width="80" height="60" border="0"></a></td> </tr> <tr> <td><a href="javascript:pwinOpen('13.htm')" onFocus="this.blur()"><img src="img/p13s.jpg" width="80" height="60" border="0"></a></td> <td><a href="javascript:pwinOpen('14.htm')" onFocus="this.blur()"><img src="img/p14s.jpg" width="80" height="60" border="0"></a></td> <td><a href="javascript:pwinOpen('15.htm')" onFocus="this.blur()"><img src="img/p15s.jpg" width="80" height="60" border="0"></a></td> </tr> <tr align="center" valign="bottom"> <td height="30" colspan="3"><img src="img/title.gif" width="219" height="15"></td> </tr> </table> </td> </tr> </table> </div> </body> </html> てな感じ 表示位置とかは親要素に対しての相対位置でもいいかも知れないっす。 あとiframeはStyleSheetで適当に装飾すればOKかな。 という事で、殆ど手直しらしい直しはナシなんですが・・・・(^^;) ky_rikuさんの実力をもってすればチョロイかもぉ。 ではでは～☆彡
その他の回答 (1)
- Blackwingls
- ベストアンサー率44% (138/313)
こんばんわぁ、Blackwinglsです。 インラインフレームとかでやってみるのはどうでしょうか？ ではでは～☆ミ
補足
インラインフレームをDIVで囲んでposition:absoluteで絶対配置にしてCSSで非表示にする。 その上でJavaScriptでインラインのDIVを表示させて、htmlをインラインに読み込ませる。 で、またJavaScriptで閉じさせるということですか？？ その場合は、JavaScriptの記述はどうなりますか？？ なんか色々細かくてすいません・・・ CSSなんかはCSSデザインある程度できるまで覚えてきたんだけど、JavaScriptは難しくて・・・・・
関連するQ&A
- ページ上部にスペースが空いてしまう・・・
今ショッピングモールに出店するために素人ながらページを作っているんですが、ヘッダーの部分の上にスペースがどうしても空いてしまっていていて、修復できません・・・・。モールの方に聞いてみたところ「閉じるタグが抜けている・・」等の答えが返ってきたのですが、それ以上は教えてくれませんでした。。いろいろ調べてみたのですが、どうしても分かりません。。どうかよろしくお願いいたします。 ↓まだ作成途中なので変な箇所があるかもしれません・・。 <table class="head" bouder> <tr> <td class="head"> <img src="gazou" width=600 height=130 alt=""> <tr> <tr align="right"valign="middle"><br> <tr> <td width="713" height="35"> <table width="0" border="0" cellpadding="0"> <tr><td width="32%"><img src="gazou" width="200" height="8"></td> <td width="0%"><a href="～.html"><img src="gazou" width="108" height="25"border="0"></td> <td width="16%"><a href="～html"><img src="gazou" width="107" height="27"border="0"></td> <td width="16%"><a href="～html"><img src="/lib/shidagoromo/puraa" width="108" height="27"border="0"></td> <td width="16%"><a href="～.html"><img src="gazou" width="107" height="27" border="0"></td> <td width="20%"><img src="gazou" width="107" height="28"border="0"></td> </tr> </table> </td> </tr> よろしくお願いします。
- ベストアンサー
- HTML
- IE セル間に隙間が・・・
HTML初心者です。 テーブルでHPをレイアウトしたいのですが、--1と--3のセル間に微妙な隙間ができてしまいます。NNでは問題なく表示されます。通常どの様なことが原因するのでしょうか？よろしくお願いいたします。 <td width="396" height="234"valign="top"><table width="100%" height="234" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="180" rowspan="2" valign="bottom" >1 <img src="../image/***" width="180" height="180" align="bottom"></td> ------1 <td width="216" height="98" valign="bottom">***</td> </tr> <tr> <td height="136" valign="bottom" ><img src="../image/*** width="91" height="61" border="1"><br>></td> </tr> </table></td> <td width="10" rowspan="3" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td height="262"></td> ------３ <td valign="top" >*** <br> </td>
- ベストアンサー
- HTML
- 同じ<table align="center">を用いていますが、セルの中身の行揃えが代わってしまいます。
どちらも<table align="center">を用いています。 ですが、タグ１は特にセルの位置を指定せずとも、セルの中身が自動的に左詰めになりますが タグ２のセルの中身は、中央ぞろえになってしまいます。 タグ１のように、<table align="center">を用い、セルを左詰め指定（<align="left">）をせずとも なぜセルの中身が左詰めになるのか分かりません。。。 -------------タグ１------------- <table width="600" border="0" align="center" cellpadding="0" cellspacing="5"> <tr> <td width="10"><img src="img/concept_title.gif" width="10" height="30"></td> <td><img src="img/concept_title01.gif" alt="テキスト" width="127" height="16"></td> </tr> <tr> <td width="10"> </td> <td class="t01">テキスト</td> </tr> </table> ------------------------------ -------------タグ２------------- <table width="640" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td width="3" rowspan="2" valign="top"><img src="image/grade_line.gif" width="3" height="177" /></td> <td width="8" valign="bottom"><img src="image/grade_line30.gif" width="20" height="2" /></td> <td width="368"><img src="image/kisyo/01t.gif" width="368" height="32" /></td> <td align="left" valign="bottom"><img src="image/grade_line_right.gif" width="42" height="2" /></td> </tr> <tr> <td> </td> <td height="145" align="left">テキスト <td rowspan="2"><img src="image/kisyo/01_ph.jpg" alt="井戸" width="200" height="139" /></td> </tr> <tr> <td valign="top"><img src="image/grade_line_bottom02.gif" /></td> <td> </td> <td> </td> </tr> </table> ------------------------------ 初心者的な質問・タグで恐れ入りますが、ご助力頂けますと幸いです。 宜しくお願い致します。
- ベストアンサー
- HTML
- 助けてください＞＜IE上で1pxのズレ
こんにちわ。 組んだテーブルに謎の１ｐｘがはいってしまいます。 ファイヤーフォックスでは正常なのですがIEでは1pxの隙間ができてしまうようで。 どなたか分かる方いらっしゃたらお願いします＞＜ <table width="660" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="2" valign="top"> <img src="img/test_01.jpg" width="660" height="177" alt=""></td> </tr> <tr><td rowspan="2" valign="top"> <table width="316" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="2"> <img src="img/test_02.jpg" width="316" height="46" alt=""></td> </tr> <tr> <td> <img src="img/test_05.jpg" width="144" height="47" alt=""></td> <td> <img src="img/test_06.jpg" width="172" height="47" alt=""></td> </tr> <tr> <td colspan="2"> <img src="img/test_08.jpg" width="316" height="169" alt=""></td> </tr> </table> </td></tr> <tr><td valign="top"> <table width="344" border="0" cellpadding="0" cellspacing="0"> <tr><td> <table width="344" border="0" cellpadding="0" cellspacing="0"> <tr> <td> <img src="img/test_03.jpg" width="181" height="62" alt=""></td> <td> <img src="img/test_04.jpg" width="163" height="62" alt=""></td> </tr> <tr> <td colspan="2"> <img src="img/test_07.jpg" width="344" height="83" alt=""></td> </tr> </table> </td></tr> <tr><td> <table width="344" border="0" cellpadding="0" cellspacing="0"> <tr> <td> <img src="img/test_09.jpg" width="160" height="62" alt=""></td> <td> <img src="img/test_10.jpg" width="184" height="62" alt=""></td> </tr> <tr> <td colspan="2"> <img src="img/test_11.jpg" width="344" height="23" alt=""></td> </tr> <tr> <td> <img src="img/test_12.jpg" width="160" height="32" alt=""></td> <td> <img src="img/test_13.jpg" width="184" height="32" alt=""></td> </tr> </table> </td></tr> </table> </td></tr> <tr><td colspan="2"> <table width="660" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="5"> <img src="img/test_14.jpg" width="660" height="141" alt=""></td> </tr> <tr> <td> <img src="img/test_15.jpg" width="130" height="150" alt=""></td> <td> <img src="img/test_16.jpg" width="130" height="150" alt=""></td> <td> <img src="img/test_17.jpg" width="140" height="150" alt=""></td> <td> <img src="img/test_18.jpg" width="130" height="150" alt=""></td> <td> <img src="img/test_19.jpg" width="130" height="150" alt=""></td> </tr> <tr> <td colspan="5"> <img src="img/test_20.jpg" width="660" height="40" alt=""></td> </tr> </table> </td></tr> </table>
- 締切済み
- HTML
- Divの幅指定を無視して子テーブルの幅に合わせて全体が伸びてしまいます
はじめて投稿します。 下のHTMLを表示したとき、menuの部分が狭くなった上に画面自体のスクロールバーが出て横に広がってしまいます。 赤色のテーブルをウィンドウいっぱいに広げた状態で、オレンジ色のテーブルを囲むDIVタグを赤色のテーブルの80%にしたいのです。 オレンジ色テーブルのwidthの80%になっているとか？ でも、オレンジ色のテーブルのwidthがウィンドウに収まるような値なら、意図する表示になるのですが・・・。 どう直したらいいのでしょうか。 <html> <script> function hoge(){ document.getElementById("s1").innerText = "t1=" + document.getElementById("t1").offsetWidth + "*" + document.getElementById("t1").offsetHeight + ",d1=" + document.getElementById("d1").offsetWidth + "*" + document.getElementById("d1").offsetHeight + ",t2=" + document.getElementById("t2").offsetWidth + "*" + document.getElementById("t2").offsetHeight + ",d2=" + document.getElementById("d2").offsetWidth + "*" + document.getElementById("d2").offsetHeight + ",t3=" + document.getElementById("t3").offsetWidth + "*" + document.getElementById("t3").offsetHeight; } </script> <body onload="hoge()"> <span id="s1"></span> <table width="100%" height="95%" border="1" style="background-color:red;" id="t1"> <tr> <td valign="top" width="200px">menu</td> <td valign="top"> <div style="background-color:yellow" id="d1"> <table border="1" style="background-color:blue" width="90%" height="100%" id="t2"> <tr><td>hoge1</td></tr> <tr><td>hoge2</td></tr> <tr> <td> <div style="background-color:pink;overflow:auto;height:80%;width:80%" id="d2"> <table id="t3" width="3250" height="500" style="background-color:orange"> <tr> <td>hoge3</td> </tr> </table> </div> </td> </tr> </table> </div> </td> </tr> </table> </body> </html>
- 締切済み
- HTML
- テーブルを作ったんですが…
はじめまして 画像テーブルを作ったのですが、スクロールバーがでません。 タグを載せておきますので暇でしたら解答してください。 <style TYPE="text/css"> <!--.auto {border:solid;height:450pt;width:500pt;overflow:auto;}--> </style> <TABLE align="left" width="500" cellpadding="0" cellspacing="0" border="0"> <TBODY> <TR> <TD width="420" height="27"><IMG src="01.gif" width="42" height="27" border="0"></TD> <TD background="02.gif"></TD> <TD width="0" height="0"><IMG src="03.gif" width="40" height="27" border="0"></TD> </TR> <TR align="left"> <TD background="04.gif"></TD> <TD width="100%" height="350" bgcolor="white"><pre>テスト<BR> </TD> <TD background="06.gif"></TD> </TR> <TR> <TD width="416" height="25"><IMG src="07.gif" width="42" height="46" border="0"></TD> <TD background="08.gif"></TD> <TD width="0" height="0"><IMG src="09.gif" width="40" height="46" border="0"></TD> </TR> </TBODY> </TABLE>
- ベストアンサー
- その他（インターネット・Webサービス）
- ビルダー9 表の枠（罫線？空白？）を完全になくすには？
会社のHPを作っています。 下記のタグを見て頂くとわかると思うのですが、 一番大きい画像と、その右の画像の間に細い線が入ってしまっています。 （ファイル名は消してあります） 最初は上下にも入っていたのですが、それはどうにか消すことができました。 （どうやったか覚えてないですけど） この線をないものとすることはできますか？ 周りに詳しい人がいなくて、ほんっっとうに困ってます！助けてください(T_T) <TABLE width="785" cellspacing="0" cellpadding="0"> <TBODY> <TR align="left" bgcolor="#ffffff"> <TD colspan="4" rowspan="3" width="691" height="73"><IMG src="" width="691" height="76" border="0"></TD> <TD colspan="2" width="77"><IMG src="" width="94" height="19" border="0" hspace="0" vspace="0"></TD> </TR> <TR> <TD colspan="2" width="77"><IMG src="" width="94" height="20" border="0" hspace="0" vspace="0"></TD> </TR> <TR> <TD colspan="2" width="77"><IMG src="" width="94" height="37" border="0" hspace="0" vspace="0"></TD> </TR> <TR> <TD colspan="6" height="18"><IMG src="" width="84" height="21" border="0"><IMG src="" width="130" height="21" border="0"><IMG src="" width="156" height="21" border="0"><IMG src="" width="126" height="21" border="0"><IMG src="" width="114" height="21" border="0"><IMG src="" width="175" height="21" border="0"></TD> </TR> </TBODY> </TABLE>
- ベストアンサー
- ホームページ作成ソフト
- テーブル高さ指定タグについて
テーブル高さ指定タグについて サイズがバラバラの４枚の画像をテーブルを使って同じ幅・高さ縦横各２枚並べて表示したいと思っています。 下記のとおり高さ・幅300と指定をしているにもかかわらず、400×400pixの画像が高さを超えて目いっぱい表示してしまいます。 <table border="1" width="600" height="600" cellspacing="0" cellpadding="0"> <tr> <td width="300" height="300" align="center"> <IMG border="0" src="http://○○○○/f000000_1.jpg"></td> <td width="300" height="300" align="center"> <IMG border="0" src="http://○○○○/f000000_2.jpg"></td> </tr> <tr> <td width="300" height="300" align="center"> <IMG border="0" src="http://○○○○/f000000_3.jpg"></td> <td width="300" height="300" align="center"> <IMG border="0" src="http://○○○○/f000000_4.jpg"></td> </tr> </table> どうすれば、すべて300×300pixの範囲内におさめることができるのでしょうか？
- ベストアンサー
- HTML
- オンマウスで画像と文字を同時に任意の位置に表示したい
絵を閲覧するページで以下のようにしたいです。 1.リンク文字の上にマウスを置く 2.任意の位置に『画像』とその画像の下に『文章』が同時に表示される （何も記載されていない位置に表示されるようにしたいです） 3.マウスを離したら最後に表示したものが消えずにそのまま 画像だけ表示は一応できましたが、 文字と同時にというのはわかりませんでした。 それと何もないところに表示するのができませんでした。 以下、作ったソースです。 <SCRIPT TYPE="text/javascript"> <!-- if (document.images) { var img0 = new Image(); img0.src = "gallery/0.png"; var img1 = new Image(); img1.src = "gallery/1.png"; var img2 = new Image(); img2.src = "gallery/2.png"; } function On(name) { if (document.images) { document.images['def'].src = eval(name + '.src'); } } // --> </SCRIPT> <!-- ↓ここからBODY --> <Table Border="0" Cellspacing="0" align="center" Width="907" style="line-height:18px;"> <Tr><Td Valign="top"> <Table Border="0" Width="300" Cellspacing="0" style="line-height:18px;"> <Tr><Td ColSpan="2"><Font Size="2"> イラスト </Td></Tr> <Tr><Td Width="10"> </Td><Td><Font Size="2"> <A HREF="gallery/0.png" onMouseOver="On('img0')">作品１</A><BR> <A HREF="gallery/1.png" onMouseOver="On('img1')">作品２</A><BR> <A HREF="gallery/2.png" onMouseOver="On('img2')">作品３</A><BR> </Td></Tr> </Table> </Td> <Td Width="500" Valign="top"> <IMG SRC="" NAME="def"> </Td></Tr> </Table> <!-- ↑ここまでBODY --> 作品を追加していく形式のページなので、 なるべくシンプルなソースでお願いします。
- 締切済み
- JavaScript
- ハーボットのフレーム。
某サイトでハーボットのフレームの枠を配っていたので つけようと思ってやっていましたが、 枠は出来たのですがその中にハーボット本体を入れることが どうしても出来ないんですけどどうやっていれるのでしょうか？ 因みにhtmlは。 <TABLE width="142" cellpadding="0" cellspacing="0" border="0"> <TBODY> <TR> <TD rowspan="3" width="14" height="245"><IMG src="***/habwaku02.gif" width="9" height="247" border="0"></TD> <TD width="125"><IMG src="***/habwaku01.gif" width="127" height="37" border="0"></TD> <TD rowspan="3" width="6" height="245"><IMG src="***/habwaku03.gif" width="9" height="247" border="0"></TD> </TR> <TR> <TD width="125" align="center"><IMG src="***/hw1.gif" width="125" height="199" border="0"></TD> </TR> <TR> <TD width="125"><IMG src="***/habwaku04.gif" width="127" height="9" border="0"></TD> </TR> </TBODY> </TABLE> で=***/habwaku0*.gifの部分は全てうまく画像が出来ました。 あとはここに画像URLを入れるだけとなっていましたが 入れ方を教えてください。
- ベストアンサー
- フリーウェア・フリーソフト
お礼
完璧でした。素晴らしいです！！ ありがとうございました！！やっとこれで続きが作れるようになる（笑）