이미지맵 태그
이미지파일에 여러개의 구역으로 나누어 링크를 걸어주는 태그
1.이미지 맵을 적용하고자 하는 이미지 준비한다.
<img src="이미지 경로">
2. 이미지맵 태그 map와 이미지태그 img 을 연결할 이름을 지정한다.
이미지의 usemap="이름"과 map name="이름"은 동일하게 해주어야 이미지와 map태그가 연결된다.
이미지 태그에 작성하는 usemap에는 #을 붙여주어야 한다.
<img src="이미지 경로" usemap="#이미지맵">
<map name="이미지맵"></map>
3. map태그 내부의 area태그에는 다음과 같은 속성을 넣어준다.
shape : 링크를 걸어줄 영역의 모양
- default : 전체 영역
- rect : 직사각형
- circle : 원형
- poly : 다각형
coords : 영역의 좌표
href : 이동될 외부 링크
<img src="이미지 경로" usemap="#이미지맵">
<map name="이미지맵">
<area shape="영역 모양" coords="좌표" href="링크">
</map>
4. coords 좌표
좌표값은 영역의 모양에 따라 다른 값을 넣어주어야 한다.
1) rect 직사각형
<area shape="rect" coords="좌측상단x축좌표,좌측상단y축좌표,우측하단x축좌표,우측하단y축좌표" href="링크">
2) circle 원
<area shape="circle" coords="원중심x좌표,원중심y좌표,원의반지름" href="링크">
3) poly 다각형
<area shape="poly" coords="a점의x축,a점의y축,b점의x축,b점의y축,c점의x축..." href="링크">
시작점에서 시계방향으로 순서대로 작성하며, 모든 점을 쉼표로 연결한다.
<img src="img/youtube.jpg" usemap="#m">
<map name="m">
<area shape="circle" coords="285,213,22" href="https://www.google.co.kr" target="_blank">
<area shape="rect" coords="382,383,466,443" href="https://www.youtube.com" target="_blank">
<area shape="poly" coords="274,383,291,348,304,345,326,418,284,427" href="https://www.naver.com" target="_blank">
</map>
'WEB > HTML' 카테고리의 다른 글
본문 : 섹션(Section) 요소 (시맨틱 태그) - body, header, nav, section, aside, article, footer (0) | 2022.06.07 |
---|---|
HTML 태그 : progress, figure, blockquote, dl/dt/dd, pre, mark (0) | 2022.05.27 |
HTML input 태그 : form / input / label / select / textarea (1) | 2022.05.27 |
HTML 표(Table) 만들기 - table, tr, th, td 태그 (1) | 2022.05.26 |
하이퍼링크로 북마크 연결하기 (2) | 2022.05.25 |