使用基础图像上的热点在基础图像上触发透明图像图层(.png)

  • 本文关键字:图像 图层 透明图 png 透明 热点 css
  • 更新时间 :
  • 英文 :


我不知道从哪里开始。我很有信心有一个解决方案,我想完成的,但我可能没有使用正确的术语时,寻求帮助。

在网站上,我正在建立一个航空公司,我想有一个地图显示的图像。地图/图像将在地图上标记几个关键位置(旅游目的地)。每个航班在地图/图像上的出发点将是相同的。当用户将鼠标指针移动到标记位置时,我希望在出发点和所选标记位置之间出现一条表示飞机飞行路径的轨迹线(虚线)。当用户将鼠标指针移出标记位置时,跟踪线将消失。

我认为我可以使用图像映射,并有一个热点的行为,这样当我用鼠标滚动一个透明的图像(包含我的轨道线)将出现在我的基础地图/图像的顶部。除了这个效果,我还想要一个文本框唯一的位置出现。文本框不会很大,但它会有几行包含所选位置的一些航班信息。

我不确定从哪里开始这个项目。任何帮助都将非常感激!!

对不起,我昨晚忘记完成了。我也没有让它与纯css工作,尽管有一种方法。使用

也可以这样做
document.getElementById(yourid).style.opacity=1;

在盘旋。基本上就是一组图片堆叠在一起。

链接到示例

最新更新