如何将标记钉在HTML Java页面的静态图像上

how to pin a marker on static image in html java page

本文关键字：静态 图像 Java HTML      更新时间：2023-09-26

我正在使用html/jsp/javascript显示一个静态图像。我正试图通过使用绝对和相对标签在静态图像上钉一个标记。

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

问题是当我缩放图像时，标记仍然在屏幕上相同的25px, 25px。如何将标记锁定在图像上，以便即使在缩放或移动图像滚动条后，标记也会随着图像自动移动。

使用上面的代码，看起来标记锁定在屏幕上，而不是在静态图像上。

如果您只是滚动或缩放图像本身，则标记不受影响并保持在原位。相反，请尝试更改包含两个图像的整个div元素。

例如，如果你这样做:

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

包含div将获得滚动条，移动两个图像，保持它们对齐。(这只会在div小于主图像时生效，因为没有必要使用滚动条。)

至于缩放:这取决于你是怎么做的。如果你使用的是浏览器的缩放功能，无论如何它都能正常工作。如果您对图像应用了一些CSS，那么将这些CSS应用到div上就可以了。如果您使用javascript调整图像的大小，您可能需要做一些计算来确定标记的新位置。

相关文章：