html javaページの静止画像にマーカーを固定する方法

Question

html/jsp/javascriptを使用して1つの静止画像を表示しています。私は、絶対タグと相対タグを使用して静止画像にマーカーを固定しようとしています。

<div style="position: relative; left: 0; top: 0;"> 
<img src="a.jpg" style="position: relative; top: 0; left: 0;"/> 
<img src="b.jpg" style="position: absolute; top: 25px; left: 25px;"/> 
</div> 

問題は、画像をズームすると、マーカーが同じ25ピクセル、25ピクセルで画面に残ります。どのようにしてマーカーを画像にロックすると、画像のスクロールバーをズームまたは移動した後でも、画像とともにマーカーが自動的に動くようになります。

上記のコードでは、マーカーは画面に固定されているように見えますが、静止画像には表示されません。

Answer 1

画像自体をスクロールまたはズームしているだけの場合、マーカーは影響を受けずにそのまま残ります。代わりに、両方の画像を含むdiv要素全体を変更してみてください。あなたはこのような何かをした場合たとえば

、：

<div style="position: relative; overflow: auto; width: 100; height: 100;"> 
    <!-- both images here --> 
</div> 

divは彼らが揃っ保ち、両方の画像を移動、スクロールバーを得ることができます含みます。 （これは、divがメイン画像よりも小さい場合にのみ有効です。それ以外の場合はスクロールバーは不要です）。

ズーム/スケーリングについては、どのようにしているかによって異なります。ブラウザのズーム機能を使用している場合は、何に関係なく機能するはずです。イメージにCSSを適用している場合は、代わりにdivにそのCSSを適用してください。 javascriptを使用してイメージのサイズを変更する場合は、マーカーの新しい位置を決定するためにいくつかの計算を行う必要があります。