하이라이트 이미지 영역 - 링크를 클릭했을 때

나는 웹 페이지에 이미지 (미국지도를 말하게한다)가 있고 그 아래에 (이미지와는 별도로) 다양한 링크 (상태 이름을 말하게한다)가있다.하이라이트 이미지 영역 - 링크를 클릭했을 때

상태 이름 링크를 클릭하면 이미지의 상태 영역 (미국지도 이미지)을 강조 표시하거나 색상 등을 변경해야합니다.

내가보기에 모든 예제는 이미지 영역 위로 마우스를 가져갈 때 이미지 영역을 강조 표시하는 것이지만 별도의 링크를 클릭하여 이미지 영역을 강조 표시하려고합니다.

코드 예제 나 아이디어 제발 조언 ...

내 질문이 유사합니다 Highlight Section of Mapped Image when Mouseover Text on Webpage
하지만 난

출처

2013-07-12 Jasper

어디 HTML 및 CSS 소스 코드 ??? – falguni

http://stackoverflow.com/help/how-to-ask + http://stackoverflow.com/help/dont-ask – Paritosh

그리고 어떤 이미지입니까? 나는 그런 일에 대해 svg을 추천 해 줄 것이다. 그리고 아마도 내가 기억한다면 svg를 사용하는 raphael.js (예 : http://raphaeljs.com/australia.html 참조)와 같은 것을 사용합니다. –

-2

이 문제에 대한 두 가지 방법이 있습니다 ... 한 것을 이해할 수 없다,

먼저 전체 이미지를 가져 와서 HTML을 사용하여 이미지 맵을 만듭니다. 그렇지 않으면 http://www.image-maps.com/ 이미지 맵을 쉽게 만들 수 있습니다. 링크를 클릭하면 이미지 맵 부분에 스타일을 적용하기 만하면됩니다.

두 번째와 최고의 Google지도 API와 함께 갈 것입니다, 당신이 구글 맵 문서의 전체 문서를 찾을 수 있습니다.

그러나이 요구 사항에 대한 전체 소스는 나에게 이해가되지 않습니다 기대 :) 위의 옵션을 사용해보십시오.

출처

2013-07-12 05:52:36 Exception

이 코드가 도움이해야합니다, 나는 생각한다 !!!! jquery.maphilight.js :

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

출처

2013-07-12 06:23:50 GilbertOOl

마우스 오버에 강조지도 영역이 이미가 제공하는 우리의 클래스 (예를 .usaMap) 또는 ID (예 #usaMap)에 좋습니다. 이미지 자체에 강조 마우스 오버의 그것의 사용의 예는 많다.

는 별도의 텍스트 링크에서, 이미지 영역을 강조하기 위해, 우리가 무엇을 할 수 있습니다 : 당신이 이미지 영역의 마우스 오버를 모방 할 수

<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>

는 이미지 맵은 가정 , href 링크에서 :

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

이것은 가장 깔끔한 해결책은 아니지만 그 일을합니다.

출처

2013-07-12 07:19:13 Jasper

하이라이트 이미지 영역 - 링크를 클릭했을 때

답변

관련 문제