map은 이미지 상에서 특정 부분을 지정해 태그로 사용할 수 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이미지 맵 사용하기</title>
</head>
<body>
<img src="../images/event.jpg" alt="신간안내" usemap="#eventMap">
<map name="eventMap">
<area shape="circle" coords="331, 238, 55" href="http://www.yes24.com/Product/Goods/70960600" alt="서적 소개 페이지로 가기" target="_blank">
<area shape="rect" coords="41, 770, 691, 1170" href="http://www.yes24.com/EventWorld/Main.aspx" alt="이벤트 페이지로 가기" target="_blank">
</map>
</body>
</html>
이렇게 코딩하면 1번과 2번에 링크범위가 지정된다.
728x90
반응형
'HTML > HTML 기초' 카테고리의 다른 글
| [HTML] <table> 태그 사용해보기 - 2(colgroup) (0) | 2020.07.27 |
|---|---|
| [HTML] <table> 태그 사용해보기 - 1 (0) | 2020.07.27 |
| [HTML] <a>태그를 활용하여 페이지 이동하기 (0) | 2020.07.27 |
| [HTML] 링크삽입 태그 (<a> 태그) (0) | 2020.07.27 |
| [HTML] 이미지 태그 실습 - 2 (0) | 2020.07.27 |
