Optimizacion onmouseover/onmouseout

hoberwilly · #1 (**permalink**) 20/01/2009, 14:26

Saludos,
tengo el siguiente codigo, quisiera por favor me podrian ayudar como optimizarlo con respecto al onmouseover/onmouseout del ultimo tag <tr> de la tabla:

Código php:

Ver original<!-- <?php 
session_start(); 
?>
<html>
<head>
<title>TOP DE USUARIO</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
 
<body link="#FFFF00" vlink="#FFFFFF" bgcolor="#f2f2f2">
<table border="0" width="100%" height="100%" align="center" cellspacing="0">
<tr>
    <td colspan="7" align="right" valign="top" height="25"></td>
    <td colspan="2" width="62%" align="right" valign="bottom" class="tit"><?php echo "Bienvenido [".$_SESSION['username']."]"; ?></td>
</tr>
<tr>
    <td colspan="7" height="8"></td>
    <td colspan="2" height="8"></td>
</tr>
<tr bgcolor="#727272" class="prod">             /////EN ESTE TAG ESTAN onmouseover/onmouseout
    <td width="14%" align="center" onmouseover='this.style.background="red"' onmouseout='this.style.background="#727272"'><a href="portada.php" style="text-decoration: none;" onmouseover="this.style.color='white';this.style.textDecoration='underline'" onmouseout="this.style.color='';this.style.textDecoration='none'" target="mainFrame">Principal</a></td>
    <td width="1%" height="28" bgcolor="#F2F2F2"></td>
    <td width="14%" align="center" onmouseover='this.style.background="red"' onmouseout='this.style.background="#727272"'><a href="catalogo.php" style="text-decoration: none;" onmouseover="this.style.color='white';this.style.textDecoration='underline'" onmouseout="this.style.color='';this.style.textDecoration='none'" target="mainFrame">Catálogo</a></td>
    <td width="1%" height="28" bgcolor="#F2F2F2"></td>
    <td width="14%" align="center" onmouseover='this.style.background="red"' onmouseout='this.style.background="#727272"'><a href="miOrden.php" style="text-decoration: none;" onmouseover="this.style.color='white';this.style.textDecoration='underline'" onmouseout="this.style.color='';this.style.textDecoration='none'" target="mainFrame">Mis Ordenes</a></td>
    <td width="1%" height="28" bgcolor="#F2F2F2"></td>
    <td width="14%" align="center" onmouseover='this.style.background="red"' onmouseout='this.style.background="#727272"'><a href="miCuenta.php" style="text-decoration: none;" onmouseover="this.style.color='white';this.style.textDecoration='underline'" onmouseout="this.style.color='';this.style.textDecoration='none'" target="mainFrame">Mi Cuenta</a></td>
    <td width="28%" bgcolor="#F2F2F2" align="right" valign="top" class="tit2"><a href="fin.php" target="_top" style="text-decoration:none;color:black" onmouseover="this.style.textDecoration='underline'" onmouseout="this.style.textDecoration='none'" onclick="return confirma();">Cerrar Sesión</a></td>
</tr>
</table>
</body>
</html> -->

Gracias

refreegrata · #2 (**permalink**) 20/01/2009, 14:33

si con optimizar te refieres a reducir codigo tendrias que usar hojas de estilo y manejar el hover, de esa no repites tanto codigo.
Con los hipervinculos no tendras problemas, con los <td> tendras que usar algun truco para IE, ya que si mal no recuerdo no acepta el condicion hover en css a menos que estes sobre hipervinculo(a). Creo que deberias preguntar en el foro de css.

hoberwilly · #3 (**permalink**) 20/01/2009, 14:41

Y no habria forma de realizar una funcion js digo yo para simplificar esos onmouseover/onmouseout? se me ocurre

refreegrata · #4 (**permalink**) 20/01/2009, 14:50

bueno podrias hacerlo en una funcion enviando this y en la funcion recibir el objeto y realizar el codigo

Código:

function ejemplo(objecto)
{
objeto.style.color='#000000';
...
..
}

algo asi, pero debieras usar hojas de estilo ya que precisamente controlar el estilo para asi separar de mejor manera las capas logicas del diseño

hoberwilly · #5 (**permalink**) 21/01/2009, 08:11

Por favor de trasladar este post al foro de css, gracias

Dalvenjha · #6 (**permalink**) 21/01/2009, 08:33

Claro podría ser con CSS, pero probablemente eso le traiga problemas con los elementos que no son hiperlinks, ya que esa basura del internet explorer 6 no acepta hover en otro elemento, y aqui la gran mayoría usan ie6.

Ahora creo que la solución más adecuada es la que hizo el amigo refreegrata. También me aventuraría por una solución con Dom. Poniendole un ID al último tr podríamos hacer lo siguiente (Poniendole el ID "ultimo" al ultimo tr):

Código javascript:

Ver original<script type="text/javascript">
function cambiacolor(){
this.style.background = "red"
}
 
function cambiacolor2(){
this.style.background = "#727272"
}
 
window.onload = function(){
var listado = document.getElementById('ultimo').getElementsByTagName('td');
 
for(var i=0; i<listado.length; i++) {
      listado[i].style.background = "#727272";
      listado[i].onmouseover = cambiacolor;
      listado[i].onmouseout = cambiacolor2;
       
    }
}
</script>

Esto nos permite cambiar los estilos a esos jodidos TDs, sin tener que escribir absolutamente nada dentro de ellos. Por supuesto, la verdadera solución sería desinstalar el ie6 de todas las computadoras, pero bueno, ya que estamos asi...

Pd.- Por cierto, esos dos colores no combinan para nada xD.

Saludos!!

hoberwilly · #7 (**permalink**) 21/01/2009, 08:40

Muchas gracias Dalvenjha, estare probandolo lo mencionado...posteo al finalizar como me fue

Saludos,