Mouse over of arbitrary shapes

[amaccormack]

I can think of a number of ways do detect if the mouse if over (or
clicking on, etc) a arbitrary shaped bitmapped image (say, some sprite
where we want pixel-perfect click detection, not an enclosing
rectangle) , such as some kind of array with a mask in it, individual
lines of the sprite split into tiny rectangles, doing it all on the
server side via an XML request, but I wondered if anyone could offer
their experience or thoughts on the "best" way to do this that doesn't
eat too much client or server resources.

 

[Erwin Moller]

I can think of a number of ways do detect if the mouse if over (or
clicking on, etc) a arbitrary shaped bitmapped image (say, some sprite
where we want pixel-perfect click detection, not an enclosing
rectangle) , such as some kind of array with a mask in it, individual
lines of the sprite split into tiny rectangles, doing it all on the
server side via an XML request, but I wondered if anyone could offer
their experience or thoughts on the "best" way to do this that doesn't
eat too much client or server resources.

Hi,

What about the good old imagemap?
Google 'imagemap', and you'll find a lot of resources.

You can make arbitrary shapes in it, and define also your JavaScript
handlers.

Here is a quick starters guide:
http://www.w3schools.com/tags/tag_map.asp

Of course you can also homecook your own routine, based on the x and y
position of the mouse over the image, but why reinvent the wheel?

Regards,
Erwin Moller

 

[Thomas 'PointedEars' Lahn]

I can think of a number of ways do detect if the mouse if over (or
clicking on, etc) a arbitrary shaped bitmapped image (say, some sprite
where we want pixel-perfect click detection, not an enclosing
rectangle), such as some kind of array with a mask in it, individual
lines of the sprite split into tiny rectangles, doing it all on the
server side via an XML request, but I wondered if anyone could offer
their experience or thoughts on the "best" way to do this that doesn't
eat too much client or server resources.

Use a client-side image map and the `onmouseover' attribute of the `area'
element. However, there are no arbitrary shaped areas in pure (X)HTML, only
circular and polygonal ones; you need a vector graphics format like SVG if
you need other shapes. SVG can also be scripted with ECMAScript
implementations.


HTH

PointedEars