Problema con onMouseOver

Citar

Escrito el 30 Dic 2013 07:20 am

Hola amigos de la comunidad soy nuevo en lo de programacion web estoy tratando de hacer un efecto que consiste que al pasar el puntero del mouse sobre una imagen que es un enlace y que esta dentro de un div esta afecte a todo el div cambiandole de color de fondo de dicho div la cual esta originalmente sin color de fondo ya he investigado pero no logro encontrar una solucion al problema, para que me entiendan mejor aca les dejo el codigo que estoy usando, gracias.

<!DOCTYPE html>
<html>
<head>
<title>onMouseOver</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<script>
function pintar(col)
{
col.getElementById('caja').style.backgroundColor="rgba(38,158,38,0.4)";
}

function despintar(col)
{
col.getElementById('caja').style.backgroundColor="transparent";
}
</script>
<div id="caja"><a href="#"><img src="mar.jpg" onMouseOver="pintar(this)" onMouseOut="despintar(this)"></a>
</div>

</body>
</html>

Por jarvi22

22 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 30 Dic 2013 12:09 pm

El parámetro "col" es el elemento donde se provoca el evento. Ese elemento es de tipo element, el tipo element no tiene el método getElementById(), document tiene ese método.

Código Javascript :

function pintar(col)
{
 document.getElementById('caja').style.backgroundColor="rgba(38,158,38,0.4)";
}

function despintar(col)
{
 document.getElementById('caja').style.backgroundColor="transparent";
}

Por DriverOp

Claber

2510 de clabLevel

Envíale un mensaje privado Web

Citar

Escrito el 30 Dic 2013 09:08 pm

Hola amigo gracias pero ya puse el codigo que me dijistes y no me resulta que otro codigo podria poner?

Por jarvi22

22 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 31 Dic 2013 12:11 pm

¿Crees que esto es un menú del cual puedes elegir la solución que más te apetezca?...

Explica por qué dices que no te resultó. Solo decirlo sin una explicación de lo que hiciste, cómo y dónde, no te sirve a ti ni a mi, ni a nadie que lea esto.

Del código que he posteado solamente cambié "col" por "document", eso es todo lo que hice y por supuesto, a mi me resultó perfectamente.

Por DriverOp

Claber

2510 de clabLevel

Envíale un mensaje privado Web

Citar

Escrito el 03 Ene 2014 11:17 pm

Hola mira yo puse este codigo y no me resulto.

function pintar(col)
{
col.getElementById('caja').style.backgroundColor="rgba(38,158,38,0.4)";
}

function despintar(col)
{
col.getElementById('caja').style.backgroundColor="transparent";
}
</script>
<div id="caja"><a href="#" onMouseOver="pintar(this)" onMouseOut="despintar(this)"><img src="mar.jpg"></a>
</div>

Por jarvi22

22 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 04 Ene 2014 12:34 am

jarvi22 resulta que con el código que tienes, esta es agregando estilo al enlace mas no al div donde esta dicho enlace.

agrega los eventos al div mas no al enlace igual resulta que cuando pases el mause por encima de la imagen este va a cambiar el div de color.

<div id="caja" onMouseOver="pintar(this)" onMouseOut="despintar(this)"><a href="#"><img src="mar.jpg"></a> </div>

Por js_toni