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: 
I would just append empty `<div>` elements to the container, with absolute position, each with the proper title according to mapping you have to define. Code will explain it better:

```
var iconWidth = 25;
var iconHeight = 25;
var toolTips = {
    "0,0": "big grin",
    "0,25": "cool", 
    "25,0": "wink"
};
var container = $("#Container");
container.css("position", "relative");
var totalWidth = container.width();
var totalHeight = container.height();
for (var x = 0; x <= totalWidth; x += iconWidth) {
    for (var y = 0; y <= totalHeight; y += iconHeight) {
        var toolTip = toolTips[x + "," + y];
        if (toolTip) {
            var newDiv = $("<div />").css({"position": "absolute", "width": iconWidth + "px", "height": iconHeight + "px", left: x + "px", top: y + "px" }).attr("title", toolTip);
            container.append(newDiv);
        }
    }
}

```

The mapping is using `x,y` format e.g. define the tooltip of the icon starting at the given X and Y pixel coordinates.

[Live test case](http://jsfiddle.net/TCXtY/) using your own image. (For some reason it's 40x40 for each icon, anyway just hover over the grin, wink and cool icons :))
No javascript required - Just use the title attribute:

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

```