，图像映射区域应包括绝对定位的图像

对于一个待开发的网页我想结合的jQuery/jQueryUI的功能和插件（“拖动”和“maphighlight”）和图像地图和CSS动画缩放触发通过添加和通过jQuery上点击删除类：，图像映射区域应包括绝对定位的图像

它过多地放在一个片段，所以我创建了一个codepen：

我有一个可拖动的区域（#container5）另一容器内（#container3），它隐藏任何溢出（拖动它来查看效果）。

内部#container3还有一个容器（#container4），其含有四个图像。这些都是绝对定位的，三个较小的是在装载时填充整个容器的顶部。所有这些容器嵌套对于使用图像映射和缩放来获得拖动的能力是必需的。

现在基本的东西：所有图像或多或少覆盖地图区域。当你将围绕（而不是超过）悬停时，这些图像变得可见。当点击标记为“SHRINK”的图像周围区域时，从#container4（即容器本身，4个图像和地图区域）向下的所有元素将缩小到其初始尺寸的60％，这是由CSS类添加jQuery结合CSS动画。当点击“重置”周围的区域时，所有内容都将重置为原始大小（但如果之前被拖动过，则不会重置到原始位置）。

我的问题是，我无法获得地图区域覆盖徘徊的小图像。我想这个CSS（和其他的变化），但它没有任何效果，无论z-索引我使用的：

#container4 area { 
    position: absolute; 
    z-index:10000; 
}

但地图区域保持背后（小）图片 - 点击尽管图像本身应该被可点击的图像地图覆盖，但图像本身没有影响。

我后来的目的是让真实图像和多边形地图区域比图像更小，并且只覆盖那些图像的部分（它们显示的东西的形状），因此将jQuery addClass函数分配给图像本身不是一种选择。

我能做些什么徘徊时，得到的图像的顶部那些方面？

来源

2017-02-23 Johannes

所以，谷歌上搜索了几天，尝试一切后，回答我的问题，我能想到的：

我可以使它的唯一途径是把每个图像在自己的div容器，并创建一个单独的图像映射为每个图像。这需要更多的代码，但它的工作原理。

来源

2017-02-27 00:05:24 Johannes

，图像映射区域应包括绝对定位的图像

回答

相关问题