12

編集：更新を参照してください！

私は次のhtmlを持っています:

<body>
  <span id="milestone1">
  </span>   
  <img id="image1" src="blabla.jpeg" style="width:400px;height:200px;" />
  <div id="divOverlayOverImage1" style="position:absolute; top:100px; left:40px; width:400px;height:200px;" onclick="DoFunkyStuff();"><div>
</body>

最初はが の上にdivOverlayOverImage1配置されImage1、それを覆っていますが、以下のコードを実行すると、#divOverlayOverImage1要素が要素を覆っていなくなり#image1ます。

$("#milestone1").after('<div style="width:500px; height:500px; background-color:blue;">');

の位置を更新できるように、位置が変更されたときに通知するイベントが必要です。#image1#divOverlayOverImage1

注:私は dom を完全に制御できません。コマンドは$("#milestone1").after('<div style="width:500px; height:500px; background-color:blue;">');サードパーティによって実行されます。

更新: DOM を完全に制御できないため、この呼び出しを行うのは私ではないため、要素追加関数にコールバックを設定できません。また、狂ったように HTML を変更することもできません。一連の Web サイトにアクセスし、JavaScript を介して特定の画像に追加してオーバーレイするだけです。HTML を変更する他の競合他社もあります。

4

4 に答える 4

3

1 つの回避策は、レイアウトを再編成することです。画像とオーバーレイを div にラップします。そうすれば、彼らはずっとそのままです。

<div id="wrap">
    <img id="i1" src="..." />
    <div id="overlay" />
</div>

#wrap {
    position: relative;
    width: 400px;
    height: 200px;
}

#overlay {
    position: absolute;
    top: 100px; 
    left: 40px; 
    width: 400px;
    height: 200px;
}
于 2013-08-05T09:44:03.773 に答える
1

オーバーレイで img をラップすることが唯一の要件である場合は、純粋な css ソリューションを使用できると思います。

デモを試す

HTML

<p id="milestone1">
First Overlay
</p>   
<div class="img-overlay-container" style="width:400px;height:200px;">
 <img id="image1" src="blabla.jpeg"/>
 <div id="overlay1" onclick="alert('clicked');">
 </div>
</div>  
<p id="milestone2">
Second Overlay
</p>       
<div class="img-overlay-container" style="width:100px;height:400px;">
 <img id="image2" src="blabla.jpeg"/>
 <div id="overlay2" onclick="alert('clicked');">
 </div>
</div>

CSS

.img-overlay-container{
  position: relative;
  display:inline-block;
}
.img-overlay-container > img{

}

.img-overlay-container > div{
  position:absolute; 
  top:0px; 
  left:0px; 
  width:100%;
  height:100%; 
  background: rgba(3,3,3,.1);
}
于 2013-08-05T09:44:17.733 に答える
-1 
function changePosition(callback) {
  $("#milestone1").after('<div style="width:500px; height:500px; background-color:blue;">');
 callback();
}

その後、 を呼び出すことができますchangePosition(function() {// Add your event handler function})。

これがあなたを助けることを願っています!

于 2013-08-05T09:44:51.937 に答える