Problema mouseover y mouseout

[samciar]

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]

[codeams]

Quizá debas utilizar mouseenter() y mouseleave() o mejor aún utilizar hover().

(El link muestra un error)

[samciar]

Si lo siento esque ya no es el archivo html sino php:

[URL="http://macroplazas.com/map-col.php"]http://macroplazas.com/map-col.php[/URL]


y pues por los eventos que me dices... no sabria como implementarlos para que funcionen en todos los navegadores

[codeams]

Pues te diré que lograr hacer funcionar hover+animate con jquery se puede poner feo. Te diré porqué:
Aparentemente puede funcionar bien al realizar las primeras pruebas pero si le exigimos un poco de más podremos notar inconsistencias como por ejemplo al cambiar de "objeto" muy rapidamente y luego regresar al primer objeto, si la animación del primer evento "hover" no se ha completado entonces la animación del segundo hover en vez de empezarse de cero se empezará justo donde la primera animación se quedó.

Esto muchas veces trae resultados inesperados pero, ¡es solucionable! Recuerdo haber leído hace un tiempo las mejores formas de utilizar .hover(), mouseenter(), etc. Sinceramente no las recuerdo pero puedes googlearlas, te aseguro que encuentras algo (:

Un ejemplo sencillo -el primero que se me ocurrió- al usar hover() sería algo asi:

Código Javascript:

$("#nombredelaregion").hover(
    function(){ //el cursor entra
        $('#areadelmapa').addClass( "hover" );
    }, function(){ //el cursor sale
        $('#areadelmapa').removeClass( "hover" );
    }
);
 

Código CSS:

#areadelmapa{
     transition:blue 500ms;
}
#areadelmapa.hover{
    background-color:blue;
}
 

Ventajas:
- Le dejamos el problema de las animaciones al navegador y asi evitamos el problema que te mencioné arriba.
Desventajas:
- transition tiene 80.59% de soporte (realmente no esta tan mal)


Nota: No me he leído tu código asi que lo que te dejé aquí arriba fue extremadamente genérico y tendrás que acoplarlo a tu proyecto por tí mismo, solo intento darte un punto de partida para investigar y escoger las herramientas que más te convengan (:

Puedes encontrar información adicional en el API de jQuery (en inglés).

Espero te sea de utilidad (:

[samciar]

vale muchas gracias, de verdad me la pones muy facil, ya en estos dias que tenga tiempo para la implementacion regional lo pruebo de verdad que como lo explicas se entiende refacil.... gracias...

lo unico que veo como maluquito esque al trabajar sobre etiquetas area de map en html no les sirven muchas cosas de estilos css asi que todo se debe pintar con jquery xd