使用鼠标创建地图的最佳方式是什么？

问题描述：

什么是创建二维图的最佳方式，在不同的坐标（x/y坐标）中使用不同的点，以便它们在图上使用不同的形状表示，并且每当我们点击其中一个图形时，或者使用鼠标对他们来说，我们看到剧情旁边的一个小窗口中有文字变化？使用鼠标创建地图的最佳方式是什么？

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

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

谢谢。

答

<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

祝你好运！

你可以使用每个区域元素的onmouseover事件处理程序设置框的内容和onmouseout图像，以清除该框中的内容。 – PleaseStand 2010-10-17 02:28:46

答

下面是我使用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

真的很好！ – Trufa 2010-10-17 02:25:46

使用鼠标创建地图的最佳方式是什么？

相关推荐