作为一个网站的一部分,我正在为一个类中期项目工作,我试图创建一个交互式地图。目标是将图像放置在页面的中心(我已经完成),这是我大学北校区的地图。然后在顶部放置另一个图像,就像一个"标记"图片。我们的目标是拥有多个这些"标记"地图上的图像,因此当您将鼠标悬停在地图上时,会弹出一个显示图像或视频的弹出窗口。
当我改变页面宽度时,我目前仍然坚持将标记<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;
非常感谢任何帮助或建议。
答案 0 :(得分:0)
您的DIV .localmapwrapper
需要position: relative;
,以便#marker
的绝对位置具有与之相关的内容。