用鼠标悬停创建地图的最佳方法是什么？答案

【问题标题】：What is the best way to create a map with mouse over?用鼠标悬停创建地图的最佳方法是什么？
【发布时间】：2011-04-26 11:36:02
【问题描述】：

创建 2D 绘图的最佳方法是什么，不同的点在不同的坐标（x/y 坐标）中，以便它们在绘图上使用不同的形状表示，并且每当我们点击其中一个，或使用将鼠标悬停在它们上面，我们会在绘图旁边的一个小窗口中看到一个文本发生变化？

如果我可以在 HTML 中做到这一点，那就太好了。

如果有一个通用的 Flash 组件可以做到这一点，只需从 URL 加载一些文本数据，那将是理想的。

谢谢。

【问题讨论】：

标签： javascript html flash map graph

【解决方案1】：

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap" />

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun" />
  <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury" />
  <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus" />
</map>

这是你问的吗？

试试这个 tut：

http://www.w3schools.com/tags/tag_map.asp

祝你好运！

【讨论】：

您将在每个区域元素上使用 onmouseover 事件处理程序来设置框的内容，并在图像上使用 onmouseout 来清除框的内容。

【解决方案2】：

这是我使用 jQuery 快速组合起来的一个解决方案。它可以很容易地修改为使用 Vanilla Javascript，但为了快速编写它，我使用了一个框架。

它基本上由一个相对定位的<div>组成，锚点作为绝对定位的地块。这使我们可以使用坐标将绘图定位在相对 <div> 内的任何我们喜欢的位置。

您可以创建一些图标来代表图表上的不同图，并将它们分配给 anchor 元素。

为了让事情变得简单易用，我使用了一个 JSON 对象来存储每个 plot，以便您可以从第 3 方使用它来源。

// change this to fit your needs
var plots = [
    {"width":30,"height":30, "top": 150, "left": 100, "content": "Lorem"},
    {"width":20,"height":20, "top": 100, "left": 20, "content": "Ipsum"},
    {"width":50,"height":50, "top": 20, "left": 20, "content": "Dolor"}
];

// store our 2 divs in variables
var $content = $("#content");
var $map= $("#map");

// Iterate through each plot
$.each(plots, function() {

    // store 'this' in a variable (mainly because we need to use it inside hover)
    var plot = this;

    // create a new anchor and set CSS properties to JSON values
    var $plot = $("<a />")
   .css({
        'width': plot.width,
        'height': plot.height,
        'top': plot.top,
        'left': plot.left
    })
    .hover(function() {
        // replace content of target div
        $content.html(plot.content);
    });

    // Add the plot to the placeholder
    $map.append($plot);
});

希望我写的通俗易懂:)

请注意，以上所有内容都可以仅使用 HTML/CSS 来实现，只需检查源代码以查看究竟创建了什么。

Here's a demo

【讨论】：