[html] HTML 이미지 맵이 여전히 사용됩니까?
사람들이 여전히 이전 HTML 이미지 맵을 사용합니까? 다음을 가진 사람 :
<map name="test" id="test">
<area shape="poly" alt="" title="" coords=...아니면 더 새롭고 더 나은 대안이 있습니까?
답변
예, 사람들은 여전히 이미지 맵을 사용합니다. 대안은 절대 위치 지정 및 CSS를 사용하여 요소를 배치하는 것이지만 이것이 반드시 더 나은 것은 아닙니다. 또한 이미지 맵과 같은 모양을 가질 수 없습니다.
답변
HTML5 사양 에 있으므로 지원 중단되지 않습니다.
여전히 자유롭게 사용할 수 있으며 웹 개발에서 여전히 자리를 차지하고 있습니다. 또는 이미지 맵으로 문제를 가장 잘 해결할 수있는 드문 경우가 존재한다고 말할 수 있습니다.
답변
CSS 또는 이미지 맵 사용에 대한 대안은 HTML dom에 포함 된 SVG 그래픽을 사용하는 것입니다.
이 기술을 사용하여 마우스 오버 효과를 얻는 방법에 대한 하나의 자습서가이 자습서에 설명되어 있습니다. http://www.petercollingridge.co.uk/data-visualisation/mouseover-effects-svgs
중요한 점은 SVG 요소가 onmouseover 및 onmouseout을 포함한 전통적인 dom 이벤트를 트리거한다는 것입니다 .
답변
예 html 이미지 맵은 특히 귀하의 영역이 다각형 이길 원하는 경우 좋습니다. 자바 스크립트를 사용하여지도에 롤오버 효과를 추가 할 수도 있습니다. 여기에 멋진 튜토리얼과 데모가 있습니다.
http://www.tutorialized.com/view/tutorial/Image-Map-Rollover/3484
답변
이미지 맵은 여전히 모든 브라우저에서 지원되는 HTML5 사양입니다.
jQuery RWD 이미지 맵을 사용하여 반응 형 디자인에 적용 할 수 있습니다.
https://github.com/stowball/jQuery-rwdImageMaps
이미지 맵 좌표를 감지하고 자동으로 크기를 조정합니다.
또한 WordPress 개발자가 플러그인으로 사용할 수 있습니다 :
http://wordpress.org/plugins/responsive-image-maps/
간단하고 효과적인 솔루션.
답변
예, 여전히 이미지 맵을 사용하지만 마지막 프로젝트에서 Raphaël을 사용했습니다. 무언가를 시작하고 실행하는 것은 매우 쉬웠습니다.
http://dmitrybaranovskiy.github.io/raphael/
웹 사이트에서 :
Raphaël [ ‘ræfeɪəl]은 SVG W3C 권장 사항과 VML을 그래픽 생성을위한 기반으로 사용합니다. 즉, 생성하는 모든 그래픽 객체는 DOM 객체이기도하므로 JavaScript 이벤트 핸들러를 첨부하거나 나중에 수정할 수 있습니다. Raphaël의 목표는 벡터 아트와 브라우저 간 호환이 가능하고 쉽게 그릴 수있는 어댑터를 제공하는 것입니다.
멋진 간단한 이미지 맵 예 :
답변
더 이상 최신 웹 사이트에서 사용되는 것을 거의 볼 수 없지만 고객이 이메일 캠페인에서 사용하는 것 같습니다. 그러나 모바일 장치의 좌표계에 몇 가지 크기 조정 문제가 있음 을 확인 하고 확인했습니다 .
**이 스레드가 오래되었다는 것을 알고 있습니다. 최근 이메일 캠페인 문제에 대한 추가 조사를 수행 중이었고 다른 사람에게 도움이 될 것이라고 생각했습니다.
타사 편집
이미지 맵 지원에 대한 litmus.com의 질문은 2014 년 4 월 부터입니다.
이미지 맵은 ALT 태그를 지원하지 않습니다. 이미지가로드되지 않으면 ALT 텍스트가 일부 클라이언트에 표시되지 않습니다.
이미지 맵을 사용하면 일반적으로 큰 이미지를 사용하여 전 달성 문제를 일으키고 다운로드 속도를 저하시킬 수 있습니다 (특히 모바일 사용자에게 중요 함).
그리고 가장 중요한 것은 iOS (iphone / ipad)는 이미지의 크기가 조정되어 링크를 끊을 때 이미지 맵 링크 좌표를 조정하지 않는다는 것입니다. iOS는 이메일 열기의 대부분을 차지하므로 (iPhone + iPad = http://emailclientmarketshare.com/을 통해 38 % ) 이것은 중요합니다.
