How to tackle diagonally stacked, rounded image background element hovers?

Question

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/ 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>

reference

In the image:

red pointers display areas, where currently the box remains active.
green pointers display areas, where approximately, I would like to be the end of activity detection.

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?

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.

Can you post the relevant code that demonstrates your situation here? External links don't fly on Stack Overflow... — John Dvorak, Dec 18 '13 at 13:38
Ohh, it's more seeing than reading. The code is bunch of CSS and HTML lines, that alone won't provide anything. — tomsseisums, Dec 18 '13 at 13:39
Added a screenshot and a little description around what can be seen there. — tomsseisums, Dec 18 '13 at 13:50
What the heck are you trying to build anyway? I am just trying to understand the practical purpose of your app, maybe there is a better way to do what you are ultimately trying to achieve. — user1477388, Dec 18 '13 at 13:58
@JanDvorak, yes, the good old bastard. As for user1477388 - that's an interactive web-based "postcard" about corporations history. — tomsseisums, Dec 18 '13 at 14:00
JSFiddle for those who want to play with the code: http://jsfiddle.net/Wm32D/1/ — gvee, Dec 18 '13 at 14:08
This *might* be useful: http://stackoverflow.com/questions/2689308/hover-only-on-non-transparent-part-of-image — gvee, Dec 18 '13 at 14:14
A very cheeky solution: http://jsfiddle.net/Wm32D/2/ <- basically I've removed the cursor from the boxes. Users will be none the wiser ;) ...I'll get my coat.. — gvee, Dec 18 '13 at 14:17
do u want the effect when u hover the border of the "a" tag? I don't want to read the whole question? =D — , Dec 18 '13 at 14:18

score 0 · Accepted Answer · answered Dec 18 '13 at 15:43

0

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).

answered Dec 18 '13 at 15:43

Diodeus - James MacFarlane

112,730
33
157
176

How to tackle diagonally stacked, rounded image background element hovers?

1 Answers1

Linked