使用鼠標創建地圖的最佳方式是什麼？

Question

什麼是創建二維圖的最佳方式，在不同的座標（x/y座標）中使用不同的點，以便它們在圖上使用不同的形狀表示，並且每當我們點擊其中一個圖形時，或者使用鼠標對他們來說，我們看到劇情旁邊的一個小窗口中有文字變化？

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

如果有一個通用的Flash組件可以做到這一點，只需從URL加載一些文本數據，這將是理想的。

謝謝。

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