이미지 특정부분에 링크걸기 (html)

이미지 특정 부분에 링크걸기. C++, C#은 아니지만, 나름 tip이므로..

이미지 특정 영역에만 링크를 걸 수 있는 방법이 없나.. 찾아보다가 발견!

(원글 : https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=kimsheep1030&logNo=220298611611 )

여기에 나온 map과 area 태그를 이용해서 찾다보니..

https://www.w3schools.com/tags/att_area_coords.asp

HTML area coords Attribute

위와 같은곳도 찾았다. 여기에 좀 더 자세한 정보가 있다.

 

중요한건.. 이미지에서 링크를 걸 곳의 좌표를 알아내서.. (그림판으로 찍어봐서..)

<img src="Img파일경로" usemap="#Map이름" />
<map>
 <area shape="rect" coords="L,T,R,B" href="링크주소" target="_blank" />
 <area shape="circle" coords="X,Y,R" href="링크주소" target="_blank" />
</map>

위와 같이 작성하면 된다. rect는 Left, Top, Right, Bottom 좌표를 찍어주면 되고,

circle은 원 중심의 X좌표, Y좌표, 반경(Radius)를 적어주면 된다.