non-rectangular hoverable area

Question

I would like to have an arrow which will do something on :hover but only when the arrow itself is hovered (not the rectangle which delimits its width and height).

In short, when you hover on the right-bottom and right-top corners of an ► it shouldn't do anything.

How would I achieve that?

Answer 1

With a HTML map element? See < map >.

Update:

For example, like in this demo:

img {
  border: 3px solid black;
}

<br />
<img id="img" src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/3c/Black_triangle.svg/200px-Black_triangle.svg.png" usemap="#triangle" alt="" />
<map name="triangle">
    <area shape="poly" coords="3, 3, 195, 3, 100, 169"
        href="http://google.com" alt=""
        onmouseover="document.getElementById('img').style.borderColor = 'red';"
        onmouseout="document.getElementById('img').style.borderColor = 'black';"/>
</map>

Answer 2

Iff you have time -- learn SVG in JavaScript -- then, things like these will be nothing more than child's play.

Some useful links for SVG...

http://www.w3.org/Graphics/SVG/

this tutorial

http://raphaeljs.com/ (my favourite)

http://keith-wood.name/svg.html