img 파일에 특정 부분을 누를때를 어떻게 체크하나요???

Question

img 파일에 특정 부분을 누를때를 어떻게 체크하나요???

위 사진처럼 생긴 img 파일을 화면에 보여주었을때

주황색, 초록색, 보라색 부분을 각각 누를때마다 무엇을 누른건지 체크하고 싶습니다.

html 코드로 만든게 아니라 img 파일이라 누를때 어떻게 체크해야 될지 궁금합니다.

Answer 1

map 이라는 html 코드를 사용하시면 되구요

대략 사용예제는 아래와 같습니다

<img src="tothemoon.jpg" usemap="#workmap"> <map name="workmap"> <area shape="rect" coords="34,44,270,350" alt="AHA" href="aha.htm"> <area shape="rect" coords="290,172,333,250" alt="UPBIT" href="upbit.htm"> <area shape="circle" coords="337,300,44" alt="TO THE MOON" href="tothemoon.htm"> </map>

그러니깐 img src 에서 usemap 으로 사용자정의를 해주시구요

위에서는 #workmap 으로 정의했습니다

그리고 map 이라는 html을 이용합니다

map name="workmap" 이라고 했는데 img src 에서 사용자정의한 이름과 동일해야 합니다

틀리면 동작안해요

area 는 마우스 클릭가능한 범위와 어디로 점프하는지 정의하는 부분입니다

coords = x1,y1,x2,y2 입니다

shape는 지정된 2포인트를 기준으로 동그란건지 네모인지등을 설정합니다

위와 같이 하시면 원하시는데로 html 코딩이 가능하실겁니다^^