тег HTML области с отверстиями

Question

Проблема, связанная с использованием тега map & area, заключается в том, что я не смог найти решение проблемы наличия «дыр» в области, например, представьте озеро на карте, вы не хотите, чтобы эта область была кликабельной .

Пример кода:

http://jsfiddle.net/WbKqS/

В этом примере я поместил 3 озера на карту, но я не хочу, чтобы озера имели эффект hovereffect / clickable, это возможно? Может быть, с другой техникой?

Answer 1

HTML area s не поддерживает наличие отверстий или нескольких наборов coords, поэтому вам придется использовать обходной путь.

Как насчет решения, основанного на подходе, проиллюстрированном ниже?

Answer 2

Я не думаю, что это хорошая идея для разработки этого с использованием карты местности.Я бы использовал Рафаэль вместо этого. карта пример с Рафаэлем

Answer 3

Хотелось бы, чтобы это работало таким образом, но сейчас это не так. Попробуйте использовать формат SVG. Это технология масштабируемой векторной графики. SVG поддерживает отверстия и несколько форм или островков, если хотите. Надеюсь, это поможет, это помогло мне в Firefox. Если этот метод не удастся, я рассмотрю использование тега <canvas>.

Answer 4

Вы можете расположить другие «скрытые» (div) элементы над озерами, предотвращая срабатывание эффекта наведения. Недостатком является форма элементов (квадрат). Решение для этого может быть использование canvas, но не все браузеры поддерживают его.