Сложные формы HTML5 с наведением мыши

Кто-нибудь знает, как Google создал данные карты в разделе аналитики Youtube?

Наведения мыши находятся в правильном месте, т. е. когда ваша мышь покидает США и попадает в Канаду, Канада оказывается в фокусе. Мои знания HTML говорят мне, что браузеры распознают только квадратные формы, и если вы хотите создать хоть какую-то сложную форму, вам придется много кодировать.

например, левый наклон на значке дома не улавливает события мыши p.walkleftstudios.com/am2.1 Сделано с использованием холста HTML5 и немного тригонометрии.

например, в этом примере я полностью исключил это (холст был слишком раздражающим для работы) p.walkleftstudios.com/am2.2

Я видел тег SVG в коде, возможно, здесь и происходит волшебство.


person Luke Madhanga    schedule 23.12.2012    source источник
comment
либо координаты и границы, либо каждая страна является отдельным объектом с триггерами при наведении   -  person cristi _b    schedule 24.12.2012
comment
Вы сами ответили на свой вопрос: SVG. Что ты хочешь, чтобы мы сделали?   -  person robertc    schedule 24.12.2012


Ответы (2)


Большинство продуктов Google используют GViz для визуализации данных. Если вы хотите рисовать карты на основе введенных данных, для этого есть API.

https://developers.google.com/chart/interactive/docs/reference

Вывод GViz осуществляется в формате SVG или VML для старых браузеров IE, поэтому ваши диаграммы будут работать везде — в старых, новых, настольных и мобильных браузерах.

person Gjokica Zafirovski    schedule 24.12.2012
comment
Большое спасибо за ваш ответ. Очень признателен - person Luke Madhanga; 30.12.2012

Я считаю, что вы ищете карты изображений .

person Community    schedule 23.12.2012