放大地图图像，带有突出显示的部分

Question

我必须为我正在创建的网站做 4 件事。

1. 您应该能够放大和缩小图像。
2. 当您滚动图像的某个部分时，它应该突出显示该部分。
3. 当您将图像悬停时，应显示工具提示。
4. 当点击这些翻转部分之一时，它应该链接到不同的页面

这是图片

如您所见，它非常复杂。我有一个非常高质量的图像版本，我将用于该网站。

这是一个零售公园的图像，所以当您翻转某个零售时。 要么整个​​图像变暗并显示您所在零售店的工具提示，否则它只会变得更加突出并显示工具提示。

我将如何在 html、css 和 jquery 中执行此操作？ 像this 这样的东西会很完美，虽然我需要图像能够放大

Answer 1

我建议您找一些类似谷歌地图的东西，它可以让您指定自己的图像。在线快速搜索发现：

谷歌地图教程：
- 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/（链接已过期）

我相信还有更多。基本上，这些应该为您提供谷歌地图的所有功能，但不必自己重新编码。您可以指定边界并执行所有正常的谷歌地图工作，并使用其各种 api 功能将其链接出来。

Answer 2

Mashupforge 的开发者在这里。您可以使用 Mashupforge 轻松完成所有操作，但第 2 项除外。当您将鼠标悬停在标记上时，我们不支持突出显示。除此之外，您只需上传您的源图像，该应用程序基本上会为您创建一个可缩放、可拖动的地图。如果您有任何问题，请随时与我联系！