JQuery MouseOver Part DIV

Question

Hi, I have a DIV that contains a sprite that has about 40 emoticons on it. Its 200px * 100px and each smiley is about 25 * 25px.

I want to be able to use the mouse to explain each smiley - for example: ':) smile'.

I'm not sure how I can get the JQUERY mouse effect for specific coordinates.

In fact, you just need to push in the right direction with this ... Do not know how to start ...

Can you set JQUERY to read parts of the DIV and respond differently?

Images are part of a single sprite, so I do not have separate ID / CLASS tags for connection.

Any advice is appreciated.

THX

Answer 1

This is actually quite simple.

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

Here's a working jsfiddle example - http://jsfiddle.net/MKVuk/

Here is the documentation on the topic - 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, not the page, which will be much more useful for solving your problem, I suspect.