如何在html java页面中固定静态图像上的标记

Question

I am displaying one static image using html/jsp/javascript. I am trying to pin a marker on the static image by using absolute and relative tags.

<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>

The problem is when i zoom the image, marker remains on the screen at same 25px, 25px. How can i lock the marker on the image so that even after zooming or moving the image scroll bar, marker should move automatically along with the image.

with above code, it appears marker is locked on the screen, not on the static image.

Answer 1

If you're only scrolling or zooming the image itself, the marker is unaffected and remains in place. Instead, try changing the entire div element containing both images.

For example, if you did something like this:

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

The containing div will gain scroll bars which move both images, keeping them aligned. (This will only take effect if the div is smaller than your main image, since there's no need for scroll bars otherwise.)

As for zooming / scaling: it depends on how you're doing it. If you're using the browser's zoom function, it should work no matter what. If you're applying some CSS to the image, applying that CSS to the div instead should do the trick. If you're resizing the image using javascript, you'll probably need to do some calculations to determine the marker's new position.