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

![this one](https://i.stack.imgur.com/DygVC.png)

I've been advised to use this code for co-ordinates:

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

```

and this works great - it shows the mouse position very well - very happy with this.

I'm unsure how to alter this code so that I can pin point areas....

I've tried:

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

    if(x < 1 && x > 25) && (y < 1 && y > 25) {
        alert('captured mouse over');
    }
});

```

but this doesn't work - how can I capture specific area events?

thx

Answer: 
Change your `if` condition to:

```
if(x>=0 && x<25 && y>=0 && y<25)

```

Also see my [jsfiddle](http://jsfiddle.net/scessor/kfr7Y/4/).
No javascript required - Just use the title attribute:

```
<img src="emoticons/smile.png" title=":) smile" />

```