HTML의 영역 태그는 이미지 맵에서 영역을 설정하는 데 사용됩니다.
다음은 속성입니다 -
| 속성 | 값 | 설명 |
|---|---|---|
| 알트 | 텍스트 | 영역에 대한 대체 텍스트를 지정합니다. |
| 좌표 | 모양 ="직사각형"이면 좌표 ="왼쪽, 위쪽, 오른쪽, 아래쪽" if shape ="circ" then coords ="centerx, centery, radius" 모양 ="폴리"이면 좌표 ="x1, y1, x2, y2,..,xn, yn" | 이미지 맵에 대한 이미지 영역을 정의하기 위해 모양 속성에 적절한 좌표를 지정합니다. |
| 다운로드 | 파일 이름 | 사용자가 하이퍼링크를 클릭할 때 대상이 다운로드되도록 지정합니다. |
| href | URL | 페이지의 URL 또는 링크가 이동하는 앵커의 이름을 지정합니다. |
| hreflang | 언어 코드 | 대상 URL의 언어를 지정합니다. |
| 미디어 | 미디어 쿼리 | 대상 URL이 최적화된 미디어/장치를 지정합니다. |
| 없음 참조 | 참/거짓 | 이미지 맵에서 영역 제외 |
| rel | 대체 작가 서표 돕다 특허 다음 노팔로우 추천인 프리페치 이전 검색 꼬리표 | 현재 문서와 대상 URL 간의 관계를 지정합니다. |
| 모양 | 직사각형 직사각형 원 원 폴리 다각형 | 이미지 맵의 모양을 지정합니다. |
| 타겟 | _blank _부모의 _본인 _맨 위 | 대상 URL을 여는 위치입니다. _blank - 대상 URL이 새 창에서 열립니다. _self - 타겟 URL은 클릭했을 때와 같은 프레임에서 열립니다. _parent - 대상 URL이 상위 프레임셋에서 열립니다. _top - 창의 전체 본문에서 대상 URL이 열립니다. |
| 유형 | mime_type | 대상 URL의 MIME(Multipurpose Internet Mail Extensions) 유형을 지정합니다. |
이제 태그 −
를 구현하는 예를 살펴보겠습니다.예시
<!DOCTYPE html> <html> <body> <h2>Learning</h2> <p>Learn these technologies with ease....</p> <img src = /images/usemap.gif alt = "usemap" border = "0" usemap = "#tutorials"/> <map name = "tutorials"> <area shape = "poly" coords = "74,0,113,29,98,72,52,72,38,27" href = "/perl/index.htm" alt = "Perl Tutorial" target = "_blank" /> <area shape = "rect" coords = "22,83,126,125" alt = "HTML Tutorial" href = "/html/index.htm" target = "_blank" /> <area shape = "circle" coords = "73,168,32" alt = "PHP Tutorial" href = "/php/index.htm" target = "_blank" /> </map> </body> </html>
출력
