10. 이미지맵 <map>

 

이미지맵은 하나의 이미지 내에서 좌표를 설정하여 링크를 거는 태그이다. 

주로 지도와 같은 복잡한 이미지에서 사용한다.

 

기본형

• usemap="#이미지맵 사용명칭" 과 map name="이미지맵 사용명칭"을 동일하게 지정
• shape: 영역의 모양 (rect: 직사각형, circle: 원형, poly: 다각형, dafault: 전체 영역)
• coords: 이미지 좌표 (시작점x, 시작점y, 끝점x, 끝점y)
• 링크가 없을 경우, nohref로 정의

<img src="이미지경로" usemap="#이미지맵 사용명칭">
<map name="이미지맵 사용명칭">
    <area shape="rect" coords="좌표" href="링크주소" target="_blank">
</map>

 

좌표 설정

www.image-map.net/ 사이트를 통해 이미지에서의 좌표를 설정할 수 있다.

 

활용 코드

 <img src="https://search.pstatic.net/sunny/?src=https%3A%2F%2Fpng.pngtree.com%2Fpng-vector%2F20231013%2Fourlarge%2Fpngtree-cute-vector-illustration-of-a-delicious-dessert-over-white-png-image_10157017.png&type=a340"
  usemap="#image-map" />

    <map name="image-map">
      <area
        target="_self"
        alt=""
        title="cherry"
        href="https://www.bing.com/images/search?q=cherry&id=2F7CCDFB81A86763D97E4B414C867565051DBAA2&form=IQFRBA&first=1&disoverlay=1"
        coords="196,101,5"
        shape="circle"
      />
      <area
        target="_self"
        alt=""
        title="raspberry"
        href="https://www.bing.com/images/search?q=raspberry&qs=MM&form=QBIRMH&sp=2&lq=0&pq=raspb&sc=10-5&sk=MM1&cvid=B0743FD605504B85992FF8BC4B6A8C49&ghsh=0&ghacc=0&first=1"
        coords="146,101,5"
        shape="circle"
      />
      <area
        target="_self"
        alt=""
        title="bread"
        href="https://www.bing.com/images/search?q=%EC%89%AC%ED%8F%B0%20%EB%B9%B5&qs=n&form=QBIR&sp=-1&lq=0&pq=%EC%89%AC%ED%8F%B0%20%EB%B9%B5&sc=0-4&cvid=4BFE68962942448C99CAA741BCFE58BD&ghsh=0&ghacc=0&first=1"
        coords="174,196,8"
        shape="circle"
      />
    </map>

 

실행 결과

-> cherry, raspberry, bread 이미지를 클릭하면 해당 링크로 이동한다.