Hello there i am implementing a custom geo tagging system, ok

Array where i store the cordenades of each place

/* ******Opciones del etiquetado del mapa*** */
    var TagSpeed = 800; //el tiempo de la animacion
    var animate = true;     //false = fadeIn / true = animate
    var paises = {
        "isora":  {
             leftX: '275',
             topY: '60',
             name: 'Gran Melia Palacio de Isora'
        },
        "pepe":  {
             leftX: '275',
             topY: '60',
             name: 'Gran Melia  de Don Pepe'
        },
        "australia":  {
             leftX: '565',
             topY: '220',
             name: 'Gran Melia Uluru'
        },
        "otro":  {            //    ejemplo
             leftX: '565',    //    cordenada x 
             topY: '220',     //    cordenada y
             name: 'soy otro' //    nombre a mostrar
        }  /*                 <==>  <span class="otro mPointer">isora</span> */
    }
/**/    

this is how i check with js

function escucharMapa(){
    /*fOpciones*/
    $('.mPointer').bind('mouseover',function(){
        var clase = $(this).attr('class').replace(" mPointer", "");
        var left_ = paises[clase].leftX;
        var top_ = paises[clase].topY;
        var name_ = paises[clase].name;
        $('.arrow .text').html(name_);
        /*Esta linea centra la etiqueta del hotel con la flecha. Si cambia el tamaño de fuente o la typo, habrá que cambiar el  3.3*/
        $('.arrow .text').css({'marginLeft':'-'+$('.arrow .text').html().length*3.3+'px'});
        $('.arrow').css({top:'-60px',left:left_+'px'});
        if(animate) $('.arrow').show().stop().animate({'top':top_},TagSpeed,'easeInOutBack');
        else $('.arrow').css({'top':top_+'px'}).fadeIn(500);
    });
    $('.mPointer').bind('mouseleave',function(){
        if(animate) $('.arrow').stop().animate({'top':'0px'},100,function(){ $('.arrow').hide() });
        else $('.arrow').hide();
    });
}
/*Inicio gestion geoEtiquetado*/
$(document).ready(function(){

    escucharMapa();
}); 

HTML

<div style="float:left;height:500px;">
                    <div class="map">
                        <div class="arrow">
                            <div class="text"></div>
                            <img src="img/flecha.png"/>
                        </div>
                        <!--mapa-->
                        <img src="http://www.freepik.es/foto-gratis/mapa-del-mundo_17-903095345.jpg" id="img1"/>
                        <br/>
                        <br/>
                        <span class="isora mPointer">isora</span> <span class="pepe mPointer">Pepe</span> <span class="australia mPointer">Australia</span>
                    </div>                      
                </div>

OK so you have vew items and when you hover one, it gets the classname, it checks the cordinades in the object and displays a cursor in those cordinades of the image, right?

ok so how can i do the opposite? lets say if user hovers +-30px error margin (top and left) an area in the map the item is highlighted???

i was considering

-on map image mouse over
     - get the offset of the mouse
     - if is in the margin error area  
             -show 
     else 
             -no show

But that does not look really efficient as long as it would have to caculate each pixel movement, no?