Tema: deshabilitar funcion onmouseover cuando se realice evento onclick
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 24/06/2009, 19:17
fiorella_liz
 
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.