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

时间:2013-03-02 05:38:25

标签: css

我不知道从哪里开始。我非常有信心有一个解决方案可以解决我想要完成的问题,但我在搜索帮助时可能没有使用正确的术语。

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

我以为我可以使用图像映射并且有一个热点表现的方式,当我用鼠标滚动时,透明图像(包含我的轨迹线)将出现在我的基本地图/图像的顶部。除了这个效果,我还想要一个独特的文本框来显示该位置。文本框不会很大,但会有几行包含所选位置的航班信息。

我不知道该从哪个项目开始。任何帮助将不胜感激!!

1 个答案:

答案 0 :(得分:0)

对不起,我昨晚忘记了。我也没有使用纯css,尽管有一种方法。这种方式也可以使用

document.getElementById(yourid).style.opacity=1;

悬停。基本上它是一对堆叠在一起的图像。

Link to example