Нажмите на разные прозрачные PNG. Какой из них нажал? - PullRequest
2 голосов
/ 02 сентября 2011

Я пытаюсь создать карту страны, разделенной на разные провинции.Когда мои продукты будут доступны в определенных провинциях, эти провинции будут отображаться на карте.Затем я хочу, чтобы люди могли выбрать одну провинцию и щелкнуть по ней.

Я думаю сделать это так: 1) У меня есть фон всей страны в темных тонах 2) В каждой провинции естьотдельный прозрачный png светлого цвета 3) Когда моя база данных обнаружит, что продукт доступен, он покажет фоновое изображение + светлое цветное изображение каждой провинции

Проблема заключается в следующем: я хочу, чтобы светлое изображениебыть кликабельным, но холст всех изображений будет перекрываться.Есть ли способ сделать это?Он должен работать во всех основных браузерах, и желательно НЕ с картами изображений.Я хотел бы связать активируемую область с непрозрачной частью изображения в формате PNG.

Надеюсь, это имеет смысл, заранее большое спасибо.

Ответы [ 3 ]

4 голосов
/ 02 сентября 2011

Можно просто создать свое world изображение и другое hittest изображение, где все провинции имеют разные цвета. Когда пользователь щелкает где-то, вы можете просто получить цвет выделенного пикселя и связать его с провинцией. Так, например, ваше hittest изображение будет иметь Техас с красным, Калифорния с синим и Нью-Йорк с Зеленым. Когда вы нажимаете, вам просто нужно выяснить цвет, и вот вам ваше состояние.

Что касается получения цвета пикселя под мышью, то canvas может сделать это. Однако это не поддерживается в

0 голосов
/ 02 сентября 2011
Тег

<img> кликабелен по размеру квадрата, не имеет значения, прозрачна ли часть изображения. Даже если вы нажмете на прозрачную часть изображения, событие щелчка произойдет.

Чтобы принять это, возьмите лок на HTML КАРТА ИЗОБРАЖЕНИЯ <area> HTML-тег (Google google) и опционально сообщите браузеру, к какой части изображения вы хотите применить какое-либо событие.

Щелчок также будет распространяться на нижние элементы в той же позиции. Это означает, что <body> всегда нажимается, если вы не остановите распространение с помощью e.stopPropagination();

Если вам не нужны карты с изображениями, вы можете поместить невидимые DIVs в верхней части в форме интерактивной области. Но я бы, наверное, пошел с картами изображений.

0 голосов
/ 02 сентября 2011

Вы можете регистрировать клики только на целые изображения, а не на цветные их части.Чтобы ваша карта была точной, вам нужно использовать canvas или flash.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...