HTML 5-4. map, area, usemap

rachel's blog·2021년 4월 29일

HTML

목록 보기

8/13

이미지상의 클릭 위치에 따라 서로 다른 링크가 열리도록 하는 방법에 대해 알아보려고 한다.
이를 "이미지맵(imagemap)"이라고 함.

①이미지에 map을 만들고 추가해야 함. → <map>이용
②<img>에서 usemap속성으로 이미지 맵 지정

기본형 : <map name="맵이름">
                 <area>
                 <area>
          </map>
          <img src="이미지파일.확장자명" usemap="#맵이름">

area tag의 속성

explain-by-table

속성값	설명
alt	대체 텍스트 지정
coords	링크로 사용할 영역의 좌표 지정 (x1, y1, x2, y2)
href	경로
shape	링크로 사용할 영역의 형태 [default, rect, circle, poly]
target	링크로 표시할 대상 지정 _5-3.target속성 참조

예제1)

이미지 내에서 영역 잡기는 그림판으로도 쉽게 할 수 있다.

area의 속성값 중 coords에 입력하는 좌표 순서는 좌측상단 → 우측 하단 순서이다.

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>usemap</title>
</head>

<body>
    <img src="national-institute-of-natural-science.png" alt="국립산림과학원" usemap="#go-to-site">

    <map name="go-to-site">
        <area shape="rect" coords="167,798,205,834 " href="http://www.facebook.com" alt="" target="_blank">

        <area shape="rect" coords="320,800,361,834" href="http://twiter.com" alt="" target="_blank">

        <area shape="rect" coords="490,802,512,834" href="https://section.blog.naver.com/" alt="" target="_blank">
</body>

</html>

[구현화면]

예제2)

이지퍼블리싱 DO IT HTML5+CSS3 예제파일 참고하여 작성함.

Mission
1. 원형로고를 클릭하면 신간도서 목록 페이지로 연결
2. 미리보기 클릭하면 미리보기 pdf를 다운로드 받을 수 있는 페이지로 연결

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>event-page</title>
</head>

<body>
    <img src="images/event.jpg" alt="이벤트" usemap="#go-to-page">

    <map name="go-to-page">
    
        <area shape="circle" coords="326,238,50" href="http://www.easyspub.co.kr/20_Menu/BookList/EDU" alt="" target="_blank">
        <!--원형좌표는 원의 중심이 되는 x, y좌표와 반지름으로 표현함-->
        
        <area shape="rect" coords="42,772,690,1171" href="https://easyspub.co.kr/12_Menu/BoardView/C200/123/EDU" alt="" target="_blank">
    </map>
</body>

</html>