根据下面的设计，是否可以使用CSS创建地图？如果是这样，怎么样？
正如您所看到的，当您将鼠标悬停在状态上时，名称将会出现并更改状态的颜色。单击它将在每个州的地图下面显示信息。
更新1： 是否可以使用按钮上的绝对定位，z-index和悬停状态来完成？
更新2： 通过略微调整设计，是否可以为地图绘制一个平面图像，并为每个包含悬停的状态（使用与图像示例相同的标签样式）绘制点？每个点都是一个图像。我是否正确地说，设计的复杂性是在悬停时突出正确的区域？因此，只要有一个点可以解决它吗？
答案 0 :(得分：2)
我对此也很感兴趣并且发现了这个例子（美国）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就无法完成。为了获得coords，我会假设你只是在一些显示coords（gimp或其他东西）的编辑器中打开你的图像并手动找到它们......
答案 1 :(得分：0)
没有。如果它有矩形形状，但是有很多工作。
你真的需要这个javascript。
答案 2 :(得分：0)
您可能想尝试使用Javascript映射库 - www.openlayers.org是市场领导者（以及免费和开源）。
您可以使用正确的格式（例如GML）获取美国州地图，然后您可以从其中一个openlayers示例中删除n个粘贴。悬停和点击由事件功能处理。然后，他们可以执行更新地图下方信息框等操作。
请注意，如果你想在图片中找到阿拉斯加和夏威夷，而你所能找到的只是一张地理状态图，你可能不得不使用GIS来移动这些特征。 Quantum GIS是一款免费的开源GIS，可以为您完成此任务。可以在gis.stackexchange.com上找到帮助！
答案 3 :(得分：0)
如果你愿意更具体地使用javascript，jQuery，这里有一个很好的插件/教程，介绍如何做你想做的事情。 http://playground.mobily.pl/jquery/mobily-map.html。它不会完全按照状态执行，但它会允许您放置引脚等。
更新：这似乎正是您所寻找的：http://playground.mobily.pl/tutorials/building-an-interactive-map-with-raphael.html。它还包括一个相当深入的教程。
答案 4 :(得分：0)
以下是我发现的另一张美国互动地图：http://www.fla-shop.com/products/html5/united-states/us/这是纯粹的javascript，可自定义弹出窗口。