HTML 이미지 맵이 여전히 사용됩니까?

113

사람들이 여전히 이전 HTML 이미지 맵을 사용합니까? 다음을 가진 사람 :

<map name="test" id="test">
<area shape="poly" alt="" title="" coords=...

아니면 더 새롭고 더 나은 대안이 있습니까?

html imagemap

— ss888
소스

1

더 나은 것이 있는지 여부를 물을 때 비교 수단을 제공해야합니다. 어떤 방식으로 또는 어떤 목적으로 더 좋습니까? 우리가 처리 할 수있는 이미지 맵보다 더 강력한 도구가 있으며 더 복잡합니다.

— Jeff Parker

2

좋은 점-이미지 맵을 오랫동안 사용하지 않았고 개선 된 코딩 방법으로 대체되었을 수 있다고 생각했습니다.

— ss888 2011 년

1

자바 스크립트 / 레이어 기반 기능과 플래시는 제가 접하는 거의 모든 것에서 이미지 맵을 대체했습니다. 제가 마지막으로 현역에서 본 것을 기억할 수 없습니다. 하지만 특정 목적을 염두에두고 있다면 더 구체적인 답변을 더 쉽게 구할 수 있습니다. :)

— Jeff Parker

21

차라리이 시대에 Flash를 피하고 싶습니다.

— ss888 2011 년

4

신속하고 빠르게 실행하며 약간의 사악한 것을 찾고 있다면 이미지 맵이 그 일을 할 것입니다. 내 마음에 동일한 속도로 작업을 수행 할 널리 지원되는 대체품은 없습니다. 이제 SVG, Canvas를 사용할 시간이 있고 지원되는 브라우저 목록에서 IE를 제외해도 괜찮다면 ...

— Jeff Parker

53

예, 사람들은 여전히 이미지 맵을 사용합니다. 대안은 절대 위치 지정 및 CSS를 사용하여 요소를 배치하는 것이지만 이것이 반드시 더 나은 것은 아닙니다. 또한 이미지 맵과 같은 모양을 가질 수 없습니다.

— JohnP
소스

그래, html 이미지 맵이 여전히 좋은가요? 호버 / 롤오버 효과를 추가하는 것은 어떻습니까?

— ss888 2011 년

이미지 맵의 주요 문제는 연결된 이미지와 달리 브라우저 또는 화면 크기로 확장되지 않는다는 것입니다. OP가 SVG 형식을 연구하기를 바랍니다

— Martin

2

이미지의 크기에 따라 크기를 조정해야합니다. 창 크기에 비례하여 이미지 크기를 만듭니다. 그런 다음 항상 너비 / 높이 비율을 이미지 맵 비율과 비교 한 다음 javascript를 사용하여 좌표를 덮어 씁니다. jquery 기반 이미지 크기 이벤트 핸들러는 $ (window) .resize (function () {.... yourcode ...});

— skidadon

46

HTML5 사양 에 있으므로 지원 중단되지 않습니다.

여전히 자유롭게 사용할 수 있으며 웹 개발에서 여전히 자리를 차지하고 있습니다. 또는 이미지 맵으로 문제를 가장 잘 해결할 수있는 드문 경우가 존재한다고 말할 수 있습니다.

— 카파
소스

19

CSS 또는 이미지 맵 사용에 대한 대안은 HTML dom에 포함 된 SVG 그래픽을 사용하는 것입니다.

이 기술을 사용하여 마우스 오버 효과를 얻는 방법에 대한 하나의 자습서가이 자습서에 설명되어 있습니다. http://www.petercollingridge.co.uk/data-visualisation/mouseover-effects-svgs

중요한 점은 SVG 요소가 onmouseover 및 onmouseout을 포함한 전통적인 dom 이벤트를 트리거한다는 것입니다 .

— 노먼 H
소스

1

+1 SVG는 임의의 모양과 상호 작용할 수 있으므로 이미지 맵에 대한 최고의 직접적인 대안입니다. SVG 요소에 이미지 채우기를 제공 하여 벡터 좌표가 래스터 픽셀 이미지를 자르는 이미지 맵과 매우 유사한 것을 만들 수 있습니다 . 하지만 그런 경우에도 지역지도가 더 좋은 경우도 있습니다 (더 간단하고 이미지를 자르지 않는 경우도 있습니다. 이는 때때로 바람직 할 수 있습니다).

— user56reinstatemonica8 2014 년

18

예 html 이미지 맵은 특히 귀하의 영역이 다각형 이길 원하는 경우 좋습니다. 자바 스크립트를 사용하여지도에 롤오버 효과를 추가 할 수도 있습니다. 여기에 멋진 튜토리얼과 데모가 있습니다.

http://www.tutorialized.com/view/tutorial/Image-Map-Rollover/3484

— LostLin
소스

8

+1-CSS 및 절대 위치 지정으로 많은 작업을 수행 할 수 있지만 이미지 맵은 여전히 사각형이 아닌 다각형 영역에서 호버를 감지하는 유일한 방법입니다.

— Blazemonger

10

이미지 맵은 여전히 모든 브라우저에서 지원되는 HTML5 사양입니다.

jQuery RWD 이미지 맵을 사용하여 반응 형 디자인에 적용 할 수 있습니다. https://github.com/stowball/jQuery-rwdImageMaps

이미지 맵 좌표를 감지하고 자동으로 크기를 조정합니다.

또한 Wordpress 개발자가 플러그인으로 사용할 수 있습니다 : http://wordpress.org/plugins/responsive-image-maps/

간단하고 효과적인 솔루션.

— 다니엘 B
소스

9

예, 여전히 이미지 맵을 사용하지만 마지막 프로젝트에서 Raphaël을 사용했습니다. 무언가를 시작하고 실행하는 것은 매우 쉬웠습니다.

http://dmitrybaranovskiy.github.io/raphael/

웹 사이트에서 :

Raphaël [ 'ræfeɪəl]은 SVG W3C 권장 사항과 VML을 그래픽 생성을위한 기반으로 사용합니다. 즉, 생성하는 모든 그래픽 객체는 DOM 객체이기도하므로 JavaScript 이벤트 핸들러를 첨부하거나 나중에 수정할 수 있습니다. Raphaël의 목표는 벡터 아트와 브라우저 간 호환이 가능하고 쉽게 그릴 수있는 어댑터를 제공하는 것입니다.

멋진 간단한 이미지 맵 예 :

http://dmitrybaranovskiy.github.io/raphael/australia.html

— 데이비드 뉴콤
소스

2

신음하고 반대하는 대신 직접 링크를 고치는 데는 많은 시간이 걸리지 않았을 것입니다. :(

— David Newcomb

2

Dear David, 나는 반대표를 제거했습니다. 단순히 끊어진 링크를 어떻게 수정 하시겠습니까? http://raphaeljs.com/완전히 제거 하고 Github 예제 만 제공합니다.

— orschiro

6

스택 사이트의 핵심은 협업입니다. 깨진 링크가 보이면 가능한 경우 수정하십시오. 끊어진 링크의 관점에서 생각하지 마십시오. 리소스에 대한 끊어진 포인터입니다. 리소스가 이동 된 경우 링크를 업데이트하여 리소스의 새 위치를 가리 키도록합니다. 이것이 중요한 것입니다. Raphaeljs는 자체 사이트를 가지고 있었지만 분명히 GitHub로 이동했습니다. 사람들을 Google로 돌려 보내어 지금 사는 곳을 찾나요? 아니면 그들이 여기서 나가도록 도와 줄까요? 호주의 예는 다른 곳에 사는 것과 같은 예입니다.

— 데이비드 뉴컴

http://raphaeljs.com/도메인 등록이 만료되지만 재 직접 (세계에서) 자신의 링크를 업데이트 할 수있는 기회를 모두 제공 할 지금에있을 때 링크는 결국 중단됩니다. 아마도 @orschiro는 기사의 하나부터 시작하여 여기 SO에서 공동 작업에 추가 할 수 있습니다.

— 데이비드 뉴컴

1

알겠습니다. 감사합니다 David! 답장을 업데이트하고 링크를 수정했습니다. :-)

— orschiro

4

더 이상 최신 웹 사이트에서 사용되는 것을 거의 볼 수 없지만 고객이 이메일 캠페인에서 사용하는 것 같습니다. 그러나 모바일 장치의 좌표계에 몇 가지 크기 조정 문제가 있음 을 확인 하고 확인했습니다 .

**이 스레드가 오래되었다는 것을 알고 있습니다. 최근 이메일 캠페인 문제에 대한 추가 조사를 수행 중이었고 다른 사람에게 도움이 될 것이라고 생각했습니다.

타사 편집

이미지 맵 지원에 대한 litmus.com의 질문은 2014 년 4 월 부터입니다.

이미지 맵은 ALT 태그를 지원하지 않습니다. 이미지가로드되지 않으면 ALT 텍스트가 일부 클라이언트에 표시되지 않습니다.

이미지 맵을 사용하면 일반적으로 큰 이미지를 사용하여 전 달성 문제를 일으키고 다운로드 속도를 저하시킬 수 있습니다 (특히 모바일 사용자에게 중요 함).

그리고 가장 중요한 것은 iOS (iphone / ipad)는 이미지의 크기가 조정되어 링크를 끊을 때 이미지 맵 링크 좌표를 조정하지 않는다는 것입니다. iOS는 이메일 열기의 대부분을 차지하므로 (iPhone + iPad = http://emailclientmarketshare.com/을 통해 38 % ) 이것은 중요합니다.

— 스핀들 79
소스

0

예, 여전히 사용되었습니다.

이미지 맵은 사용자가 이미지의 다른 부분을 클릭하여 여러 페이지로 하이퍼 링크 할 수 있도록합니다. 이미지 맵을 사용하여 동일한 이미지의 특정 영역과 관련된 좌표 목록을 만들고 다른 위치에 하이퍼 링크를 제공합니다. 단일 이미지 내에서 이것을 사용하여 여러 링크를 제공합니다.

더

— Srikrushna
소스

-2

이미지 맵은 html 및 html5에서 매우 흥미로운 옵션이며 여전히 사용 중이며 개인적으로 좋아하므로 모바일 장치에서 issuse를 찾습니다. 내 문제는 크기 조정과 관련이 있습니다.

예, 경험이 있습니다. 그러나 저는 html html5에 등록 된 학생이며 초보자를 위해 w3chools 링크를 따르고 싶습니다.

http://www.w3schools.com/html/html_images.asp

당신은이 [페이지

— 슈아 이크발
소스