Question

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

如果我可以在HTML中执行此操作，那就太棒了。

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

感谢。

Answer 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>

这就是你问的问题吗？

试试这个：“

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

祝你好运！

Answer 2

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

它基本上由相对定位的<div>组成，锚点为图 绝对定位。这允许我们使用坐标将图表定位在相对<div>内的任何位置。

您可以创建一些图标来表示图表上的不同图表，并将这些图标分配给锚点元素。

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

// 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

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

2 个答案: