이미지 맵

Image map
Wikipedia 의 이미지 맵에 대해서는, 「확장:이미지 맵

HTML 및 XHTML에서 이미지 맵은 특정 이미지에 관련된 좌표 목록으로, 이미지의 영역을 다른 수신처에 하이퍼링크하기 위해 작성됩니다(이미지의 전체 영역이 단일 수신처에 링크되는 일반 이미지 링크와는 반대).예를 들어, 세계 지도는 각 국가를 해당 국가에 대한 추가 정보로 하이퍼링크할 수 있습니다.이미지 맵의 목적은 이미지를 별도의 이미지 파일로 분할하지 않고 이미지의 다양한 부분을 쉽게 링크하는 방법을 제공하는 것입니다.

서버측

서버측 이미지 맵은 Mosaic(웹 브라우저) 버전 1.1에서 [1]처음 지원되었습니다.서버측 이미지 맵을 사용하면 웹 브라우저는 사용자가 이미지 내에서 클릭하는 위치에 대한 위치 정보를 서버로 전송할 수 있습니다.이를 통해 서버는 응답으로 반환할 콘텐츠를 픽셀 단위로 결정할 수 있습니다(이미지 마스크레이어, 데이터베이스 쿼리 또는 서버상의 컨피규레이션파일을 사용할 수 있습니다).

이런 유형의 서버 측 이미지 맵의 HTML 코드에는 다음 항목이 필요합니다.<img>앵커 태그 안에 들어가는 태그<a>...</a>및 그<img>를 포함해야 합니다.ismap기여하다. 

< >a href="/어드밴스드"/mapper"><img src="image.png" ismap /> //a>

사용자가 이미지 내부를 클릭하면 브라우저는 X 좌표와 Y 좌표(이미지 왼쪽 상단 모서리에 상대)를 앵커 URL에 쿼리 문자열로 추가하고 결과 URL에 액세스합니다[2](예:/imagemapper?3,9).

브라우저가 지원하지 않는 경우ismap쿼리 문자열을 앵커 URL에 추가하지 않고 서버가 적절하게 응답해야 합니다(예를 들어 텍스트 전용 네비게이션페이지 반환).

클라이언트측

클라이언트측 이미지 맵은 HTML 3.2에서 도입되어 서버에서 특별한 로직을 실행할 필요가 없습니다(완전 클라이언트측).또한 JavaScript도 필요하지 않습니다.

순수 HTML

HTML의 클라이언트 측 이미지 맵은 다음 두 부분으로 구성됩니다.

  1. 실제 이미지에는<img>태그. 이미지 태그에는 이 이미지에 사용할 이미지 맵의 이름을 지정하는 속성 usemap이 있어야 합니다(1페이지에 여러 이미지 맵이 존재할 수 있습니다).
  2. A <map>그리고 그 안에,<area>각 요소는 이미지 맵 내에서 클릭 가능한 단일 영역을 정의합니다.이것들은 와 비슷합니다.<a> tag일반 웹 링크에 대해 열어야 하는 URL을 정의합니다.atitle데스크톱 사용자가 마우스 포인터를 영역 위로 이동하면 툴팁으로 렌더링할 수 있습니다.Web 액세스의 이유로, 대부분의 경우, 이러한 기능을 제공하는 것이 중요하며, 경우에 따라서는 법적 또는 계약상의 요건일 수도 있습니다.alt화면 리더 소프트웨어가 시각장애인 사용자에게 [3]읽을 수 있는 링크를 설명하는 속성입니다.

그<area>요소는 직사각형일 수 있습니다.shape="rect"폴리곤(shape="poly"또는 동그라미(shape="circle"). 쉐이프 값은 좌표 쌍입니다.각 쌍에는 X와 Y 값이 있으며(이미지의 왼쪽 위부터) 쉼표로 구분됩니다.

  • 직사각형:4개의 좌표 설정: "x1,y1,x2,y2"
  • 폴리곤:원하는 만큼 좌표를 설정합니다(2의 배수)."x1,y1,x2,y2,[...xn,yn]"
  • 원: 하나의 좌표 쌍과 반지름이 "x1,y1,radius"인 다른 값

다음 예제에서는 직사각형 영역("9,372,66,397")을 정의합니다.사용자가 이 영역 내 아무 곳이나 클릭하면 영어 위키피디아 홈페이지로 이동합니다. 

< >img src="image.png" 알트="웹 사이트 지도" 사용 맵="#mapname" /> < >지도 이름.="맵명">   < >지역 모양.='직접' 코디자이너스="9,372,66,397" href="https://en.wikipedia.org/" 알트="위키피디아" 직함="위키피디아" /> </지도>

CSS

보다 현대적인 접근방식은 CSS 절대위치를 사용하여 이미지에 링크를 오버레이하는 것입니다.단, 이는 클릭 가능한 직사각형 영역만을 지원합니다.이 CSS 기술은 이미지 맵을 iPhone에서 올바르게 동작시키기 위해 적합할 수 있습니다.순수한 HTML 이미지 맵의 스케일을 올바르게 조정하지 못할 수 있습니다.

작성 및 사용

An unknown portraitunknown paintingprob. The Infant Academy 1782Boswell - BiographerDr Johnson - Dictionary writerSir Joshua Reynolds - HostDavid Garrick - actorEdmund Burke - statesmanPasqual Paoli - Corsican patriotCharles Burney - music historianservant - poss. Francis BarberThomas Warton - poet laureateOliver Goldsmith - writerUse button to enlarge or use hyperlinks
The Club의 이미지 맵 예시.사진 속 인물을 클릭하면 브라우저가 해당 문서를 로드합니다.

텍스트 에디터를 사용하여 클라이언트 측 이미지 맵을 수동으로 작성할 수 있지만, 그러기 위해서는 웹 디자이너가 HTML을 코드화하는 방법 및 이미지 위에 배치하고 싶은 영역의 좌표를 열거하는 방법을 알아야 합니다.그 결과, 손으로 코드화한 대부분의 이미지 맵은 단순한 폴리곤입니다.

텍스트 에디터에서 이미지 맵을 작성하려면 많은 시간과 노력이 필요하기 때문에 웹 디자이너가 벡터 그래픽 에디터에서 형상을 작성하는 것처럼 빠르고 쉽게 이미지 맵을 작성할 수 있도록 설계되어 있습니다.이러한 애플리케이션의 예로는 Adobe의 Dreamweaver 또는 KImageMapEditor(KDE용), GIMP에 있는 imagemap 플러그인이 있습니다.

클릭 가능한 영역을 명확히 하지 않는 이미지 맵은 사용자가 미스테리한 고기 탐색에 노출될 위험이 있습니다.설령 그렇다 해도 어디로 이끌지는 분명치 않을 것이다.이 문제는 롤오버 [4]효과를 통해 부분적으로 해결할 수 있습니다.

SVG 이미지

Scalable Vector Graphics(SVG; 스케일러블 벡터그래픽) 이미지 포맷은 하이퍼링크[5] 및 기타 보다 정교한 형식의[6] 인터랙티브를 이미지에 추가하기 위한 자체 메커니즘을 제공하므로 SVG 형식의 벡터이미지를 사용하는 경우 일반적으로 기존의 이미지 맵테크놀로지는 필요하지 않습니다.

「 」를 참조해 주세요.

레퍼런스

  1. ^ "IMG extension for Mosaic 1.1".
  2. ^ "HTML: The Markup Language (an HTML language reference)".
  3. ^ "Image Maps in HTML". AccessAbility. Penn State University. Retrieved 6 October 2013.
  4. ^ Flanders, Vincent (March 1998). Web Pages That Suck: Learn Good Design by Looking at Bad Design. San Francisco: Sybex Inc. ISBN 978-0-7821-2187-2.
  5. ^ "SVG specification: Linking". World Wide Web Consortium. 16 August 2011. Retrieved 24 June 2019.
  6. ^ "SVG specification: Interactivity". World Wide Web Consortium. 16 August 2011. Retrieved 24 June 2019.