onmouseover con li

erick_arcini · #1 (**permalink**) 18/07/2007, 14:06

Hola que tal, en esta ocasión voy a usar mi mensaje numero 1000 para una pregunta que me tiene con un buen de problemas, la duda es la siguiente:

Tengo el siguiente menú con listas

Código:

<ul id="nav">
	<li id="tomar" onMouseOver="tomarID('tomar')" onmouseout="quitarID('tomar')">menu 1
		<ul>
			<li><a href="">submenu 1</a></li>
			<li><a href="">submenu 2</a></li>
		</ul>
	</li>

	<li id="tomar2" onmouseover="tomarID('tomar2')" onmouseout="quitarID('tomar2')">menu 2
		<ul>
			<li><a href="">submenu 1</a></li>
			<li><a href="">submenu 2</a></li>
		</ul>
	</li>

</ul>

el cual uso con CSS y suckerfish, con css ya domine el <li> que se encuentra dentro del <ul> con un hover para cambiar de color cada que paso el mouse sobre la etiqueta principal, pero en IE no funciona, y por eso recurrí al javascript, pero para mi sorpresa, esta linea tampoco funciona en IE: <li id="tomar" onMouseOver="tomarID('tomar')" onmouseout="quitarID('tomar')">, por eso necesito su ayuda, también, este es mi script para que me auxilien

Código:

<script language="javascript" type="text/css">
function tomarID(id)
{

	document.getElementById(id).style.background = "#000000";
	document.getElementById(id).style.color = "#FFFFFF";

}
function quitarID(id)
{
	document.getElementById(id).style.background = "#CCC";
	document.getElementById(id).style.color = "#000";
}
</script>

no se si sea por el encapsulado este:

Código:

<ul id="nav">
<li id="tomar" onMouseOver="tomarID('tomar')" onmouseout="quitarID('tomar')">menu 1

o que cosa, pero no me queda, les agradezco de una vez su ayuda.

derkenuke · #2 (**permalink**) 18/07/2007, 18:34

Hola erick_arcini, felicidades por tu kilo de mensajes aquí

Éste código me ha funcionado a la perfección, tanto en IE6 como en FF2:

Código PHP:

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

<title> Página nueva </title>

<meta name="Author" content="derkeNuke">

<style type="text/css">

</style>

</head>

 
<body>

 
<ul id="nav">

    <li id="tomar" onMouseOver="tomarID('tomar')" onmouseout="quitarID('tomar')">menu 1

        <ul>

            <li><a href="">submenu 1</a></li>

            <li><a href="">submenu 2</a></li>

        </ul>

    </li>

 
    <li id="tomar2" onmouseover="tomarID('tomar2')" onmouseout="quitarID('tomar2')">menu 2

        <ul>

            <li><a href="">submenu 1</a></li>

            <li><a href="">submenu 2</a></li>

        </ul>

    </li>

 
</ul>

 
 
<script type="text/javascript">

 
 
function tomarID(id){

    document.getElementById(id).style.background = "#000000";

    document.getElementById(id).style.color = "#FFFFFF";

}

function quitarID(id){

    document.getElementById(id).style.background = "#CCC";

    document.getElementById(id).style.color = "#000";

}

 
 
</script>

</body>

</html>

Aunque todavía tendríamos una opción para hacer un poco más cómoda la rutina, utilizando this:

Código PHP:

  function tomarID(obj){

    obj.style.background = "#000000";

    obj.style.color = "#FFFFFF";

}

function quitarID(obj){

    obj.style.background = "#CCC";

    obj.style.color = "#000";

}

Y al llamarlo:

Código PHP:

  <li id="tomar" onMouseOver="tomarID(this)" onmouseout="quitarID(this)">

¿No es ésto lo que querías conseguir?

Un saludo.

erick_arcini · #3 (**permalink**) 19/07/2007, 09:04

El código como lo colocaste al principio es como yo lo tengo actualmente, en el caso del segundo cuando usas "this" hace lo mismo. es decir, nada...

si gustas puedes probarlo directo de mi web, revisale el código y es lo mismo que tu estas colocando...

erick_arcini · #4 (**permalink**) 19/07/2007, 10:00

Hola, yo de nuevo, lo he resuelto colocando mejor una etiqueta <a href> para que me sea aceptado en los navegadores, en este caso IE, de todas formas dejo el link para que observen la estructura del menú. ahora si, ya estoy listo para comenzar a finalizar el proyecto, de todas formas muchas gracias por la ayuda derkenuke, me sirvió también para ver el funcionamiento de "this", al igual que rootk, ya te encuentras en mi lista de privilegiados