HTML IMAGEMAP

20 Oct 2020 in Programming on HTML/CSS

• Imagemap을 이용하면 하나의 이미지에 여러 개의 링크를 걸 수 있다. 다음과 같이 사용한다.

  <img src = "pin.jpg" usemap = ""#water">
  <map name = "water">
      <area shape="rect" coords="220,10,380,200" href ="link" target="_self">
  </map>
  

다음과같은 이미지맵을 만들어 보았다.

촉초쿠한 우리 핀이 코는 사파이어…. 반딱빤딱 빛나는 우리 핀이 눈은 다이아몬드… 인형은 미니소에서 구입했다.

TRY IT OUT HERE

코드는 다음과 같다.

shape= “circle”일 경우, coords = “원 중심 x좌표, 원 중심 y좌표, 반지름”

shape= “rect”일 경우, coords =”꼭짓점 a의 x좌표, 꼭짓점 a의 꼭짓점 y좌표, a와 마주보는 꼭짓점 x좌표, a와 마주보는 꼭짓점 y좌표) 이다.

실습하는데 재미있어서 좋았다.

    <img src ="https://user-images.githubusercontent.com/37058233/97869067-28914700-1d54-11eb-890b-1e5613ae625d.jpg" width="500px" usemap="#cute">
    <map name="cute">
      <area shape="circle" coords="270 270 30" href="https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2F20140924_177%2Fmyswedding_1411522940603tjGg0_JPEG%2F%25BB%25E7%25C6%25C4%25C0%25CC%25BE%25EE.JPG&type=sc960_832" target="_blank">
      <area shape = "circle" coords="180 180 50" href="https://assets.entrepreneur.com/content/3x2/2000/20160305000536-diamond.jpeg" target="_blank">
      <area shape="rect" coords="300 100 350 150" href="https://smartstore.naver.com/economy/products/4845328924?NaPm=ct%3Dkh0jx66o%7Cci%3D9a83b18133159ce8aef3c8a38567cc0213e4ae8f%7Ctr%3Dslsl%7Csn%3D1104647%7Chk%3D37d41a92a1e749713a0bb0e62bd11ea39fa1ef16" target="_blank">
 </map>