自定义图像标记。标记到图像完成¿和图像到标记?
你好,我正在实现一个自定义地理标记系统,好吧
,我存储每个地方的cordenades的数组,
/* ******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
但这看起来并不真正有效,只要它必须计算每个像素的移动,不是吗?
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 a few items and when you hover one them, jquery retrieves the classname, it checks the cordinades in the object (according the classname) and displays a cursor in the 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??? (if you want to see it in action please http://toniweb.us/gm and click on 'Book Now' and hover a item)
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?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论