Каков наилучший способ создать карту с помощью мыши? - PullRequest
Новая
       23

Каков наилучший способ создать карту с помощью мыши?

4 голосов
/ 17 октября 2010

Каков наилучший способ создания двухмерного графика с разными точками в разных координатах (координаты х / у), чтобы они отображались с использованием разных форм на графике, и всякий раз, когда мы нажимаем на одну из них или выполняемнаведите курсор мыши на них, мы увидим текст, изменяющийся в небольшом окне рядом с графиком?

Если бы я мог сделать это в HTML, это было бы здорово.

Если есть универсальный компонент Flashэто можно сделать, просто загрузив некоторые текстовые данные из URL, и это будет ИДЕАЛ.

Спасибо.

Ответы [ 2 ]

2 голосов
/ 17 октября 2010 
<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

Удачи!

1 голос
/ 17 октября 2010

Вот решение, которое я быстро собрал, используя 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, просто проверьте источник, чтобы увидеть, что именно создается.

Вот демонстрация

...