Выделите область изображения - при нажатии ссылки

Question

У меня есть изображение (скажем, карта США) на веб-странице, и у меня есть различные ссылки (например, названия состояний) под ним (отдельно от изображения).

Когда я нажимаю на ссылку «Имя штата», эта область состояния на изображении (изображение карты США) должна быть подсвечена (или измените цвет и т. Д.).

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

Пожалуйста, консультации с примерами кода или идеи ...

Мой вопрос похож на это: Highlight Section of Mapped Image when Mouseover Text on Webpage
, но я не могу понять, что один ...

Answer 1

Есть два подхода к этой проблеме,

Прежде всего, сделайте полное изображение и создайте карту изображения с помощью HTML, иначе это http://www.image-maps.com/ облегчит вам создание карт изображений. При щелчке ссылки просто примените стили со стороны карты изображения.

Во-вторых, лучше всего использовать API Карт Google, вы можете найти полную документацию в документации по картам Google.

Но ожидая, что полный источник для этого требования не имеет смысла для меня :), попробуйте использовать любой из вышеперечисленных вариантов.

Answer 2

Этот код должен быть полезен, я думаю !!!! лучше с нашим классом (например, .usaMap) или ID (например, #usaMap)

img:hover, img:focus { 
opacity:1; 
background-color:red; 
} 
img:not(:hover), img:not(:focus){ 
opacity:0.5; 
background-color:black; 
} 

Answer 3

область карты выделения при наведении курсора мыши уже Предоставлено: jquery.maphilight.js. Существует много примеров использования подсветки mouseover на самом изображении.

Чтобы выделить область изображения, из отдельной текстовой ссылки, вот что мы можем сделать:

Предполагая, что ваша карта изображения:

<map name="mymapname"> 
    <area id="myAreaId" href="#" shape="poly" coords="32,71,116,77,142,81,145,125,34, 
    106" alt="Link" title="Default behavior"> 
... 
</map> 

Затем, вы можете имитировать MouseOver области изображения , from href link:

<a id="mylink" href="#" onmouseover="$('#myAreaId').trigger('mouseover');" 
onmouseout="$('#myAreaId').trigger('mouseout');">My Link</a> 

Это не самое аккуратное решение, но выполняет эту работу.