Geek Answers Handbook

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

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

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

If there is a common Flash component that can do this by simply loading some text data from the URL, this will be an IDEAL.

Thanks.

+4
source share
2 answers
<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 that what you asked?

Try the following:

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

Good luck

+2
source

Here is a solution that I am building quickly using jQuery. It can be easily modified to use Vanilla Javascript, but in order to quickly write it, I resorted to the framework.

Basically it consists of a <div> , which is relatively positioned with bindings as graphs that are absolutely located . This allows us to use the coordinates to place charts anywhere in the relative <div> .

You can create several icons that will display different charts on the chart and assign them to snap elements.

To make things nice and easy, I used a JSON object to store each plot so you can use it from a third-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); });

Hope I wrote this in an easily understandable way :)

Please note that all of the above can be achieved using only HTML / CSS, just check the source to see what exactly is being created.

Here is a demo

+1
source

More articles:


All Articles