在保持可恢复性的同时,将<img/>与另一个<img/>相关联

时间:2016-09-17 20:27:03

标签: html css

作为一个网站的一部分,我正在为一个类中期项目工作,我试图创建一个交互式地图。目标是将图像放置在页面的中心(我已经完成),这是我大学北校区的地图。然后在顶部放置另一个图像,就像一个&#34;标记&#34;图片。我们的目标是拥有多个这些&#34;标记&#34;地图上的图像,因此当您将鼠标悬停在地图上时,会弹出一个显示图像或视频的弹出窗口。

当我改变页面宽度时,我目前仍然坚持将标记<img>维护在与父<img>相关的位置<div id="localmapwrapper"> <img id="marker" src="img/point-marker.png" onmouseover="showPoint(1)"/> <img src="img/north-campus.jpg" width="100%" /> </div> 。我可以硬编码地图图像的大小。但是,我更希望保持调整大小的能力。

HTML:

#marker {
    width:10%;
    position: absolute;
    right:80%;
    top:50%;
}

的CSS:

select FirstName, LastName, extract(month from BirthDate) as BirthMonth
from employees;

非常感谢任何帮助或建议。

1 个答案:

答案 0 :(得分:0)

您的DIV .localmapwrapper需要position: relative;,以便#marker的绝对位置具有与之相关的内容。