전체 화면 배경 이미지에 상대적인 플롯 점

Question

건물에있는 위치 지정 문제가 발생했습니다. 전체 화면 배경 이미지가 브라우저 크기에 따라 확장됩니다. 내가하고 싶은 일은 이미지 전체에 "관심 분야"를 표시하여 사용자가 마우스를 가져 가면 설명이 팝업됩니다. 문제는 브라우저 크기에 따라 이미지가 축소되어 커지고 올바른 위치에 지점을 유지하는 데 문제가 있다는 것입니다.

다음은 테스트 빌드입니다. http://recoverstudio.com/test-build/gallery.html 작은 "+"가 중요한 포인트입니다. 브라우저 창 크기를 조정할 때 TV에 머물러있게 해달라고합니다.

도움을 주시면 감사하겠습니다.

Answer 1

당신이 할 수있는 한 가지는 관심 지점을 이미지 위에있는 이미지지도로 만드는 것입니다.

또 다른 옵션은 기본 이미지를 벡터 이미지로 처리 한 다음 전체 페이지를 하나의 큰 SVG 이미지로 만드는 것입니다. 그러면 벡터 공간에서 점을 정의 할 수 있습니다. 벡터 공간은 일정한 크기로 유지됩니다.

Answer 2

ezBgResize의 작동 방식을 살펴보면 크기를 조정할 때 각 관심 장소의 위치를 ​​다시 계산해야 할 것으로 보입니다.

기본적으로 $ ("# jq_ez_bg")의 크기를 확인하고 이에 따라 모든 점을 이동해야합니다. 물론 이미지의 크기를 조정 한 후에 점의 이동이 이루어 졌는지 확인해야합니다.