CODEWITHSUNDEEP
jquery
Adam
Adam

Reputation: 20872

Jquery MouseOver Part of DIV

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

not the one I'm using but a previous example - the same concept

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

Upvotes: 4

Views: 695

Answers (1)

Matthew Cox
Matthew Cox

Reputation: 13672

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.

Upvotes: 6

Related Questions