Foros del Web » Programando para Internet » Javascript »

deshabilitar funcion onmouseover cuando se realice evento onclick

 Estas en el tema de deshabilitar funcion onmouseover cuando se realice evento onclick en el foro de Javascript en Foros del Web. hola a todos y desde ya, gracias por su ayuda. Bien les cuento, yo tengo una tabla con 6 filas y una columna, esta me ...
  #1 (permalink)  
Antiguo 24/06/2009, 19:17
 
Fecha de Ingreso: noviembre-2008
Ubicación: lima
Mensajes: 148
Antigüedad: 15 años, 5 meses
Puntos: 0
Exclamación deshabilitar funcion onmouseover cuando se realice evento onclick
hola a todos y desde ya, gracias por su ayuda.
Bien les cuento, yo tengo una tabla con 6 filas y una columna, esta me sirve para simular un menu, cuando paso el mouse por encima la imagen de fondo de la celda cambia y cuando quito el mouse regresa a su imagen inicial, para esto llamo a dos fucniones distintas(la del mouseover y la de mouseout), el problema es que cuando yo le hago un click a una cela me gustaria que se quede con la imagen de fondo que aparece cuando paso el mouse por encima, pero el problema es que cambia al sacar el mouse.

Aquí les dejo mi codigo.
Código HTML:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
<style>
	a, A:link, a:visited, a:active
		{color: #0000aa; text-decoration: none; font-family: Tahoma, Verdana; font-size: 11px}
	A:hover
		{color: #ff0000; text-decoration: none; font-family: Tahoma, Verdana; font-size: 11px}
	p, tr, td, ul, li
		{color: #000000; font-family: Tahoma, Verdana; font-size: 11px}
	.header1, h1
		{color: #ffffff; background: #4682B4; font-weight: bold; font-family: Tahoma, Verdana; font-size: 13px; margin: 0px; padding: 2px;}
	.header2, h2
		{color: #000000; background: #DBEAF5; font-weight: bold; font-family: Tahoma, Verdana; font-size: 12px;}
	.intd
		{color: #000000; font-family: Tahoma, Verdana; font-size: 11px; padding-left: 15px; padding-right: 15px;}
	.ctrl
		{font-family: Tahoma, Verdana, sans-serif; font-size: 12px; width: 100%; }
	form
		{ margin: 2px;}
body {
	background-image: url(images/foni2.gif);
	font-family:Calibri;
	font-size:11px;
}
</style>
<script type="text/javascript">
function naranja(num)
{
 var elemento= 'celda'+num;
document.getElementById(elemento).style.background ='url(../Images/fondo2.png)';

}

function celeste(num)
{
 var elemento= 'celda'+num;
document.getElementById(elemento).style.background ='url(../Images/fondo1.png)';

}
function tab(nro){

	var navegador = navigator.appName

	if (navegador == "Microsoft Internet Explorer"){clase="className";display="block";}

	else{clase="class";display="table-row";}

	if(nro==1){

		document.getElementById('tab1').style.display=display;
		document.getElementById('tab2').style.display='none';
		document.getElementById('tab3').style.display='none';
		document.getElementById('tab4').style.display='none';
		document.getElementById('tab5').style.display='none';
		document.getElementById('tab6').style.display='none';
		document.getElementById('celda1').style.background ='url(../Images/fondo2.png)';
		document.getElementById('celda2').style.background ='url(../Images/fondo1.png)';
		document.getElementById('celda3').style.background ='url(../Images/fondo1.png)';
		document.getElementById('celda4').style.background ='url(../Images/fondo1.png)';
		document.getElementById('celda5').style.background ='url(../Images/fondo1.png)';

	}else if(nro==2){

		document.getElementById('tab1').style.display='none';
		document.getElementById('tab2').style.display=display;
		document.getElementById('tab3').style.display='none';
		document.getElementById('tab4').style.display='none';
		document.getElementById('tab5').style.display='none';
		document.getElementById('tab6').style.display='none';
		document.getElementById('celda2').style.background ='url(../Images/fondo2.png)';
		document.getElementById('celda1').style.background ='url(../Images/fondo1.png)';
		document.getElementById('celda3').style.background ='url(../Images/fondo1.png)';
		document.getElementById('celda4').style.background ='url(../Images/fondo1.png)';
		document.getElementById('celda5').style.background ='url(../Images/fondo1.png)';
	}else if(nro==3){

		document.getElementById('tab1').style.display='none';
		document.getElementById('tab2').style.display='none';
		document.getElementById('tab3').style.display= display;
		document.getElementById('tab4').style.display='none';
		document.getElementById('tab5').style.display='none';
		document.getElementById('tab6').style.display='none';
		document.getElementById('celda3').style.background ='url(../Images/fondo2.png)';
		document.getElementById('celda1').style.background ='url(../Images/fondo1.png)';
		document.getElementById('celda2').style.background ='url(../Images/fondo1.png)';

		document.getElementById('celda4').style.background ='url(../Images/fondo1.png)';
		document.getElementById('celda5').style.background ='url(../Images/fondo1.png)';
	
	}else if(nro==4){

		document.getElementById('tab1').style.display='none';
		document.getElementById('tab2').style.display='none'
		document.getElementById('tab3').style.display='none';
		document.getElementById('tab4').style.display=display;
		document.getElementById('tab5').style.display='none';
		document.getElementById('tab6').style.display='none';
		document.getElementById('celda4').style.background ='url(../Images/fondo2.png)';
		document.getElementById('celda1').style.background ='url(../Images/fondo1.png)';
		document.getElementById('celda2').style.background ='url(../Images/fondo1.png)';
		document.getElementById('celda3').style.background ='url(../Images/fondo1.png)';
		document.getElementById('celda5').style.background ='url(../Images/fondo1.png)';
	
	}else if(nro==5){

		document.getElementById('tab1').style.display='none';
		document.getElementById('tab2').style.display='none';
		document.getElementById('tab3').style.display='none';
		document.getElementById('tab4').style.display='none';
		document.getElementById('tab5').style.display=display;
		document.getElementById('tab6').style.display='none';
		document.getElementById('celda5').style.background ='url(../Images/fondo2.png)';
		document.getElementById('celda1').style.background ='url(../Images/fondo1.png)';
		document.getElementById('celda2').style.background ='url(../Images/fondo1.png)';
		document.getElementById('celda3').style.background ='url(../Images/fondo1.png)';
		document.getElementById('celda4').style.background ='url(../Images/fondo1.png)';
	
	
	}else if(nro==6){

		document.getElementById('tab1').style.display='none';
		document.getElementById('tab2').style.display=display;
		document.getElementById('tab3').style.display='none';
		document.getElementById('tab4').style.display='none';
		document.getElementById('tab5').style.display='none';
		document.getElementById('tab6').style.display='none';
		document.getElementById('celda6').style.background ='url(../Images/fondo2.png)';
	}

}
</script>
<link rel="STYLESHEET" type="text/css" href="css/estilo1.css">
<script language="JavaScript" src="tigra_tree_menu/tree.js"></script>
<script language="JavaScript" src="tigra_tree_menu/tree_items.js"></script>
<script language="JavaScript" src="tigra_tree_menu/tree_tpl.js"></script>
</head>

<body>
<table style="height:400px">
<tr>
	<td width="213" valign="top">
<table width="200" border="0" align="center">
  <tr id="tab1" >
    <td height="20">
	<script language="JavaScript">
			<!--
			new tree (TREE_ITEMS, tree_tpl);

			//-->
	</script></td>
  </tr>
  <tr id="tab2" style="display:none">
    <td height="20">
	<script language="JavaScript">
			<!--
			new tree (TREE_ITEMS2, tree_tpl);

			//-->
	</script>
	
	</td>
  </tr>
  <tr id="tab3" style="display:none">
    <td height="20">&nbsp;</td>
  </tr>
  <tr id="tab4" style="display:none">
    <td height="20">&nbsp;</td>
  </tr>
  <tr id="tab5" style="display:none">
    <td height="20">&nbsp;</td>
  </tr>
  <tr id="tab6" style="display:none">
    <td height="20">&nbsp;</td>
  </tr>
</table>
	<p>&nbsp;</p></td>
</tr>
<tr>
	<td>&nbsp;</td>
</tr>
</table>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<table width="222" border="0" cellspacing="1">
  <tr id="celda1" onclick="tab(1)" style="cursor:pointer; background-image:url(../Images/fondo1.png)" onmouseover=" return naranja(1)"  onmouseout="return celeste(1)">
    <td width="216" height="27">Maestros</td>
  </tr>
  <tr id="celda2" onclick="tab(2)" style="cursor:pointer; background-image:url(../Images/fondo1.png)" onmouseover=" return naranja(2)" onmouseout="return celeste(2)">
    <td height="27">Pedidos</td>
  </tr>
  <tr id="celda3" onclick="tab(3)" style="cursor:pointer; background-image:url(../Images/fondo1.png)" onmouseover=" return naranja(3)" onmouseout="return celeste(3)">
    <td height="27">Compras</td>
  </tr>
  <tr  id="celda4" onclick="tab(4)" style="cursor:pointer; background-image:url(../Images/fondo1.png)" onmouseover=" return naranja(4)" onmouseout="return celeste(4)">
    <td height="27">Proveedores</td>
  </tr>
  <tr id="celda5" onclick="tab(5)" style="cursor:pointer; background-image:url(../Images/fondo1.png)" onmouseover=" return naranja(5)" onmouseout="return celeste(5)">
    <td height="27">Stock</td>
  </tr>
</table>
</body>

</html>
A ver si me pueden echar una mano.

Gracias.
  #2 (permalink)  
Antiguo 25/06/2009, 08:05
Avatar de Adler
Colaborador
  
Fecha de Ingreso: diciembre-2006
Mensajes: 4.671
Antigüedad: 17 años, 4 meses
Puntos: 126
Respuesta: deshabilitar funcion onmouseover cuando se realice evento onclick
Hola

Esto es un ejemplo que puede que te ayude

Código javascript: 
Ver original
  1. <html>
  2. <head>
  3. <style type="text/css">
  4. #tabla td {background-color:#FFFFFF;}
  5. </style>
  6. <script type="text/javascript">
  7. window.onload = function () {
  8. var elementos = document.getElementById("tabla").getElementsByTagName("td");
  9.     for (var i=0;i < elementos.length; i++)  { 
  10.         
  11.         elementos[i].onclick = Celda;
  12.         elementos[i].onmouseover = Celda;
  13.         elementos[i].onmouseout = Celda;
  14.             
  15.         }
  16.  
  17. }
  18.  
  19. function Celda(evento) {
  20. var evento = evento || window.event;
  21.     switch(evento.type) {
  22. case 'mouseover':
  23.     this.style.backgroundColor = (this.style.backgroundColor == '#ff0000') ? '#FFFF00' : '#CCFFCC'; 
  24. //alert(this.style.backgroundColor);
  25.     break;
  26.  
  27.  
  28. case 'mouseout':
  29.     this.style.backgroundColor = (this.style.backgroundColor == '#ccffcc') ? '#FFFFFF' : '#FF0000'; 
  30. //alert(this.style.backgroundColor);
  31.     break;
  32.  
  33.  
  34. case 'click':
  35.     this.style.backgroundColor = (this.style.backgroundColor ==  '#ccffcc') ? '#FF0000' : '#CCFFCC';
  36. //alert(this.style.backgroundColor);
  37.     break;
  38.   }
  39. }
  40.  
  41.  
  42. </script>
  43. </head>
  44. <body>
  45. <table border="1" id="tabla">
  46. <tr>
  47. <td>celda1</td>
  48. <td>celda2</td>
  49. <td>celda3</td>
  50. <td>celda4</td>
  51. <td>celda5</td>
  52. <td>celda6</td>
  53. <td>celda7</td>
  54. </tr>
  55. </table>
  56. </body>
  57. </html>

Suerte
__________________
Los formularios se envían/validan con un botón Submit
<input type="submit" value="Enviar" style="background-color:#0B5795; font:bold 10px verdana; color:#FFF;" />
  #3 (permalink)  
Antiguo 26/06/2009, 06:00
Avatar de IsaBelM
Colaborador
  
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 15 años, 10 meses
Puntos: 1012
Respuesta: deshabilitar funcion onmouseover cuando se realice evento onclick
no he logrado que funcione en FF ¿tal vel no es posible?

gracias
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}
  #4 (permalink)  
Antiguo 26/06/2009, 06:25
Avatar de Adler
Colaborador
  
Fecha de Ingreso: diciembre-2006
Mensajes: 4.671
Antigüedad: 17 años, 4 meses
Puntos: 126
Respuesta: deshabilitar funcion onmouseover cuando se realice evento onclick
Hola

No me entra el Cross-browser

Sería algo así

Código javascript: 
Ver original
  1. case 'mouseover':
  2. this.style.backgroundColor = ((this.style.backgroundColor == '#ff0000') || (this.style.backgroundColor == 'rgb(......)'))   ? '#FFFF00' : '#CCFF66' ;

En FF hay usar rgb(....), repite lo mismo con cada evento

Conversor de hex a rgb

Suerte
__________________
Los formularios se envían/validan con un botón Submit
<input type="submit" value="Enviar" style="background-color:#0B5795; font:bold 10px verdana; color:#FFF;" />
  #5 (permalink)  
Antiguo 27/06/2009, 07:46
Avatar de IsaBelM
Colaborador
  
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 15 años, 10 meses
Puntos: 1012
Respuesta: deshabilitar funcion onmouseover cuando se realice evento onclick
gracias, perfecto
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 18:30.