• 締切済み

インラインフレームの下にあるリンクをクリックする方法

インラインフレームの下にあるリンクをクリックする方法 allowtransparency="true"なiframeが画面いっぱいに広がっているとします。iframeの中の要素はiframeの領域より大分狭く、その他のほとんどの領域が透明です。iframeにオーバーレイされている大元のページを操作できるようにすることはできますでしょうか?リンクをクリックするなどです。下記に簡単なページの構造を記します。 <body>  <a>be hopefully clicked</a>  <iframe src='overlaying_contents.html' style="with: 1024px; height: 400px;" allowtransparency="true">   :   <div>small main contents here</div>  </iframe> </body>

  • HTML
  • 回答数1
  • ありがとう数13

みんなの回答

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.1

z-indexで前後を指定する。 もしくは、 <div strle="position:relative">  <iframe></iframe>  <p strle="position:relative;top:-400px"><a href="[URL]">リンク</a></p> </p> とする。

関連するQ&A

  • インラインフレームの縦幅を、ブラウザ・画面・解像度に合わせて、自動的に調節させたいけど、IEとOperaで上手くいきません;;

    現在ホームページを制作中で、初めてインラインフレームを使って制作しています。 まず下記のように、インラインフレームのみで試してみたら、IE7・Opera・FireFox・GoogleChromeで上手く自動的に調節できました。 <html> <head> </head> <body> <div> <iframe src="frame_test.html" allowtransparency="true" frameborder="0" width="600" height="80%"></iframe> </div> </body> </html> 次に、インラインフレームの周りに、下記のように画像やリンクバナーなどを配置させました。 <html> <head> </head> <body> <div><img src="" width="50" height="600"></div> <div><img src="" width="150" height="600"></div> <div> <iframe src="frame_test.html" allowtransparency="true" frameborder="0" width="600" height="80%"></iframe> </div> </body> </html> これも予定通り、IE7・Opera・FireFox・GoogleChromeで上手く自動的に調節できました。 次に、下記のようにそれぞれをフロートさせて配置させてみました。 <html> <head> </head> <body> <div style="float:left;"><img src="" width="50" height="600"></div> <div style="float:left;"><img src="" width="150" height="600"></div> <div style="float:left;"> <iframe src="frame_test.html" allowtransparency="true" frameborder="0" width="600" height="80%"></iframe> </div> </body> </html> すると、FireFox・GoogleChromeでは上手くいったのですが、IE7・Operaでインラインフレームの縦幅が100pxくらいに短くなってしまい、調節もできなくなってしまいました。 それぞれを配置させるのにフロートは必要なので、どうすればよいか分からなくて困っています。 何が原因で、どうすれば上手くいくか分かる方、どうかアドバイスをお願いします。

  • インラインフレームを使用するとIE6でレイアウトが崩れます。

    インラインフレームを使用するとIE6でレイアウトが崩れます。 2カラム、左メニューのwebページを作っているのですが、 インラインフレームを使用したページのみ、IE6でレイアウト崩れがおこります。 css********************** #box { width:800px; } #main { width: 605px; margin: 5px; float: right; } #menu { width:180px; margin: 5px; float: left; } iframe.member { width: 595px; height: 700px; border-left: solid 5px #000000; border-right: solid 5px #000000; border-bottom: solid 5px #000000; margin-top: 0px; margin-right: 5px; } HTML********************* <body>  ・  ・  ・ <div id="box"> <div id="main"> <img src="***.gif" title="見出し画像"> <iframe src="***.html" frameborder="0" class="member"></iframe> </div> <div id="menu"> メニュー </div> <!-- #boxここまで --></div>  ・  ・  ・ </body> ************************ boxのなかにmain(右回り込み)とmenu(左回り込み)で2カラムにしています。 mainのなかに、mainの幅と同等となるインラインフレームを配置したいのですが 上記のようにするとmenuが回り込まず、mainの左下に表示されます。 iframe.memberを使用せず、ほぼ同等のdiv(下記#contents)を切り テキストのページをつくった場合はきれいに回り込みます。 css********************* #contents { padding: 15px; width: 565px; border-left: solid 5px #000000; border-right: solid 5px #000000; border-bottom: solid 5px #000000; margin-top: 0px; margin-right: 5px; } HTML********************* <body>  ・  ・  ・ <div id="box"> <div id="main"> <img src="***.gif" title="見出し画像"> <div id="contents"> テキスト テキスト </div> <div id="menu"> メニュー </div>  ・  ・  ・ </body> ************************ 一度インラインフレームを設置したページからインラインフレームを削除しても divの幅をせばめてみるなどのテストをしても カラム落ち?は直らないという謎の状況です・・・ 他のサイトを同じようなCSSで作ったときには、 インラインフレームを使用してもIE6で問題なく表示されたので 今回のエラー? バグ? がなぜおこっているのか見当もつきません。 状況を上手く説明出来てないかもしれませんが、 アドバイス等ありましたらお願いします。

  • インラインフレームで表示されるページのタイトルを取得したい。

    よろしくお願いします。 インラインフレームを利用したWebページを作成しています。 FLASHでボタンつくったボタンをクリックすると、 インラインフレームの中の表示が切り替わるようになっています。 そこで、どうしてもそのインラインフレームに表示される ページのタイトルとファイル名を取得したいのですが、 何かよい方法はないでしょうか? <div id="contents"> <iframe src="sample.html" name="frame" width="800" height="600" frameborder="0"> インラインフレーム機能を使用しています。インラインフレーム対応のブラウザで試してください(*´∀`) </iframe> </div> リンク先は、FLASHのボタンにつくっています。 インラインフレームの表示内容がが切り替わった時に、 sample.html ⇒ hoge.html hoge.htmlのタイトル名とファイル名を親フレームから 呼びだしたいと思っています。 よろしくお願いします。

  • インラインフレームからのリンクについて

    質問させて下さい。 ブログのTOPページにインラインフレームを使って、コンテンツを収めていますが、そのリンク先においてのリンク元を調べて見ると、リンク元がTOPページのアドレスではなく、コンテンツを収めているページになってしまします。 スペースの関係でスクローバーを使ってコンテンツをどうしても収めたいのですが、リンク元がTOPページのままにするにはどうすれば良いでしょうか? 宜しくお願いします。

  • インラインフレームのリンク

    インラインフレーム内にリンクを配置して、リンクをクリックすると現在見ているウィンドウにリンク先のページを表示したいと考えています。リンクに target="_top" を指定すれば、ウィンドウにリンク先が開かれると思うのですが、実際にやってみると、うまく開くときもありますがインラインフレーム内でウィンドウが開いてしまうことがあります。 現在見ているウィンドウ>インラインフレーム>インラインフレーム>リンクのあるページ と複数のインラインフレームを介しているのが原因のように考えています。 リンクのあるHTMLにjQueryプラグインを使ったスライドショーを入れて、複数のインラインフレームを介して画像をクリックすると現在見ているウィンドウにその画像のあるページを開きたいのです。 インラインフレーム内でリンク先のページが開いてしまうのは、やはりリンクのtarget指定の問題でしょうか?それともjQueryプラグインの設定か何かの問題でしょうか? アドバイスいただければ幸いです。

    • ベストアンサー
    • HTML
  • インラインフレームの表示方法

    少し前からホームページを作成しようとしているのですが、 テーブル内にインラインフレームを入れたところ、safariでインラインフレームが表示されませんでした。 これはsafari自体の使用のせいなのでしょうか? それとも私のsafariの設定の問題なのでしょうか? ちなみにIEやOperaだと正常に表示されます HTMLを抜粋すると <HTML> <HEAD> <TITLE>テスト</TITLE> </HEAD> <BODY> <table border="1" style="width:100%;height:100%;" cellpadding="5" cellspacing="0"> <tr><td> <div style="top:0px;left:50px;" > <table align="right"width="100%" height="100%"><tr><td> <iframe src="home.html" name="main-window" frameborder="0"width="100%" height="100%" scrolling="out"><p>インラインフレームを使用しています。見るにはインラインフレームをサポートしているブラウザが必要です。</p></iframe> </td></tr></table></div> </td></tr> </table> </BODY> </HTML> となっています。 本来はページを上下3段に分け真ん中の段にインラインフレームを入れようとしています。 どうかお力添えをお願いします。

    • ベストアンサー
    • Mac
  • インラインフレームのリンクについて

    ホームページビルダー9で左側にインラインフレームのあるページを作ってインライン内にタイトルを作り、そこからリンクしてページを開きたいと思っています。 挿入→HTMLタグ→IFRAME7でページを指定してページの挿入には成功しました。 しかし、プレヒューでインライン内のリンクをクリックするとインライン内だけが開いてしまい リンクしたはずの右側のページが変わりません。 リンクのページは何度も確認したのですが間違っていませんでした。 試しに、右側のページにラベルを貼ってそこへリンクさせたら、左側のページが右側のインライの中に入ってしますました。 HTMLダグはあまり詳しくない初心者です。 左側のページを変更せすに、右側だけ変えるのはどうしたら良いのでしょうか。 とても困っています、助けて下さい。

  • インラインフレームにリンクするには

    お世話になります。 少年野球のホームページを作っていますが、リンクボタンを5つ作り、同じページにインラインフレームを一つ作って、リンクボタンをクリックすると、インラインフレーム内に表示させたいのですが、その方法が分かりません。HTMLで作っています。どなたかご教示願えますでしょうか?よろしくお願いいたします。

  • インラインフレーム内へのリンク

    質問させて頂きます。 インラインフレーム内へのリンクが上手くいかなくて困っています。 name="main" でインラインフレームに名前を付け、外部からはtarget属性でtarget="main"と指定してリンクをはっているのですが、どういうわけだか新しいウインドウが開いてしまいます。 ソースをのせておきますので、どこがいけないのか御指導頂けないでしょうか。お願い致します。(暫定的にYAHOO!にリンクさせています) 以下ソース↓ <html> <head> <title>インラインフレーム</title> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> </head> <body bgcolor="#FFFFFF"> <table width="500" border="0" cellspacing="0" cellpadding="0" align="center"> <tr> <td height="17"><a href="http://www.goo.ne.jp" target="main">YAHOO!</a></td> </tr> <tr> <td height="300"><iframe border="0" frameborder="0" marginheight="0" marginwidth="0" name="main" scrolling="yes" style="border:solid 1pt cc0000" src="http://www.yahoo.co.jp" width="500" height="300"></iframe></td> </tr> </table> </body> </html>

    • ベストアンサー
    • HTML
  • インラインフレームについて

    不動産サイトを運営しています。現在CGIをインラインフレームで呼び出して新着物件やお勧め物件を表示しております。しかし、トップページのソースに表示されていないために、物件を入れ替えても更新にはなっておりません。ソースとして表示するにはどうしたらよいのでしょうか? 下記に今のソースを記載しておきます。 あまり詳しくないものですから、具体的にお願い致します。 <div class="contents_midashi"><h4>新着不動産情報</h4></div> <div id="topic"><iframe name="news" src="cgi-bin/news_g.cgi" frameborder="0" scrolling="auto" width="723" height="310"></iframe></div> <div class="contents_midashi"><h4>特選不動産物件情報</h4></div> <div class="toku"><iframe name="baitoku" src="cgi-bin/toku/b_toku_y.cgi?hyoji_page=1" frameborder="0" scrolling="auto" width="100%" height="1500"></iframe>

    • 締切済み
    • CGI

専門家に質問してみよう