Question

Hi I’ve got a DIV that holds a sprite that has around 40 emoticons on it.
Its 200px * 100px and each emoticons is around 25*25px.

I want to be able to use a mouse over to explain each emoticon – eg: ‘:) smile’.

I not sure how I can get a JQUERY mouseover effect to specific co-ordinates.

Really just need a push in the right direction with this one…
Not sure how to get started…

Can you set JQUERY to read portions of a DIV and respond differently?

The images are all part of one sprite so I don’t have separate ID/CLASS tags to hook into.

Any advice would be greatly appreciated.

thx

Answer 1

It’s actually quite easy.

$("#div").mousemove(function(e)
{
    var x = e.pageX - this.offsetLeft;
    var y = e.pageY - this.offsetTop;
});

Here a working jsfiddle example — http://jsfiddle.net/MKVuk/

Here is documentation on the subject — http://docs.jquery.com/Tutorials:Mouse_Position#How_do_I_find_the_mouse_position.3F

Edit:

My version will return the coordinates relative to the element rather than the page, which is going to be much more useful for solving your problem I suspect.