반응형
- <map>태그는 이미지 위에 클릭이 가능한 구역을 만들어주는 태그이다.
- <map> 태그는 "name" attribute를 요구하는데, 이 태그를 사용할때에는 <img>태그에 "usemap" attribute를 사용해 <map>과 <img> 태그 사이의 관계를 만들어 주어야한다.
- <map>태그는 <area> 태그를 감싸는 contain 요소라고 할 수 있는데,
<area>는 이미지위에 올릴 클릭구역 수 만큼 사용해주면 된다.
<img src="/" alt="이미지" usemap="#maparea"> <map name ="maparea"> <area shape="모양" coords="좌표" href="링크" alt="설명"> <area shape="모양" coords="좌표" href="링크" alt="설명"> <area shape="모양" coords="좌표" href="링크" alt="설명"> </map>
<area>에서는 shape, coords, href 속성을 지정해주는데 shape에 따라서 coords 작성이 달라진다.
coords에는 모서리, 혹은 중심의 좌표값을 넣어 그 좌표값대로 이어진 영역이 area로 형성된다.
shape의 종류에는 rect(사각형, rectangle), circle(원형), poly(다각형, polygon)이 있다.
rect에는 위의 이미지와 같이 두 모서리의 좌표값을 넣어주면 된다.
coords="A-x,A-y,B-x,B-y"
원형인 circle은 모서리가 없으니까, 원형의 중심인 A와, 원을 이루고 있는 반지름값을 넣어주면 된다.
coords ="A-x,A-y,B"
다각형은 rect와 마찬가지로 모서리의 좌표값을 적어주면 되는데,
다른점이라면 모든 모서리의 좌표값을 적어주어야한다는 것이다.
coords="A-x,A-y,B-x,B-y,C-x,C-y,D-x,D-y,E-x,E-y"
분명 이미지 작업할때 E까지 써놨는데 저장하니까 어디간거니...?
'Web > 퍼블리싱 작업일지' 카테고리의 다른 글
20170817 :: 리액트 작업일지 (0) | 2017.08.17 |
---|---|
서브라임 텍스트3 설치부터 패키지 설치까지!! (0) | 2016.11.04 |
<meta http-equiv="x-ua-compatible"> (0) | 2016.09.05 |
데이터피커 datepicker 사용 그리고 옵션 (0) | 2016.09.02 |
엔티티코드 Entity Code (0) | 2016.08.25 |
댓글