이미지 맵 및 HTML5

이 질문은 기술적 인 것보다 철학적입니다.이미지 맵 및 HTML5

나는 웹 개발자가 웹 마스터 불렸다 선택의 내 도구는 내가 HTML 이미지 맵을 사용하는 마지막이었다 Evrsoft 1 페이지 2000

로 이동, FrontPage를했다 다시 때 웹 개발자로 자신을 훈련했습니다 .

이제 HTML5, AJAX, 벡터 캔버스, CSS 3D, jQuery, 로컬 저장소, 터치 스크린 Safari, 이름을 지정합니다. 이미지 맵은 Google에서도 너무 많은 관련 결과가 나오지 않는 어둠 속으로 사라졌습니다. W3C Schools의 필수 항목 및 2004 년의 포럼 게시물이 있습니다.

분명히 이미지 맵을 사용하여 웹 사이트 내비게이션 또는 유사한 사소한 이미지를 만드는 것은 나쁜 생각 이었지만 오늘날에는 확실히 용서 할 수 없습니다.

하지만 지금은 배경 이미지가있는 div 상단에 다각형 클릭 가능 영역을 만드는 작업이 있습니다.

이미지 맵에서이 작업을 수행하면 문제가 발생하지 않을 것입니다. 사용 사례와 정확히 같은 용도로 설계된 것 같아서 테스트를 수행하지 않은 동안에는 브라우저에서 엘리먼트는 수년간 아름답게 작동했습니다. 그러나 나는 오늘 이것을 할 수있는 더 좋은 방법이 있어야한다고 생각합니다.

내 웹 제작 철학은 IE5.5 용으로 개발 한 다음 Chrome Edge 용으로 디자인하는 것입니다. 즉, 사이트가 가장 오래된 브라우저에서도 기본적인 수준으로 작업해야하며 JS & CSS를 추가하여 더 아름답고, 유용하고, 빠르며, 더 간단하고, 친근하고, 더 좋게 만듭니다.

마찬가지로 Raphaël에서 캔버스를 만들 수 있고 모든 종류의 멋진 호버 효과 및 사물을 추가 할 수 있다는 것을 알고 있지만 89kb (또는 X kb) JS 라이브러리가 필요하지 않은만큼 기능이 단순하다고 생각합니다. . 아니면 심지어 JS.

CSS3에 다각형 영역을 정의 할 수있는 기능이 있는지는 잘 모르겠지만 CSS3에서 소개 된 큰 가능성을 인식하면서 정상적으로 저하되는 비 필수적인 요소로 정의 된 것을 유지하는 것이 좋습니다. (JQuery와 .hover()에 의해 grabbable, 또는 적어도이 CSS :hover 바람직 방식으로), 즉 의존하지 않는 다각형 클릭 영역을 정의하는 가장 크로스 브라우저의 방법이 될 것입니다 무슨 오늘날의 경우 Webdev 세계에서 그래서

, 소수의 브라우저에서 사용할 수있는 JavaScript 또는 CSS 속성? 이미지 맵은 실제로 그것을 수행하는 유일한 방법입니까? 모바일 장치 란 무엇입니까?

출처

2012-06-23 Emphram Stavanger

... IE5.5로 시작하는 것은 꽤 미친 것입니다. 정말로 너 자신을 아프게하고있다. 나는 꽤 높은 트래픽 사이트 (한 달에 대략 5 백만명의 방문자)를 가지고 있으며, 지난 3 년 동안 나는 IE6보다 낮은 것을 한 번도 방문하지 않았다. 지난 해 IE6은 사용자 기반의 약 2 %를 차지했습니다. – Loktar

IE5.5를 사용하는 사용자를 대상으로하지는 않으며 웹 사이트를 아름답게 보이게 만들지도 않습니다. 나는 IE5.5의 사본을 가지고 있어도 내 웹 사이트가 어떻게 보이는지 확인할 수 있습니다. 그러나 나이를 불문하고 (Lynx, Kindle, WAP/Nokia Navigator 시대의 브라우저, 스크린 리더 등) 가장 원시적 인 브라우저에서도 작업 할 수 있도록 웹 사이트를 구축 할 때이 사고 방식을 사용합니다. 콘텐츠 및 구조를 하나로 유지하고 snazz 및 flair를 다른 것으로 유지합니다. –

철학에 대한 설명은 없지만 자바 스크립트가없는 공통 분모를 설계하면 아키텍처가 매우 원시적 인 모델로 제한됩니다. 아니 아약스 야. HTTP 게시물을 통해 제출 된 모든 데이터? 클라이언트 로직 검증/로직/상호 작용이 없습니까? 아야. 모든 사용자가 1990 년대 시대의 웹 경험을 갖기를 원하지 않는 한 기본적으로 웹 사이트의 완전히 다른 두 가지 구현을 설계하는 것에 대해 이야기하고 있습니다. ajax 클라이언트/서버 모델을 "점진적으로 성능 저하"시킬 수는 없습니다. 당신은 사이트의 두 가지 버전을 만들고있을 것입니다. 보수 없이는 너무 많은 추가 작업 일뿐입니다. 누가 Lynx를 사용합니까? –

왜 내비게이션 용 이미지 맵을 사용할 수 없습니까? 그것은 다른 어떤 도구와도 같습니다. 시간과 장소가 있습니다. 자바 스크립트 향상 기능과 함께 imagemaps를 사용하면 이전 버전과 호환되고 정상적으로 성능이 저하되며 100 % 브라우저를 지원합니다. 그들은 플래시와 같은 플러그인을 필요로하지 않습니다. 그들은 웹 브라우저의 새벽부터 실질적으로 지원되어 왔습니다. 뭔가 낡은 것이 유용하지 않다는 것을 의미하지는 않습니다. 꽤 반대, 그것은 그것이 잘 지원된다는 것을 의미합니다.

ImageMapster이라는 jquery 플러그인을 작성하여 이미지 맵에 효과를 추가하여 플래시를 사용하지 않고도 대화식 이미지를 만들 수 있습니다. 이러한 경우에 목록으로 대체하여 Javascript 지원없이 동일한 기능을 갖춘 도구를 쉽게 구현할 수 있습니다. 개인적으로, 나는 자바 스크립트없이 웹을 작성하려고하는 것은 타이어없이 자동차를 운전하려는 것과 같다. 웹의 99 %가 더 이상 작동하지 않습니다. 그러나 이것이 정말로 걱정된다면, imagemaps에 대한 좋은 점은 기본 탐색 기능이 여전히 작동한다는 것입니다. 불규칙한 모양의 영역이있는 경우 CSS3만으로는 불가능합니다.

출처

2012-06-23 18:06:57

+1 "오래된! = 유용하지 않음". ''은 여전히 [HTML5 사양] (http://www.w3.org/TR/html5/the)의 [(일부)] (http://dev.w3.org/html5/markup/map.html)입니다. -map-element.html # the-map-element), "구식"은 "오래된"컨텍스트에서도 사용할 수 없습니다. 귀하의 웹 사이트에 대한 참고 사항 : 회 전자 (또는 페이지가로드된다는 표시)를 추가하면 사용자 경험이 향상됩니다. "야생에서": 데모가 "주거지"링크 아래에 있음을 언급합니다. 처음에는 스크린 샷이 방문 페이지와 일치하지 않아 연결이 끊어 졌다고 생각했습니다. –

의견에 감사드립니다. 예. 데모 페이지는 esp를로드하는 데 오랜 시간이 걸릴 수 있습니다. 휴대 기기에서 나는 그것을 최적화해야하고 &/또는 당신이 말하는대로하십시오. 나는 그 사이트의 총체적인 정비를하고 & docs를 깨끗하게 할 정말로 필요가있다. .. 단지 날의 충분한 시간이 아니다! "in the wild"링크에서 나는 이미 이렇게 말합니다 : –

.. 실제로 나는 방금 사이트 내비게이션에 페이지 로딩을위한 회 전자를 가지고 있음을 깨달았습니다. 나는 당신이 그것을 보지 못했다고 생각합니다. 빠른 불투명도 수정이 도움이 될 것 같습니다. –

답변

관련 문제