2014-10-24 2 views
1

이미지의 각 부분에 다른 링크를 추가하려면 내 웹 사이트에서 이미지 맵을 사용해야합니다.HTML : 이미지 맵 영역의 응답 성

그러나 응답성에 문제가 있습니다. 창 크기를 조정할 때지도 영역의 크기를 변경할 수 없습니다.

아무도 도와 줄 수 있습니까? 이 방법은 중요하지 않습니다. Js 또는 Css를 사용할 수 있습니다.

업데이트 :

나는 응답에 대한 http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html 사용하지만,지도 지역의 좌표에 영향을 미칩니다. 페이지를 새로 고침하면지도 좌표가 모두 0으로 변경되며 창 크기를 조정 한 후에 만 ​​업데이트됩니다.

누구에게도이 문제가 있습니까?

+0

) 확인 창 크기를 조정 응답 클릭 가능한 영역을 갖는 각 노드의 예 jsfiddle.net/AUNwC/294/ 체크 아웃 : 비록) 여기서

사용하여 RaphaelJS의 예는 전혀 검색하려고 했습니까? Google [https://www.google.co.uk/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#safe=off&q=responsive%20image%20map&hl=ko) 및 여러 가지 솔루션이 있습니다. 여기에 [에] (http://stackoverflow.com/questions/7844399/responsive-image-map) – Turnip

답변

0

이미지 맵은 어쩌면 당신은 당신이 아닌 동적 당신이 폭 고칠 수있는 방법은 이미지와 높이와 더 많은

0
를 사용 IR 시도해야 내가 포토샵 이미지 sílice를 사용하여 역자 주 웹 사이트를 생성하고 HTML로 저장하는 아주 오래된 방법이다

이미지를 벡터 이미지로 저장 한 경우 이미지를 SVG로 저장하고 RaphaelJS를 사용할 수 있습니다. 나는 최근에 그것을 집어 들었지만, 일단 당신이 그것에 매달렸다면 사용하기가 아주 쉽습니다.

각 노드 속성에 링크, 스타일 및 호버 이벤트를 할당 할 수 있으며 Raphael을 사용하면 viewBox를 크기 조정할 수 있도록 설정할 수 있습니다 (충분히 높지 않은 순위로 연결할 수 없음 - 도움말은 SO LINK1LINK2

AND (

+0

매우 유용한 감사, btw 이미 이미지 맵에 대한 해결책을 발견, 위의 감사합니다! – FrontDev

+0

이미지 맵에 사용하는 방법은 다소 오래되었고 오래된 것입니다. . . –