Внешние координаты для ImageMap

У меня есть карта изображений, как показано ниже, одно место внутри другого следующим образом:

введите здесь описание изображения

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

(т. е. мне нужно получить координаты Верхнего Ганновера при наведении курсора на три области, которые не должны показывать Верхний Ганновер.)

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

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

Извините за мое плохое объяснение. Пожалуйста, спросите, если вы не в состоянии понять.


javascript coordinates html imagemap
person Community    schedule 22.07.2014    source источник
comment
Не могли бы вы просто разделить красную область на две области, которые, вместе взятые, заключают в себе белую область?   -  person icke    schedule 31.07.2014
comment
@icke Не могли бы вы уточнить это ..   -  person    schedule 31.07.2014
comment
Добавление моего предложения в качестве ответа   -  person icke    schedule 31.07.2014
comment
Используете ли Dreamweaver для отображения изображения?   -  person prakashstar42    schedule 31.07.2014

Ответы (5)


arrow_upward
3
arrow_downward

Я бы попытался использовать полигональную область, которая окружает белую область.

<img src="https://www.google.de/images/srpr/logo11w.png" usemap="#example"/>
<map name="example">
  <area shape="poly" coords="0,0, 280,0, 280,50, 250,50, 250,150, 320,150, 320,50, 280,50, 280,0, 538,0, 538,190, 0,190" alt="clickable area" href="javascript:alert('Click!')">
</map>

Я создал JSFiddle в качестве примера. Желтая буква «о» логотипа не кликабельна, а все остальное — кликабельно. http://jsfiddle.net/pXth7/

Надеюсь, я правильно понял вашу проблему.

Редактировать: я не правильно понял. Очевидно, вы хотите сделать интерактивные области видимыми с помощью той или иной библиотеки. Единственное решение, которое я могу придумать, это: http://jsfiddle.net/X4mPW/10/

person icke    schedule 31.07.2014
comment
Когда эта идея была реализована, я получил следующий результат: ссылка на изображение - person ; 31.07.2014
comment
Это создаст линию границы при выделении цветом. - person ; 31.07.2014
comment
На этом jsfiddle.net/pXth7/2 есть ваше изображение, на которое можно кликнуть только по внешней области. Это то, что вы искали? - person icke; 31.07.2014
comment
да, это нормально, но когда я раскрашиваю, я получаю вот такую ​​Ссылка - person ; 31.07.2014
comment
Можете ли вы уточнить, что вы подразумеваете под цветным? Кроме того, это не то, что вы могли бы получить по ссылке, которую я предоставил, поскольку область, которую я выбрал, не была такой подробной. Возможно, вы перепутали мой ответ с ответом Крозина? - person icke; 31.07.2014
comment
Если вы не используете что-то вроде JQuery maphilight, вы вообще не увидите карту изображения. Что вы используете, чтобы сделать карту видимой? - person icke; 31.07.2014
comment
Смотрите свой ответ с этим jsfiidle jsfiddle.net/X4mPW/7... Я просто не хочу этого линия, соединяющая внутреннее и внешнее место - person ; 04.08.2014
comment
Согласен, есть красная линия, потому что вы показали карту изображения. Я не верю, что это можно сделать по-моему, если требуются видимые карты изображений. Я бы попробовал адаптировать предложение prakashstar42. Также вам, вероятно, следует обновить свой вопрос, чтобы отразить, что карта изображений будет отображаться с помощью maphilight. - person icke; 04.08.2014

arrow_upward
2
arrow_downward

Вы можете создать две отдельные фигуры для одной карты:

<img src="EFPvH.png" alt="" usemap="#map" />
<map name="map">
    <area shape="poly" coords="30, 126, 19, 56, 80, 52, 103, 68, 106, 62, 127, 75, 145, 74, 176, 96, 174, 71, 188, 71, 188, 142, 93, 145, 91, 120" />
    <area shape="poly" coords="16, 7, 185, 9, 188, 67, 178, 67, 173, 65, 148, 64, 123, 49, 91, 37, 83, 53, 22, 55" />
</map>

Первая форма охватывает Верхний Верхний Ганновер, а вторая форма охватывает Нижний Верхний Ганновер.

введите здесь описание изображения

person Crozin    schedule 31.07.2014
comment
Когда эта идея была реализована, я получил следующий результат: ссылка на изображение - person ; 31.07.2014

arrow_upward
1
arrow_downward

Оформить заказ по ссылке, которую я дал, ссылка 1 на весь логотип и ссылка 2 на красный цвет «O».

http://jsfiddle.net/pXth7/1/

<img src="https://www.google.de/images/srpr/logo11w.png" usemap="#Map"/>
<map name="Map"><area shape="circle" coords="179,97,60" href="javascript:alert('Click 1')">
  <area shape="rect" coords="42,16,472,167" href="javascript:alert('Click 2')" >
</map>
</map>
person prakashstar42    schedule 31.07.2014
comment
Обе ссылки на одном изображении - person prakashstar42; 31.07.2014
comment
@UdhayaKumar Вы проверили мою ссылку jsfiddle? - person prakashstar42; 31.07.2014

arrow_upward
1
arrow_downward

Из того, что вы сказали, у меня сложилось впечатление, что

  1. Вы хотите видеть информацию при наведении курсора на Верхний Ганновер (координаты области?), но не при наведении на меньшие внутренние области.
  2. Вы не хотите видеть линию фокусировки вокруг области, когда вы щелкаете по ней.

Я разветвил JSFiddle icke, чтобы решить обе проблемы здесь: http://jsfiddle.net/ACjBQ/1/< /а>

(1.) решается путем добавления атрибута title к тегу <area> с содержимым, которое вы хотите иметь. Я просто скопировал значение атрибута coords, но вы можете заменить его любым текстом по вашему выбору. (2.) решается добавлением некоторого кода JQuery, который не выделяет область, как только вы щелкаете по ней.

Пожалуйста, дайте нам знать, это то, что вы хотели.

person Julian    schedule 01.08.2014

arrow_upward
1
arrow_downward

Карты изображений на самом деле не для раскрашивания, но это то, что вы ищете? http://jsfiddle.net/me2loveit2/X4mPW/8/

<area shape="rect" coords="240,45,330,140" alt="UPPER HANOVER TOWNSHIP">
  <area shape="rect" coords="0,0,538,190" alt="UPPER HANOVER TOWNSHIP" href="javascript:alert('Click!')">
person Philipp Werminghausen    schedule 04.08.2014
comment
Это результат вашего ответа jsfiddle.net/X4mPW/9... Внутренняя часть также цветной ... я не хочу этого - person ; 05.08.2014
comment
Это невозможно с картами изображений. Но вы можете подделать это так: jsfiddle.net/me2loveit2/X4mPW/11 - person Philipp Werminghausen; 05.08.2014