Пользовательские изображения тегов.тег на изображение сделано ¿и изображение на тег? - PullRequest
Новая
       18

Пользовательские изображения тегов.тег на изображение сделано ¿и изображение на тег?

1 голос
/ 23 ноября 2011

Здравствуйте, я внедряю собственную систему геотегирования, хорошо

Массив, где я храню корнады каждого места 

/* ******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> */
    }
/**/

вот как я проверяю с помощью 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>

Хорошо, у вас есть несколько элементов, и когда вы наводите на них курсор, jquery извлекает имя класса, проверяет кординады в объекте (в соответствии с именем класса) и отображает курсор в кординадах изображения, верно?

хорошо, так как я могу сделать обратное? скажем, если пользователь наведет курсор на + -30px допустимое отклонение (вверху и слева) области на карте, элемент выделен ??? (если вы хотите увидеть его в действии, пожалуйста, http://toniweb.us/gm и нажмите «Забронировать сейчас» и наведите курсор на элемент)

я думал 

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

Но это не выглядит действительно эффективным, если бы пришлось рассчитывать каждое движение пикселя, не так ли?

...