1

イベントをラップしてキャンセルしたい2つの要素があります。1つはiframeで、もう1つはオブジェクトです。

   <a href="http://google.com">
<iframe src="http://pldaflix.com/video/54312" width="500" height="415" frameborder="0"></iframe>
</a>


     <a href="http://google.com">
<object height="400" width="500"><param name="allowfullscreen" value="false">
<param name="AllowScriptAccess" value="always">
<param name="movie" value="http://embed.rede.com/player/">
<param name="FlashVars" value="id=97219&&autostart=false">
<embed src="http://embed.rube" allowfullscreen="false" AllowScriptAccess="always"
flashvars="autostart=false" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" 
type="application/x-shockwave-flash" height="400" width="500" /></object>

</a>

javacriptを使用する代わりにhtmlまたはcssでイベントをオーバーライドしたいのですが、javascriptオプションもオプションです。

オブジェクトとiframeのイベントをリンクのイベントでオーバーライドするにはどうすればよいですか？

アップデート：

私はこのようなことをしようと思いました：

        <div id="wrapper" style="position:relative;">
        <a href="http://google.com">
        <div style="position:absolute; width:100%; height: 100%; z-index: 9999; background-color:blue;">
            <div style="position:absolute; width:100%; height: 100%; z-index: 0;">
                <iframe src="http://playflix.com/video/54312" width="500" height="415" frameborder="0"></iframe>
            </div>
            </a>
        </div>
    </div>

リンクのdivの下にiframeのdivを配置します。

動作しません..しかし、私は解決策がそれらの線に沿っているべきだと思います

別の方法は、javascriptを使用してdivのクリックを無効にすることです

アップデート：

簡単な解決策が必要です。解決策は、divをiframeの上に配置することです

4

3 に答える 3

0

html / cssを使用すると、次のようなものを試すことができます。

  • オブジェクトの下に空のdiv「オーバーレイ」を作成します
  • iframeとオブジェクトを組み合わせた高さにします（パディング/マージンを使用しない場合は815px）
  • 大きい方の要素（500px）と同じ幅にします
  • 他の要素と重なるように配置します。たとえば、上にあるmargin-top:-500px; ことを確認するために、他の2つの要素よりもdisplay:block;大きくします。z-index
  • 「オーバーレイ」と同じくらいの大きさのリンクをその周りに配置します

また、要素の周りに「オーバーレイ」を配置して、その上に配置することが可能かどうかを試すこともできますz-index。

于 2012-06-20T12:48:48.573 に答える
0

jQueryを想定：

$("iframe").click(function(){
   window.location = <yourDesiredHref>;
});

同じことがオブジェクトにも当てはまります。

于 2012-06-20T12:41:16.090 に答える
0

リンクをオブジェクトの前に置き、絶対位置を指定することで、オブジェクトをカバーするリンクを作成できます。たとえば、フィドルを参照してください: http://jsfiddle.net/sveinatle/BP9xc/4/

重要なビットは次のとおりです。

<div class="container">
    <a id="overlay" href="http://google.com"></a>
    <iframe src="http://www.example.com" width="500" height="415" frameborder="0"></iframe>
</div>

リンクがオブジェクトをカバーするようにスタイリングします。

.container{
    position:relative; 
    border: 2px solid red;
    overflow:hidden;
}
#overlay{
    display:block; 
    position:absolute; 
    width:100%;
    height:50%;
    background-color:rgba(255,0,0,0.5);
}
于 2012-06-20T12:47:14.403 に答える