如何处理对角堆积的圆形图像背景元素盘旋？ [英] How to tackle diagonally stacked, rounded image background element hovers?
问题描述
我在这里遇到了很大的挑战，而且我的语言差距也可能对你解密标题提出挑战，但是，嘿......
I have quite a challenge here, and my language gap could also provide a challenge to you decrypting the title, but, heh...
http://toms.somese.lv/test/ 或 http://jsfiddle.net/Wm32D/1/ （由gvee创建）
http://toms.somese.lv/test/ or http://jsfiddle.net/Wm32D/1/ (created by gvee)
红色阴影是其中包含圆形图像的元素的边框。在悬停时，您将能够看到它们。
The red shadows are borders for elements that have the rounded images inside them. On hover you'll be able to see them.
<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>
图片中：
- 红色指针显示区域，当前盒子仍处于活动状态。
- 绿色指针显示区域，大约在哪里，我希望
活动检测结束。
问题是，我只需要在鼠标处于舍入范围而不是边界框范围内时激活每个图层。当鼠标移动仅基于X 或 Y时，它会起作用，但是当走向XY（对角线）时，边界框会影响正确的高光。
The thing is, I need each layer to activate only when the mouse is in its "rounded" range, not bounding box range. It works when the mouse movement is only X or Y based, but, when going XY (diagonally) the bounding box affects the proper highlight.
我知道我可以用多边形地图来解决这个问题，这就是我开始研究的问题，但是，也许还有其他/更好的方法来解决这个问题？
I know I can solve this with polygonal maps, and that's what I'm starting to work on, but, maybe there are other/better ways to solve this?
虽然有一个问题，我可以使用的工具是HTML，CSS，JavaScript - 没有服务器端备份。结果必须向后兼容到IE7。
There is a catch though, tools at my disposal are HTML, CSS, JavaScript - no server side backup. The result has to be backwards compatible down to IE7.
也许你知道一个工具会返回我从外部透明度去除应用的多边形边界框坐标点？
Maybe you know of a tool that would return me polygonal bounding box point coordinates applied from outer transparency removal?
我希望你的巫师有一些想法。
I hope you wizards have something in mind.
推荐答案
你可以轻松搞定使用imagemap和空白图像叠加层的可点击圆圈。您可以将事件处理程序连接到 AREA 标记。向后兼容（和脑死亡）。
You can easily get a clickable circle using an imagemap and a blank image overlay. You can hook up event handlers to the AREA tag. Backwards-compatible (and brain-dead).
这篇关于如何处理对角堆积的圆形图像背景元素盘旋？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
