问题标签 [maphilight]

如果我没记错的话，我正在使用 angular 1.5 并且我正在尝试突出显示图像的区域图。我找到了 angular-maphilight http://abdallamohamed.github.io/Angular-Maphilight/#/但是在我启动项目的前两个步骤之后，我收到了

我检查了它"angular-maphilight": "*"是否已添加bower.json到文件夹 angular-maphilight 到 bower_components

index.module.js：

鲍尔.json

这里是我的rendition.html

我有一张我想选择区域的图像，但是如果您单击一个区域，则需要“取消单击”前一个区域。

我错过了什么？我正在使用David Lynch maphilight 插件，并一直在将我的代码与此页面进行比较以进行故障排除，但两天后，我仍然遇到问题。当我将鼠标悬停在（甚至单击）映射图像的任何部分时，颜色不会显示。链接按预期工作。

我的脚本调用是：

img 和 map 代码是：

我尝试在函数中使用 img ID 和“'.map'”，但我没有看到任何区别。其他人有这样的问题吗？

我目前正在使用 Chrome，如果这有帮助的话。

对于一个待开发的页面，我正在尝试将 jQuery/jQueryUI 函数和插件（“可拖动”和“maphighlight”）与图像映射和 CSS 动画缩放相结合，通过点击时通过 jQuery 添加和删除一个类：

放一个片段太多了，所以我创建了一个codepen：

http://codepen.io/anon/pen/xqxgrz

我#container5在另一个容器 ( #container3) 中有一个可拖动区域 ( )，它隐藏了任何溢出 (拖动它以查看效果)。

里面#container3还有一个容器 ( #container4)，其中包含四个图像。那些是绝对定位的，三个较小的在一个装满整个容器的顶部。所有这些容器的嵌套对于获得拖动、使用图像映射和缩放的能力都是必要的。

现在最重要的是：所有图像或多或少都被地图区域覆盖。当您将鼠标悬停在（而不是在）小图像周围时，这些变得可见。当单击标有“SHRINK”的图像周围的区域时，所有向下的元素#container4（即容器本身、4 个图像和地图区域）将缩小到其初始大小的 60%，这是由 jQuery 添加的 CSS 类引起的结合 CSS 动画。单击“RESET”周围的区域时，所有内容都会重置为原始大小（但如果之前已拖动，则不会重置为原始位置）。

我的问题是悬停时无法让地图区域覆盖小图像。我尝试了这个 CSS（以及它的其他变体），但无论我使用哪个 z-index，它都没有效果：

但是地图区域仍然在（小）图像后面- 单击图像本身没有任何效果，尽管它应该被可点击的图像地图覆盖。

我稍后的意图是拥有比图像更小的真实图像和多边形地图区域，并且只覆盖这些图像的一部分（它们显示的事物的形状），因此将 jQueryaddClass函数分配给图像本身不是一种选择。

悬停时，我该怎么做才能使这些区域位于图像之上？

在我的页面http://www.veniria.esy.es/#veniria我有一个带有 JQuery maphilight 插件的图像映射。在我将主页添加到站点之前，它工作得很好。现在它根本不起作用，就像 JQuery 没有检测到鼠标悬停一样，因为这也不起作用：

和右侧的按钮没有突出显示。

这是我的小提琴。 https://jsfiddle.net/vsjtfhkk/

我正在尝试使用图像和图像地图制作一个 eNewsPaper 网站。

当我使用该maphilight库突出显示图像映射时，handlebar.js它不起作用。

我正在尝试使用：

请给我一个解决方案。

有一个用于突出显示区域 maphighlight.js 的脚本。一般来说，一切正常，但我需要以某种方式做到这一点，以便当你悬停时，文本也会出现。不幸的是，该图像不在 svg 中。帮助，请解决问题！非常感谢您！我的代码：

jquery.maphilight.js在这里

我有一个包含 300-400 个多边形区域的图像映射，在“onclick”事件中应该突出显示该区域并获取一些数据等......当页面加载时（我的图像有点大，3-5MB）所以我调整了这些图像映射使用davidjbradshaw/image-map-resizer插件。当我开始实现高亮方法时，一切正常，但是在放大/缩小图像后，我的多线被弄乱了。如果我删除突出显示选项并放大/缩小我的多边形线将调整为适当的图像尺寸。

用于调整大小的 JS 代码（正常工作）

用于调整大小/突出显示的 JS 代码（无法正常工作）

没有放大/缩小图像调整器和突出显示效果完美。

放大/缩小后

我究竟做错了什么？

I'm using maphighlight in order to show a rectangle on image hover. However, this feature is working for single image.

I'm using image slider for multiple images. The above feature is not working when using slider.

the following is my html code

//working for below code but not above code

似乎使用 jquery.js 和 jquery.maphilight.js 将是我的翻转地图项目的最佳解决方案，但我似乎无法使其工作。我正在尝试遵循此处发布的非常基本的示例：https : //davidlynch.org/projects/maphilight/docs/“Demos”下的“Simple Demo”准确地显示了我想要做的事情，我想我正在关注代码正是为了尝试和复制。这是我正在使用的：

我的 jquery.js 和 jquery.maphilight.js 脚本的副本与我的测试网页位于同一目录中：

https://www.sanjuantitle.com/sj-county-map-java.html

如果您将鼠标悬停在“29N-13W”方块上，则链接可以正常工作，并且该链接也适用于“29N-12W”右侧的方块。因此，唯一不起作用的是在我上面提到的演示页面上运行良好的翻转“突出显示”。

我确信这是我所缺少的一些简单的东西，但我已经检查了好几次，在我的代码中找不到缺陷。我将不胜感激任何建议和帮助。谢谢。