problema con funciones js, estados onClick, OnMouseover y onMouseout

michelson · #1 (**permalink**) 26/12/2007, 16:01

Hola amigos del foro, tengo un problemilla que no se como slucionar.

verán, tengo unos botones que tienen imagen de background en vez de text (requerimiento de mi cliente)

la idea es que al estar en el mouse over este cambie de imagen y cuando este en el mouse out vuelva a la imagen original, por último una vez cliceado el boton que quede con la imagen del mouseover, pero mi problema es que el mouseout sobreescribe esa funcion y el boton no queda selecionado.

estes mi codigo html, aqui llamo a las funciones , son dos botones

Código HTML:

<a id="plantas" onClick="javascript:muestra_item('esconde_puntos2',2);"  onMouseover="over_item('plantas','plantas_over.jpg')" onMouseout="out_item('plantas','plantas_reposo.jpg')" style="cursor:pointer;">plantas</a>

<a id="centros" onClick="javascript:muestra_item('esconde_puntos3',3);" onMouseover="over_item('centros','centros_over_2.jpg')" onMouseout="out_item('centros','centros_reposo_2.jpg')"  style="cursor:pointer;">centros de distribución</a>

js: /*este es mi js , aqui ejecuto las funciones del over_item(para mostrar la imagen ), out_item, para mostrar la imagen deseleccionada*/

Código HTML:

function over_item(id,foto){
		var h = document.getElementById(id); // el over
	h.style.background = "url('../../images/sitio_es/quienes_somos/cobertura_geografica/"+foto+"') no-repeat";
}
function out_item(id,foto){
		var h = document.getElementById(id); // el out
	h.style.background = "url('../../images/sitio_es/quienes_somos/cobertura_geografica/"+foto+"') no-repeat";
}

lugo tengo orra funcion que se llama muestra_item() que se hace cuando le doy al OnClick que es la que debería dejar la imagen del boton selecionado , esta funcion no la pongo porque tiene muchas lineas ya que activa otras cosas ademas, pero la funcion daba resultados cuando no tenía los estados mouseOver ni Mouseout, pero el problema es que el mouse_out sobreescribe esta funcion y necesito darle estos rollover a los botones, el otro problema es que intente hacer esto con CSS (los :hover) pero una vez que clickeaba (onClck) el boton , el js sobreescribe el estado :hover del css .

a alguien le ha sucedido algo similar??
si necesitan mas antecedentes me avisan

Saludos, y feliz navidad

derkenuke · #2 (**permalink**) 26/12/2007, 17:10

Hola michelson:

En estos casos yo soy partidario de buscar una solución cómoda. En el evento onclick quitamos los eventos onmouseover y onmouseout. La manera de hacerlo bien es con detachEvent(), pero nunca la he utilizado. Ésto es igual de funcional:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es"> 
<head> 
<meta http-equiv="Content-type" content="text/html;charset=iso-8859-1" /> 
<meta name="Author" content="derkeNuke" /> 
<title>Página nueva</title> 
<style type="text/css"> 
 
</style> 
</head> 
 
<body> 
 
<button type="button" id="elBoton" style="color:green;">hola caracola</button> 
 
<script type="text/javascript"> 
<!-- 
 
var btn = document.getElementById("elBoton"); 
btn.onmouseover = function() { 
    this.style.color = "red"; 
} 
btn.onmouseout = function() { 
    this.style.color = "green"; 
} 
btn.onclick = function() { 
    this.onmouseover = this.onmouseout = null; 
    alert("Me has hecho click! Ahora me quedaré para siempre en rojo!"); 
} 
 
// --> 
</script> 
 
</body> 
</html>

Si no puedes quitar los eventos mouseover y mouseout pensaremos otra cosa, pero de momento así

Un saludo.