cambiar estilo de texto al hacer rollover en imagen.

markshock · #1 (**permalink**) 21/10/2008, 02:29

Hola amigos,

veréis tengo una imagen, y debajo de esta imagen tengo un texto lincado.

Tanto la imagen como el texto tienen un link al mismo contenido y quería hacer que el usuario cuando ponga el ratón encima de la imagen cambie el estilo del enlace de abajo... vamos como si al hacer rollover encima de la imagen estuviera ligado a la propiedad HOVER del link inferior.

Alguien sabe como podría hacer esto?

Un saludo y gracias!!!

JavierB · #2 (**permalink**) 21/10/2008, 09:13

Hola markshock

Prueba este código:

Código javascript:

Ver original<html>
<head>
<style type="text/css">
.dentro, #enlace:hover {color:green} 
</style>
</head>
<body>
<img src="imagen1.jpg" onmouseover="document.getElementById('enlace').className='dentro'" onmouseout="document.getElementById('enlace').className=''" />
<a href="#" id="enlace">Enlace</a>
</body>
</html>

Saludos,

markshock · #3 (**permalink**) 22/10/2008, 01:50

Cita:

Iniciado por JavierB

Hola markshock

Prueba este código:

Código javascript:

Ver original<html>
<head>
<style type="text/css">
.dentro, #enlace:hover {color:green} 
</style>
</head>
<body>
<img src="imagen1.jpg" onmouseover="document.getElementById('enlace').className='dentro'" onmouseout="document.getElementById('enlace').className=''" />
<a href="#" id="enlace">Enlace</a>
</body>
</html>

Saludos,

Pues ahora mismo lo pruebo JavierB!! grandeeee!!! ;)

markshock · #4 (**permalink**) 27/10/2008, 08:58

Hola JavierB,

El código me ha funcionado perfectamente al utilizarlo en el color de un texto, pero ahora necesito una variante.

Y es hacer el rollover en la imagen y que el color de fondo de una capa cambie...

lo he probado, pero no se por que, cuando pongo un color de fondo.. no me funciona...

el código es el siguiente:

Código:

<html>
<head>
<style type="text/css">
 #enlace {background:red} 
.dentro, #enlace:hover {background:green} 
</style>
</head>
<body>
<img src="imagen1.jpg" onmouseover="document.getElementById('enlace').className='dentro'" onmouseout="document.getElementById('enlace').className=''" />
<a href="#" id="enlace">Enlace</a>
</body>
</html>

Si hago esto, no se por que, no me va... no me hace el cambio de color a verde...

markshock · #5 (**permalink**) 27/10/2008, 09:25

Un ejemplo mas claro...

Esto... me funciona... me cambia el background a verde:

Código HTML:

<html>
<head>
<style type="text/css">
.dentro, #enlace:hover {background:green} 
</style>
</head>
<body>
<div>
	<div style="width:399px; margin-bottom:10px;"><img src="camiseta01-detalle.jpg" onmouseover="document.getElementById('enlace').className='dentro'" onmouseout="document.getElementById('enlace').className=''" /></div>
	<div style="height:28px; width:399px;" id="enlace">
		<div style="float:left; wdith:150px; padding-top:3px;"><a href="#">Enlace</a></div>
		<div style="float:right; width:30px; padding-top:3px;">33€</div>
	</div>
</div>
</body>
</html>

Pero este otro, no me cambia el background:

Código HTML:

<html>
<head>
<style type="text/css">
.dentro, #enlace:hover {background:green} 
</style>
</head>
<body>
<div>
	<div style="width:399px; margin-bottom:10px;"><img src="camiseta01-detalle.jpg" onmouseover="document.getElementById('enlace').className='dentro'" onmouseout="document.getElementById('enlace').className=''" /></div>
	<div style="height:28px; width:399px; background:#f0f0f0;" id="enlace">
		<div style="float:left; wdith:150px; padding-top:3px;"><a href="#">Enlace</a></div>
		<div style="float:right; width:30px; padding-top:3px;">33€</div>
	</div>
</div>
</body>
</html>

La única diferencia es esta: background:#f0f0f0;

alguna idea?

markshock · #6 (**permalink**) 27/10/2008, 09:34

Al final lo he solucionado usando jQuery... pero si alguien se ve con fuerzas de arreglar la opción que planteo javierB estaría estupendo...

Mi solución:

Código HTML:

<html>
<head>
<script language="javascript" type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript">
$(document).ready(function () {
$("#img").mouseover(function () { 
      //alert("OK");
      $("#enlace").css("background","red");
});
$("#img").mouseout(function () { 
      //alert("OK");
      $("#enlace").css("background","#f0f0f0");
});
});
</script>
</head>
<body>
<div>
	<div style="width:399px; margin-bottom:10px;" id="img"><img src="camiseta01-detalle.jpg"/></div>
	<div style="height:28px; width:399px; background:#f0f0f0;" id="enlace">
		<div style="float:left; wdith:150px; padding-top:3px;"><a href="#">Enlace</a></div>
		<div style="float:right; width:30px; padding-top:3px;">33€</div>
	</div>
</div>
</body>
</html>