99
사람들은 여전히 이전 HTML 이미지 맵을 사용합니까? 다음을 추가 한 사용자 :HTML 이미지 맵은 아직 사용하고 있습니까?
<map name="test" id="test">
<area shape="poly" alt="" title="" coords=...
더 좋은 방법이 있습니까?
A
답변
46
예, 사람들은 여전히 이미지 맵을 사용합니다. 대안으로는 절대 위치 지정과 CSS를 사용하여 요소를 배치하는 것이지만 반드시 좋을 것은 아닙니다. 또한 이미지 맵과 같은 모양을 가질 수 없습니다.
17
예 html 이미지 맵은 특히 영역을 다각형으로 만들 때 유용합니다. 롤오버 효과를 자바 스크립트로지도에 추가 할 수 있습니다. 이 여기에 좋은 튜토리얼 및 데모입니다 :
http://www.tutorialized.com/view/tutorial/Image-Map-Rollover/3484
+7
+1 - CSS와 절대 위치 지정을 많이 할 수 있지만 이미지 맵은 직사각형이 아닌 다각형 영역에서 호버를 감지하는 유일한 방법입니다. – Blazemonger
43
They are in the HTML5 specification는, 그래서 그들은 더 이상 사용되지되지 않습니다.
자유롭게 사용할 수는 있지만 여전히 웹 개발 분야에 있습니다. 또는 제가 드문 경우는 이미지 맵으로 가장 잘 해결할 수있는 곳이 있다는 것입니다.
15
CSS 나 이미지 맵을 사용하는 대안은 HTML 돔에 SVG 그래픽을 삽입하는 것입니다. 이 기술을 사용하여 마우스 오버 효과를 달성하는 방법에 대한
한 튜토리얼은이 설명서에 설명되어 있습니다 : http://www.petercollingridge.co.uk/data-visualisation/mouseover-effects-svgs
주요 테이크 아웃되는 것을 SVG 요소도 onmouseout onMouseover와 및 을 포함하여 기존의 DOM 이벤트를 트리거합니다.
+1
+1 SVG는 상호 작용이 임의의 모양을 가질 수 있기 때문에 이미지 맵에 가장 적합한 직접적인 대안입니다. SVG 요소에 이미지 채우기를 제공함으로써 벡터 좌표가 래스터 픽셀 이미지를 잘라내는 곳에서 이미지 맵과 매우 유사한 것을 만들 수 있습니다 (http://stackoverflow.com/questions/3796025/fill-svg-path-element-with). -a-background-image). 그러나 그때조차도 지역지도가 더 좋을 수도 있습니다 (더 간단하고 때로는 바람직하지 않을 수있는 이미지를 자르지 않습니다). – user568458
10
이미지지도는 여전히 모든 브라우저에서 지원되는 HTML5 사양입니다.
는 그들은 jQuery를 RWD의 이미지 맵을 사용하여 반응 설계에 적용 할 수 있습니다 : 그것은 감지하고 자동으로 이미지가 좌표를 매핑 크기를 조정 https://github.com/stowball/jQuery-rwdImageMaps
.
또한 플러그인으로 워드 프레스 개발자를위한 사용할 수 : http://wordpress.org/plugins/responsive-image-maps/
간단하고 효과적인 솔루션.
5
예, 아직 마지막 이미지는 Raphaël을 사용했지만 이미지 맵을 사용합니다. 뭔가를 가져 와서 실행하는 것은 꽤 쉬웠습니다. 자신의 웹 사이트에서
http://dmitrybaranovskiy.github.io/raphael/
:
라파엘 [ 'ræfeɪəl]는 그래픽을 생성하기위한 기초로서 SVG의 W3C 권고와 VML을 사용한다. 즉, 만든 모든 그래픽 객체가 이고 DOM 객체이기 때문에 나중에 JavaScript 이벤트 핸들러를 첨부하거나 나중에 수정할 수 있습니다. Raphaël의 목표는 드로잉 벡터 아트를 브라우저 간 호환으로 쉽게 만들 수있는 어댑터를 제공하는 것입니다.
좋은 간단한 이미지 맵 예제 : 나는 거의 그들이 더 이상 현대 웹 사이트에서 사용 참조 없지만
3
, 그들은 그들의 이메일 캠페인에 내 클라이언트가 사용하는 것 같다 않습니다. 그러나 나는 모바일 장치의 좌표계에 스케일링 문제가 있다는 것을 알아 냈습니다. confirmed.
**이 스레드는 오래된 것으로 알고 있습니다. 최근 이메일 캠페인 문제에 대한 추가 연구를 진행하고 있었으며 다른 사용자에게 도움이 될 수 있다고 생각했습니다.
-1
이미지 맵은 HTML과 HTML5에서 꽤 흥미로운 옵션은 여전히 사용되고 있습니다 내가 개인적으로 그래 내가 경험은 내가 내 자신 그러나이 난 때문에 내 문제가
스케일링에 relatd되는 모바일 장치에서 issuse을 찾으 사랑 학생이와 내가 w3chools 링크를http://www.w3schools.com/html/html_images.asp
당신은 더 나은 뭔가를이 있는지 물어 보면이 [페이지
에서 많이 얻을 것입니다 여부에 따라 싶습니다 begineers를 들어, HTML을 쉬 HTML5에 등록입니다 ould 비교를위한 수단을 제공합니다. 어떤 방법으로, 또는 어떤 목적으로 더 좋습니까? 우리가 처분 할 때 이미지 맵보다 더 강력한 도구가 있습니다. 더 복잡한 것도 있습니다 ... –
좋은 점 - 오랜 시간 동안 이미지 맵을 사용하지 않아서 코딩의 개선 된 방법으로 대체되었을 수 있다고 생각했습니다. – ss888
Javascript/layer 기반 기능과 플래시가 내가 만난 모든 것의 이미지 맵을 대체했습니다 ... 내가 현역에서 마지막으로 본 것을 기억할 수 없습니다. 특정 목적을 염두에두면보다 구체적인 대답을 더 쉽게 얻을 수 있습니다 :) –