 Problema mouseover y mouseout
Buenas noches, compañeros,
quiero por favor comentarles el gran problema que me tiene dando vuelvas estos ultimos 3 dias,
resulta que implemente una pequeña funcion javascript para resaltar una etiqueta <area ...> de un map html
y me funciona bastante bien con el cursor encima,
pero al crear una funcion que me resalte el area poniendo el cursor en un objeto externo, como por ejemplo un link o cualquier otra cosa me resultan los siguientes errores:
la primera vez que situo el cursor sobre el link para resaltar, no ocurre nada, digo no se resalta el area, luego lo vuelo a probar, osea la segunda vez que situo el cursor sobre el link si me sirve y si lo vuelvo a probar me sigue funcionando pero el area se va resaltando cada vez mas, ya que predeterminadamente lo tengo con una opacidad de 0.6 y cada vez que lo resalto mediante el link fuera del mapa se resalta una tras otra hasta que queda totalmente opaca osea en 1,
pero si situo directamente el cursor sobre el area me funciona perfectamente.
les dejo aqui las secciones de codigo que creo que me dan el problema:
funcion javascript :
Código:
<script type="text/javascript">
function drawDept(campo, idDept) {
var titleArea= document.getElementById(idDept).title;
$('#'+campo).mouseover(function(e) {
$('#'+idDept).mouseover();
}).mouseout(function(e) {
$('#'+idDept).mouseout().click(function(e) { e.preventDefault(); });
document.getElementById(idDept).title = titleArea;
});
//alert('titulo: '+titleArea+' id de Area: '+idDept);
}
</script>
lo que hace esta funcion es usar los elementos que esta recibe los cuales son: (id de link, id de area) y con eso emular el cursor sobre el area que debe resaltar.
ahora los links: Código HTML: <a onmouseover="drawDept(this.id, 'guaj')" class="linkDept" id="guajLink" href="#">Guajira</a>
<a onmouseover="drawDept(this.id, 'magd')" class="linkDept" id="magdLink" href="#">Magdalena</a>
<a onmouseover="drawDept(this.id, 'cesa')" class="linkDept" id="cesaLink" href="#">Cesar</a>
estos envian la id de cada uno y la id del area de cada uno para resaltar.
ahora el map: Código HTML: <map name="mapCol">
<area class="vtip" id="guaj" href="#" alt="Guajira" title="Guajira" shape="poly" coords="234,71,241,56,244,56,245,52,252,49,256,42,263,32,268,31,280,28,287,20,283,12,276,9,270,11,263,13,263,16,259,17,256,15,253,24,247,30,239,32,229,40,221,45,214,46,211,60,223,59,222,63,226,62,229,67,227,72,233,70">
<area class="vtip" id="magd" href="#" alt="Magdalena" title="Magdalena" shape="poly" coords="203,117,206,113,203,111,200,105,198,103,197,100,198,99,201,99,206,97,204,94,200,86,198,84,201,76,212,69,212,61,210,59,213,45,204,44,197,43,193,46,193,50,190,59,190,61,186,61,182,59,186,55,177,52,178,65,172,75,171,80,175,84,173,89,176,96,175,100,183,108,187,106,196,115,197,114">
<area class="vtip" id="cesa" href="#" alt="Cesar" title="Cesar" shape="poly" coords="232,77,232,86,230,91,226,96,220,106,217,111,217,117,217,120,214,129,216,133,217,134,220,133,218,142,221,145,218,149,217,156,211,154,207,152,206,142,207,132,204,124,203,118,208,112,204,111,202,106,198,101,207,98,201,85,200,82,202,76,212,68,212,60,224,60,221,63,226,63,229,68,227,72,233,72">
</map>
y pues por ultimo les dejo el mapa medio funcionando en mi pagina web:
[URL="http://macroplazas.com/map-col.html"]http://macroplazas.com/map-col.html[/URL] |