MAP태그
MAP태그
이미지의 영역을 분할해서 마치 지도처럼 사용하기. 즉 영역별로 링크 주소를 다르게 걸 수 있음.
img태그와 같이 사용한다
사용법:
<map name="img태그의 usemap속성에 지정한 값">
<area/>:태그를 이용해서 이미지의 영역 분할
</map>
area태그
map의 하위태그로 이미지를 분할할 때 사용하는 태그
[area태그의 속성]
href-링크 주소 지정
shape- circle(circ),rectangle(rect),
polygon(poly)
coords-shape 속성 값에 따라 각 분할 영역을 지정하는 좌표값을 설정(좌표는 그림판에 가서 커서 올려놓으면 왼쪽 하단에 찍힘! 그거 이용하면 편함!!)
circ(원)일때 좌표지정 : coords="x좌표,y좌표,반지름"
rect(사각형)일때 좌표지정 : coords="left좌표,top좌표,right좌표,bottom좌표"
poly(다각형)일때 좌표 지정 : coords="각 꼭지점의 x좌표 ,y좌표
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MAP11.html</title>
</head>
<body>
<h2>이미지 맵</h2>
<img src="../HTML5/images/korea.png" alt="대한민국 지도" usemap="#korea"/>
<map name="korea">
<area href="https://www.seoul.go.kr" shape="circle" coords="192,138,10" alt="서울"/>
<area href="https://www.busan.go.kr" shape="poly" coords="336,346,343,361,368,364,376" alt="부산"/>
<area href="https://www.jeju.go.kr" shape="rect" coords="133,527,164,550" alt="제주도"/>
</map>
</body>
</html>
이미지 맵
서울.부산.제주도 지역에 마우스 갖다대면 손가락 모양으로 커서 바뀜
클릭할 수 있게 링크 걸어 놓음
신기하죠???
'학원 > HTML5' 카테고리의 다른 글
| 10/28 31-1 [HTML] Form 1 (0) | 2022.10.28 |
|---|---|
| 10/27 30-5 Table태그 (0) | 2022.10.27 |
| 10/27 30-3 IMG태그 (0) | 2022.10.27 |
| 10/27 30-1 P/DL/UL/OL 태그 (0) | 2022.10.27 |
| 10/26 29-5 HTML5(Hn) (0) | 2022.10.26 |