image maps

이미지에서, 특정 부분을 따로 지정해 놓을 수 있는 곳

 

그러니까, 

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm">
</map>

이처럼 이미지 중(꼭 이미지 아니어도 될듯) 특정 영역의 위치, 모형 등을 지정해서 거기에 따로 처리가 가능할 듯.

class나 id 주면 자바스크립트에서도 처리가 가능할 듯.

영역은 대각선으로 지정해 주면 된다.

0, 0, 10, 10은

x,y 0에 x,y 10인 대각선이므로 정사각형

영역지정은 마치 꼭지점 다각형 그리듯. 마지막 꼭지점은 알아서 첫번째랑 연결이 되는 듯.

 

이거 근데.. 영역을 보이게 하는 방법이 없는 듯. 

position:absolute인 것의 왼쪽 위를 left, top으로, 오른쪽 아래를 width, height로 해야 할 듯.

 

https://www.image-map.net/

이런 사이트 들도 있음.

 

그리고, 이거는 이미지나 맵이나 그런 거에 따로 absolute 안 줘도 되는 듯.

왜냐하면, 이미지에 usemap="#맵이름"

하는 게 맵이랑 연결하는 거임.

 

rect는 왼쪽위 x,y, 그리고 오른쪽 아래 x,y

circle은 중심점 x,y,반지름

poly는 꼭지점들. 마지막 꼭지점이 처음과 연결됨.

 

 

%로 하면 반응형도 가능

대충 픽셀/총너비 혹은 픽셀/총높이

하면 비율 나옴.