Quelle est la meilleure façon de créer une carte avec la souris sur?

Question

Quelle est la meilleure façon de créer un tracé 2D, avec différents points dans différentes coordonnées (coordonnées x/y) de sorte qu'ils sont représentés en utilisant différentes formes sur le tracé, et chaque fois que vous cliquez sur au-dessus d'eux, nous voyons un texte qui change dans une petite fenêtre à côté de l'intrigue?

Si je pouvais le faire en HTML, ce serait génial.

S'il existe un composant Flash générique capable de le faire, il suffit de charger certaines données de texte à partir de l'URL, ce qui serait IDEAL.

Merci.

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> 

Est-ce ce que vous demandiez?

Essayez cette Tut:

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

Bonne chance!

Answer 2

Voici une solution que j'ai rapidement mise en place en utilisant jQuery. Il peut facilement être modifié pour utiliser Javascript de Vanilla, mais pour l'écrire rapidement j'ai eu recours à un framework.

Il se compose essentiellement d'un <div> qui est relativement positionné, avec ancres comme parcelles qui position absolue. Cela nous permet d'utiliser des coordonnées pour positionner les graphiques partout où nous le voulons dans le <div>.

Vous pouvez créer quelques icônes qui représenteront différentes tracés sur le graphique et affecter celles-ci aux éléments d'ancrage .

Pour rendre les choses agréable et facile que j'ai utilisé un JSON objet pour stocker chaque parcelle afin que vous puissiez l'utiliser à partir d'une source 3ème partie.

// 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); 
}); 

J'espère que je l'ai écrit d'une manière facile à comprendre :)

Notez que tous les ci-dessus peut être atteint en utilisant seulement HTML/CSS, inspectez juste la source pour voir ce qui est exactement créé.

Here's a demo