이미지의 특정영역에 마우스 이벤트를 발생시켜야 할 때

프론트엔드 개발을 하다 보면 이미지의 특정영역에 마우스를 over, leave, click등의 

이벤트를 발생시켜야 하는 경우가 있다. 

 

이 때, 이미지를 div 태그 안에 img 태그를 사용하여 이미지를 띠우고 해당 div를 position: relative로 지정한다. 

그리고 이벤트를 발생시킬 영역을 div로 만든다. 이 때, 안 쪽에 배치되는 div의 style은 이다. 

 

 

 

 

위의 그림에서 보면 검은 박스가 이미지를 넣는 div 태그이며, 빨간색 박스는 이벤트를 발생시키기 위해 배치하는 div이다. 

 

2번 div는 1 번 div 영역을 벗어날 수 있다. 하지만 좌표 위치는 바깥 div의 시작좌표와 동일하다. 

 

이제 div의 배치를 지정해줘야 한다. 

absolute로 position을 지정하면 아래의 css 속성을 이용하여 배치하고 크기를 

정해야 한다.

 

 

- 배치할 때 사용되는 속성( %, px등으로 값을 입력)

top :  값을 입력시 그 값만큼 아래쪽으로 이동함.

right :  값을 입력시 그 값만큼 왼쪽으로 이동함.

bottom : 값을 입력시 그 값만큼 위쪽으로 이동함.

left : 값을 입력시 그 값만큼 오른쪽으로 이동함.

 

 

- 크기를 지정할 때 사용되는 속성(%, px 등으로 값을 입력)

width : 입력된 값만큼 가로길이를 가짐.

height : 입력된 값만큼 세로길이를 가짐.

 

 

이렇게 배치된 div에 id값이나 class를 지정하여 이벤트를 발생시키면 된다.