강조 표시된 섹션이있는지도의 이미지를 확대하십시오.

Question

나는 만들고있는 웹 사이트에 대해 4 가지 일을해야합니다.

1. 이미지를 확대하거나 축소 할 수 있어야합니다.
2. 이미지의 특정 부분을 롤오버하면 해당 부분이 강조 표시됩니다.
3. 이미지를 롤오버 할 때 툴팁이 표시되어야합니다. 당신이 상당히 복잡한입니다 볼 수 있듯이 이러한 롤오버 부분 중 하나가 다른 페이지 여기

에 연결해야합니다 클릭 할

이미지

입니다. 나는 그 사이트에 사용할 이미지의 매우 고수준 버전을 가지고있다.

소매점의 이미지이기 때문에 특정 소매점을 롤오버 할 때입니다. 전체 이미지가 어두워지고 소매점의 툴팁이 표시되거나 아니면 더 강조 표시되고 툴팁이 표시됩니다.

어떻게하면 html, css 및 jquery에서이 작업을 수행 할 수 있습니까? 확대 할 수 있도록 이미지가 필요하지만 this과 같은 것이 적합 할 것입니다.

Answer 1

나만의 이미지를 지정할 수있는 Google지도를 찾는 것이 좋습니다. 빠른 검색은 온라인 공개 : 구글 맵

튜토리얼 :
- http://forevermore.net/articles/photo-zoom/
- http://blog.mikecouturier.com/2011/07/create-zoomable-images-using-google.html
제 3의 라이브러리 :
- http://www.maplib.net/
- http://mashupforge.com/

내가 무리 등의이 확신 잘. 기본적으로, 이것들은 당신에게 구글 맵스의 모든 기능을 제공해야하지만, 모든 것을 직접 코딩 할 필요는 없습니다. 경계를 지정하고 모든 일반적인 Google지도 작업을 수행하고 다양한 API 기능을 사용하여 링크 할 수 있습니다.

Answer 2

개발자는 Mashupforge입니다. Mashupforge를 사용하면 2 번을 제외한 모든 것을 쉽게 수행 할 수 있습니다. 아직 마커 위로 마우스를 가져 가면 강조 표시가 지원되지 않습니다. 그 외에는 소스 이미지를 업로드하기 만하면 기본적으로 확대/축소 가능한 드래그 맵이 생성됩니다. 질문이 있으시면 언제든지 저에게 연락하십시오!