我如何调整 javascript 放大镜以允许它点击图像映射？

Question

w3schools 有一个示例 image magnifier。我在具有关联图像映射的图像上使用它 - 但放大镜似乎禁用了单击功能。

我想要的是，当光标悬停在图像地图的某个区域元素上时，浏览器状态栏应该显示该区域的 link 目的地（正常情况下，没有放大镜），并且如果用户单击鼠标按钮，则应遵循 link。

放大镜实现 DIV，动态插入到页面上，大小为 100x100 像素。 DIV 的背景会动态更新以显示您正在放大的图像的放大图。

我已经设法添加指向 DIV 中心的指针，方法是将 IMG 标签插入 DIV 并使用边距设置图像样式以将其定位在中心。

我认为，问题在于此 DIV（及其中的光标图像）位于主图像之上，主图像具有图像映射。因此，有没有办法检测放大镜 DIV 下方的地图区域？

Answer 1

好的 - 所以我确实解决了这个问题。会尽力在这里解释。请务必查看我 link 编辑的 w3schools image magnifier - 该页面上有一个演示。

我们要做什么：

首先，将指针图像添加到放大镜。

其次，使用带有背景（主）图像的图像地图，并允许用户单击地图区域（尽管放大镜 div 位于主图像前面）。

要添加指针，在js文件中，找到这一行：

 glass = document.createElement("DIV");

然后在其后添加这一行：

glass.innerHTML = '';

这只是在放大镜中添加图像。更新 'src' 以指向您的图像。然后在 css 文件中使用 class 名称，如下所示：

img.handpointer {margin-left: auto; margin-right: auto; width: 36px; 
 /* or absolute */
  left: 50%;
  margin-top: 46px;
  margin-left: 32px;
}

边距值需要根据指针的形状进行更新。注意 - 一旦我们添加了图像地图，当您将鼠标悬停在地图区域 link 上时，浏览器将显示自己的指针（除了您的指针）。使用这个事实来调整您的边距，以便您的指针的点击点与浏览器的点击点完全对齐。然后添加如下CSS隐藏浏览器默认指针：

area {
  cursor: none;
}

接下来我们将图像贴图添加到背景图像中。我使用 free online image map generator to generate the code for my map. I also used an image map resizer 来自动缩放图像贴图，因为我的背景图像随浏览器 window 缩放。这两个都非常简单。我生成的用于渲染背景图像的 HTML 格式以地图生成器工具开头，然后进行了调整（即使用 class 名称以及 div 的嵌套方式）以方便调整器。结果是这样开始的：

<!-- Magnifier container -->
<div class="img-magnifier-container" id="img-magnifier-container">

    <!-- Logo -->
    <img class="centered" class="main" src="./logonoshadowlargeclear.png" />

    <!-- Main Image -->
    <img class="main" id="main" src="./sample.jpg" usemap="#image-map">

    <!-- Image Map Generated by http://www.image-map.net/ -->
    <map name="image-map" id="image-map">
        <area target="" alt="" title="" href="1" coords="492,266,15" shape="circle">

在我的例子中，我还在背景图像上放置了一个徽标图像 - 所以你可能没有那条线。

如果您现在测试您的代码，您将无法点击您的地图区域 links。要解决这个问题，我们只需要一行 CSS。找到这个 class 的 CSS:

.img-magnifier-glass

并将此行添加到声明中：

pointer-events: none; /* allow click-through to background */

这来自 allowing clicks through to elements behind other elements, noted in the accepted answer 上的一个简单示例，这里是关于该问题的一个问题。请注意，IE 的示例中有 CSS，我没有在此处的回答中包含它。

如果您现在测试，我们还有一个问题 - 当您的放大镜到达地图区域 link 时，放大镜停止移动。要解决此问题，请注意放大镜的 javascript 会将侦听器事件添加到背景图像和放大镜中。我们需要将它们添加到图像映射元素中。为此，请在放大功能中注意以下行：

img = document.getElementById(imgID);

在此之后，将类似的添加到select图像映射中，如下所示：

imgmap = document.getElementById('image-map');

注意元素的 ID 值 - 您会看到我在上面发布的 HTML 中使用了它。

现在，放大功能有这一行：

img.addEventListener("mousemove", moveMagnifier);

您想在其后为地图元素添加类似的内容，如下所示：

imgmap.addEventListener("mousemove", moveMagnifier);

同样，找到像这样的触摸屏行：

img.addEventListener("touchmove", moveMagnifier);

然后为图像映射添加类似的行，像这样：

imgmap.addEventListener("touchmove", moveMagnifier);

你的放大镜现在应该在悬停在地图区域上时继续移动。如果您之前没有隐藏浏览器的默认指针，那么您会看到它出现（除了您之前添加的指针之外）。使用此事实调整自定义指针的边距，使指向像素与浏览器对齐，然后如前所述隐藏浏览器的默认指针。

我如何调整 javascript 放大镜以允许它点击图像映射？

How can I adapt a javascript magnifier to allow it to click on an imagemap?

javascript

imagemap