What is the best way to create a map with mouse over?

Question

What is the best way to create a 2D plot, with different points in different coordinates (x/y coordinates) such that they are represented using different shapes on the plot, and whenever we click on one of them, or go with mouse over them, we see a text changing in a small window next to the plot?

If I could do this in HTML, that would be great.

If there is a generic Flash component that could do that, simply by loading some text data from URL, that would be IDEAL.

Thanks.

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>

Is this what you were asking?

Try this tut:

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

Good luck!

Answer 2

Here's a solution I quickly put together using jQuery. It can easily be modified to use Vanilla Javascript, but for the sake of writing it quickly I've resorted to a framework.

It basically consists of a <div> that is relatively positioned, with anchors as plots that are absolutely positioned. This allows us to use coordinates to position the plots anywhere we like within the relative <div>.

You can create a few icons that will represent different plots on the graph and assign those to the anchor elements.

To make things nice and easy I've used a JSON object to store each plot so you can use it from a 3rd party source.

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

I hope I've written it in an easy-to-understand way :)

Note that all of the above can be achieved using just HTML/CSS, just inspect the source to see what exactly gets created.

Here's a demo