2017-02-08 4 views
-2

나는이 흥미로운 도전을 여기서 풀어 낼 방법을 모른다. 이미지에서 HTML 단추를 만들려고합니다. 이 이미지는 제가 사용하고있는 예제입니다. 모든 사다리꼴을 해당 지역에서 탭하면 별도로 등록하는 별도의 버튼으로 어떻게 분할 할 수 있습니까? 각 사다리꼴에 대해 일종의 경계를 지정해야한다고 가정하지만 이처럼 매우 복잡한 모양의 경우 어떻게 할 것인지 모르겠습니다. Example imageHTML의 이미지에서 버튼 만들기

+2

SVG는 어떻습니까? 그리고 javascript eventlisting을 사용합니다. – Kani

+0

나는 이미지를 벡터 추적하고 SVG로 바꿀 것이다. 그런 다음 적절한 이벤트를 DOM에 첨부하십시오. –

+0

http://bennettfeely.com/clippy/ 클립 경로를 사용할 수도 있지만 제한된 양의 브라우저에서만 작동합니다. 당신은 요소의 모양을 클립 할 수 – Mart

답변

2

이미지에서 image map을 만들기 위해 HTML을 <map> 요소를 사용합니다. 이미지 맵을 사용하면 제공 한 좌표에서 도형 (원, 직사각형 및 불규칙한 다각형)을 매핑 할 수 있으며 이러한 도형은 자체 href과 함께 클릭 할 수있게됩니다. click 이벤트 중에 x, y 좌표를 가져올 수도 있습니다.

좌표와 전체 코드를 생성하기 위해 인터넷에 다양한 무료 도구가 있습니다.