gpt4 book ai didi

css - 使用 CSS 创建交互式 map

转载 作者:行者123 更新时间:2023-11-28 11:49:06 25 4
gpt4 key购买 nike

根据下面的设计,是否可以仅使用 CSS 来创建 map ?如果是,怎么办?

如您所见,当您将鼠标悬停在某个状态上时,会出现名称并更改状态的颜色。单击它将在每个州的 map 下方显示信息。

更新 1:可以在按钮上使用绝对定位、z-index 和悬停状态吗?

更新 2:通过对设计进行轻微调整,是否可以为 map 制作平面图像并在其上为每个包含悬停的状态绘制点(使用与图像示例相同的选项卡样式)?每个点都是一个图像。我说的是设计的复杂性是在悬停时突出显示正确的区域吗?因此,只要有一个点就可以解决问题吗?

最佳答案

我对此也很感兴趣并找到了这个例子(美国)MAP如果您查看源代码,每个州都有一个区域,看起来像 <area onmouseover="show(this)" onmouseout="hide()" onclick="fform.tg.checked=false;togl()" shape="poly" coords="179,33,174,66,230,67,225,35,179,33,179,33" href="us-nd.html"> .您可以在 W3C link 中阅读有关和标签的更多信息.我认为这是在没有闪光灯或其他东西的情况下如何做到这一点的唯一方法......但是没有一点 JS 就无法完成。要获得坐标,我假设您只是在一些显示坐标(gimp 或其他东西)的编辑器中打开您的图像并手动找到它们......

关于css - 使用 CSS 创建交互式 map ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6938484/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com