如何处理对角堆积的圆形图像背景元素盘旋？
我在这里遇到了很大的挑战，而且我的语言差距也可能对你解密标题提出挑战，但是，嘿……
http://toms.somese.lv/test/或http://jsfiddle.net/Wm32D/1/ （由gvee创建）
红色阴影是其中包含圆形图像的元素的边框。 在hover时你将能够看到它们。
body { background-color: black; font-family: Verdana, sans-serif; font-size: 12px; } #application { width: 1000px; height: 800px; margin: 0px auto; position: relative; } #ages { width: 524px; height: 513px; position: absolute; left: 224px; top: 166px; } #ages > a { display: block; position: absolute; box-shadow: 0px 0px 1px 0px red; } #ages a span { position: absolute; display: block; background-color: transparent; background-repeat: no-repeat; background-position: -9999px -9999px; width: 100%; height: 100%; left: 0; top: 0; } #ages > a:hover span, #ages > a.active span { background-position: center center; } #ages a.year20 { width: 100%; height: 100%; left: 0; top: 0; } #ages a.year20 span { background-image: url('assets/images/wood-layers/20.png'); } #ages a.year19 { width: 498px; height: 489px; left: 14px; top: 10px; } #ages a.year19 span { background-image: url('assets/images/wood-layers/19.png'); } #ages a.year18 { width: 477px; height: 470px; left: 24px; top: 19px; } #ages a.year18 span { background-image: url('assets/images/wood-layers/18.png'); } #ages a.year17 { width: 455px; height: 449px; left: 37px; top: 27px; } #ages a.year17 span { background-image: url('assets/images/wood-layers/17.png'); } #ages a.year16 { width: 434px; height: 429px; left: 48px; top: 37px; } #ages a.year16 span { background-image: url('assets/images/wood-layers/16.png'); } #ages a.year15 { width: 413px; height: 412px; left: 59px; top: 44px; } #ages a.year15 span { background-image: url('assets/images/wood-layers/15.png'); } #ages a.year14 { width: 382px; height: 382px; left: 76px; top: 58px; } #ages a.year14 span { background-image: url('assets/images/wood-layers/14.png'); } #ages a.year13 { width: 346px; height: 344px; left: 95px; top: 77px; } #ages a.year13 span { background-image: url('assets/images/wood-layers/13.png'); } #ages a.year12 { width: 313px; height: 312px; left: 112px; top: 92px; } #ages a.year12 span { background-image: url('assets/images/wood-layers/12.png'); } #ages a.year11 { width: 282px; height: 282px; left: 128px; top: 104px; } #ages a.year11 span { background-image: url('assets/images/wood-layers/11.png'); } #ages a.year10 { width: 247px; height: 245px; left: 143px; top: 121px; } #ages a.year10 span { background-image: url('assets/images/wood-layers/10.png'); } #ages a.year9 { width: 209px; height: 209px; left: 162px; top: 136px; } #ages a.year9 span { background-image: url('assets/images/wood-layers/9.png'); } #ages a.year8 { width: 179px; height: 177px; left: 179px; top: 152px; } #ages a.year8 span { background-image: url('assets/images/wood-layers/8.png'); } #ages a.year7 { width: 150px; height: 148px; left: 194px; top: 163px; } #ages a.year7 span { background-image: url('assets/images/wood-layers/7.png'); } #ages a.year6 { width: 121px; height: 122px; left: 208px; top: 178px; } #ages a.year6 span { background-image: url('assets/images/wood-layers/6.png'); } #ages a.year5 { width: 96px; height: 94px; left: 220px; top: 190px; } #ages a.year5 span { background-image: url('assets/images/wood-layers/5.png'); } #ages a.year4 { width: 73px; height: 72px; left: 234px; top: 200px; } #ages a.year4 span { background-image: url('assets/images/wood-layers/4.png'); } #ages a.year3 { width: 50px; height: 51px; left: 245px; top: 210px; } #ages a.year3 span { background-image: url('assets/images/wood-layers/3.png'); } #ages a.year2 { width: 37px; height: 37px; left: 253px; top: 217px; } #ages a.year2 span { background-image: url('assets/images/wood-layers/2.png'); } #ages a.year1 { width: 19px; height: 19px; left: 262px; top: 226px; } #ages a.year1 span { background-image: url('assets/images/wood-layers/1.png'); } 
在图像中：
- 红色指针显示区域，当前盒子保持活动状态。
- 绿色指针显示区域，大约在哪里，我想结束活动检测。
问题是，我需要每个图层仅在鼠标处于“圆形”范围内时激活，而不是限制框范围。 当鼠标移动仅基于X 或 Y时，它可以工作，但是当走向XY（对角线）时，边界框会影响正确的高光。
我知道我可以用多边形地图来解决这个问题，而这正是我开始研究的问题，但也许还有其他/更好的方法来解决这个问题？
虽然有一个问题，我可以使用的工具是HTML，CSS，JavaScript – 没有服务器端备份。 结果必须向后兼容到IE7。
也许你知道一个工具可以返回我从外部透明度去除应用的多边形边界框点坐标？
我希望你的巫师有一些想法。
您可以使用图像地图和空白图像叠加层轻松获得可点击的圆圈。 您可以将事件处理程序连接到AREA标记。 向后兼容（和脑死亡）。