HTML 이미지 맵과 함께 JQuery 호버 사용

HTML 이미지 맵과 함께 JQuery 호버 사용

---

롤오버 일러스트레이션 하이라이트가 필요한 많은 작은 영역이있는 복잡한 배경 이미지와 각 영역에 대한 추가 텍스트 표시 및 관련 링크가 있습니다. 최종 그림은 Z- 인덱스를 사용하여 투명도가있는 여러 정적 이미지를 스택하고 원하는 효과를 얻으려면 강조 표시 롤오버 그림을 중간 "샌드위치"레이어 중 하나에 표시해야합니다.

블록 조작에 실패한 후, 구식 이미지 맵으로이 작업을 수행 할 수 있다고 결정했습니다. 나는 네 개의 기하학적 모양 외곽선이있는 회로도 테스트 맵을 만들고 png 롤오버를 사용하여 "채웠습니다". 아이디어는 이미지 맵을 하단 배경 레이어와 연결하고 모든 롤오버를 css {visibility : hidden}로 초기화하고 Jquery의 hover 메서드를 사용하여 표시하고 별도의 div에 관련 텍스트를 표시하는 것입니다. 별도의 텍스트 함수는 jQuery hover 대신 : hover 의사 클래스를 사용하여 이것을 시도하지 않는 이유입니다. 이미지 맵을 사용하고 있었기 때문에 모든 롤오버 png (투명 배경이있는)를 전체 컨테이너 크기로 만들어 정확한 배치를 위해 모든 것이 정확하게 정렬되도록했습니다.

내가 얻은 것은 ... 진짜가 아니야! 이미지 맵이 올바르게 매핑되어 기하학적 영역 만 활성화됩니다. 그러나 각 롤오버 영역의 href는 간헐적으로 만 작동하며 CSS 가시성과 함께 Jquery hover를 사용하는 것은 엉망입니다. 원하는 동작은 해당 영역으로 구르면 모양이 단단해집니다. 실제로 발생하는 것은 모양 내부의 모든 동작이 가시성과 숨김 사이를 빠르게 전환하는 것입니다. 커서가 셰이프 내에서 멈 추면 표시되거나 표시되지 않을 수 있습니다. 어떤 아이디어라도 감사합니다!

샘플 호버 설정 (최종적으로 실제 롤오버, 관련 링크 및 텍스트에 배열을 사용합니다) :

$('#triangle').hover(
    function() {
        $('#ID_triangle').css({'visibility' : 'visible'});
    },
    function() {
        $('#ID_triangle').css({'visibility' : 'hidden'});
    }
)

이미지 맵 :

<div id="container">
    <img src="images/testMap_w.png" width="800" height="220" alt="TestMap W" usemap="#testMap">
    <map name="testMap">
        <area shape="polygon" coords="20,20,106,20,106,106,20,106" href="http://www.stackoverflow.com" id="box" />
        <area shape="polygon" coords="216,50,339,50,277,156" href="http://www.google.com" id="triangle" />
        <area shape="polygon" coords="460,0,574,0,460,220" href="http://www.cnn.com" id="bordertriangle" />
        <area shape="polygon" coords="704,65,769,115,744,196,665,196,640,115" href="http://slashdot.org" id="pentagon" />
    </map>
    <img src="images/testMap_box.png" width="800" height="220" alt="TestMap Box" id="ID_box">
    <img src="images/testMap_triangle.png" width="800" height="220" alt="TestMap Triangle" id="ID_triangle">
    <img src="images/testMap_border_triangle.png" width="800" height="220" alt="TestMap Border Triangle" id="ID_bordertriangle">
    <img src="images/testMap_pentagon.png" width="800" height="220" alt="TestMap Pentagon" id="ID_pentagon">
</div>

---

이 플러그인을 확인해야합니다.

https://github.com/kemayo/maphilight

및 데모 :

http://davidlynch.org/js/maphilight/docs/demo_usa.html

어떤 경우 든 코드를 빌려 코드를 수정할 수 있습니다.

---

이 질문은 오래되었지만 당시에는 존재하지 않았던 수락 된 답변에 대한 대안을 추가하고 싶었습니다.

Image Mapster는 Map Hilight의 일부 단점을 해결하기 위해 작성한 jQuery 플러그인입니다 (처음에는 거의 완전히 다시 작성되었지만 해당 플러그인의 확장 버전이었습니다). 처음에는 영역에 대한 선택 상태를 유지하고 브라우저 호환성 문제를 해결하는 기능이었습니다. 하지만 몇 달 전 처음 출시 된 이후로 하이라이트의 소스로 대체 이미지를 사용하는 기능을 포함하여 많은 기능을 추가했습니다.

또한 영역을 "마스크"로 식별하는 기능이 있습니다. 즉, "구멍"이있는 영역을 만들고 추가로 복잡한 영역 그룹을 만들 수 있습니다. 예를 들어, 영역 A는 다른 영역 B를 강조 표시 할 수 있지만 영역 B 자체는 마우스 이벤트에 응답하지 않습니다.

웹 사이트에는 대부분의 기능을 보여주는 몇 가지 예가 있습니다. GitHub의 저장소는 또한 더 많은 예제와 전체 문서가 있습니다.

---

나는 과거에 사용한 이 멋진 매핑 스크립트 ( mapper.js )를 발견했습니다 . 다른 점은지도 또는 페이지의 링크 위로 마우스를 가져가지도 영역을 강조 표시 할 수 있다는 것입니다. 슬프게도 자바 스크립트로 작성되었으며 HTML에서 많은 인라인 코딩이 필요합니다.이 스크립트가 jQuery로 포팅되는 것을보고 싶습니다.

또한 모든 데모를 확인하십시오! 이 예제 는 플래시를 사용하지 않고 간단한 온라인 게임으로 거의 만들 수 있다고 생각 합니다 . 다른 카메라 각도를 클릭해야합니다.

---

jQuery Maphilight 플러그인이 작업을 수행하지만 HTML의 오래된 자세한 이미지 맵에 의존합니다. 지도 좌표를 외부에 유지하고 싶습니다. 이것은 jquery imagemap 플러그인을 사용하는 JS 일 수 있지만 호버 상태가 없습니다. 좋은 해결책은 플래시와 JS에서 구글의 지오 맵 시각화입니다. 그러나 이러한 종류의 벡터 데이터에 대한 오픈 소스 미래는 모든 최신 브라우저에 대한 svg 지원과 IE 용 플래시 변환 용 Google의 svgweb을 고려할 때 svg입니다. jquery 플러그인을 사용하여 링크 및 hoverstates를 svg지도에 추가하는 것이 좋습니다. 여기 ? 이렇게하면 벡터 맵을 이미지 맵 좌표로 변환하는 복잡한 단계도 피할 수 있습니다.

참고 URL : https://stackoverflow.com/questions/745110/using-jquery-hover-with-html-image-map