이미지 하나에 여러 개의 링크 적용

suhyeon7846·2021년 2월 23일
0

HTML5

목록 보기
5/8


img와 map을 이용하여 한 이미지에 여러 링크를 연결할 수 있다.

<img src="이미지 경로" alt="대체텍스트" usemap="#맵이름">
<map name="맵이름"></map>

그 다음 map 사이에 area를 넣어서 영역을 지정해준다.

<img src="이미지 경로" alt="대체텍스트" usemap="#맵이름">
<map name="맵이름">
	<area shape="rect" coords="맵좌표" href="연결할 url" alt="대체텍스트" target="_blank">
</map>

area에 들어가는 속성

  • shape : 링크를 연결할 구역의 모양으로 rect(사각형), circle(원), poly(다각형)이 있다.
  • coords : (사각형 기준)(시작점)X,Y 좌표와 (끝 좌표)X,Y 를 차례대로 입력
  • href : 링크 주소
  • target : 링크를 연결할 때 옵션
profile
삽질중

0개의 댓글