Question

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

我想要的是当光标悬停在图像地图的区域元素上时，浏览器状态栏应显示区域的链接目的地（正常情况下，没有放大镜），以及用户是否点击鼠标按钮，应该遵循链接。

放大镜实现动态插入页面的DIV，100x100px。动态更新该DIV的背景，以显示正在放大的图像的放大。

我设法通过在DIV中插入IMG标签并使用边距设置图像样式来将其定位到DIV的中心。

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

Answer 1

好的 - 所以我确实这样做了。我会尽力在这里解释一下。请看一下我链接的w3schools image magnifier - 该页面上有一个演示。

我们将要做什么：

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

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

要添加指针，请在js文件中找到以下行：

 glass = document.createElement("DIV");

然后在它之后添加以下行：

glass.innerHTML ='';

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

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

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

area {
  cursor: none;
}

接下来，我们将图像映射添加到背景图像。我使用free online image map generator为我的地图生成代码。我还使用image map resizer自动缩放图像地图，因为我的背景图像随浏览器窗口缩放。这两个都非常简单。我生成的用于渲染背景图像的HTML格式是从地图生成器工具开始，然后进行了调整（即使用类名和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">

在我的情况下，我还在背景图像上放置了徽标图像 - 因此您可能没有该行。

如果您现在测试代码，则无法单击地图区域链接。要解决这个问题，我们只需要一行CSS。找到这个类的CSS：

.img-magnifier-glass

并将此行添加到声明：

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

这来自allowing clicks through to elements behind other elements上的一个简单示例，accepted answer中提到了有关此问题的问题。请注意，IE中的示例中有CSS，我在这里的答案中没有包括它。

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

img = document.getElementById(imgID);

在此之后，添加一个类似的选择图像映射，如下所示：

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

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

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

img.addEventListener("mousemove", moveMagnifier);

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

imgmap.addEventListener("mousemove", moveMagnifier);

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

img.addEventListener("touchmove", moveMagnifier);

然后为图像映射添加类似的行，如下所示：

imgmap.addEventListener("touchmove", moveMagnifier);

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

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

1 个答案: