Question

我在这里遇到了很大的挑战，而且我的语言差距也可能对你解密标题提出挑战，但是，嘿......

http://toms.somese.lv/test/或http://jsfiddle.net/Wm32D/1/（由gvee创建）

红色阴影是其中包含圆形图像的元素的边框。在悬停时，你将能够看到它们。

<style>
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');
        }
</style>

<div id="application">
    <section id="ages">
        <a class="year20" href="#"><span></span></a>
        <a class="year19" href="#"><span></span></a>
        <a class="year18" href="#"><span></span></a>
        <a class="year17" href="#"><span></span></a>
        <a class="year16" href="#"><span></span></a>
        <a class="year15" href="#"><span></span></a>
        <a class="year14" href="#"><span></span></a>
        <a class="year13" href="#"><span></span></a>
        <a class="year12" href="#"><span></span></a>
        <a class="year11" href="#"><span></span></a>
        <a class="year10" href="#"><span></span></a>
        <a class="year9" href="#"><span></span></a>
        <a class="year8" href="#"><span></span></a>
        <a class="year7" href="#"><span></span></a>
        <a class="year6" href="#"><span></span></a>
        <a class="year5" href="#"><span></span></a>
        <a class="year4" href="#"><span></span></a>
        <a class="year3" href="#"><span></span></a>
        <a class="year2" href="#"><span></span></a>
        <a class="year1" href="#"><span></span></a>
    </section>
</div>

reference

在图片中：

红色指针显示区域，当前框仍保持活动状态。
绿色指针显示区域，大约在哪里，我想成为活动检测结束。

问题是，我需要每个图层仅在鼠标处于“圆角”范围内时激活，而不是限制框范围。当鼠标移动仅基于X 或 Y时，它会起作用，但是当沿XY（对角线）移动时，边界框会影响正确的高光。

我知道我可以用多边形地图来解决这个问题，而这正是我开始研究的问题，但也许还有其他/更好的方法来解决这个问题？

虽然有一个问题，我可以使用的工具是HTML，CSS，JavaScript - 没有服务器端备份。结果必须向后兼容到IE7。

也许你知道一个工具可以返回我从外部透明度去除应用的多边形边界框坐标点？

我希望你的巫师有一些想法。

Answer 1

您可以使用图像地图和空白图像叠加层轻松获得可点击的圆圈。您可以将事件处理程序连接到AREA标记。向后兼容（和脑死亡）。

如何处理对角堆积的圆形图像背景元素盘旋？

1 个答案: