Cambiar imagen dinamicamente al hacer click en un texto

Edubur · #1 (**permalink**) 27/09/2010, 04:05

Buenas,

llevo buscando un buen rato y no lo veo por ningun lado...

La idea que tengo es tener un listado a la izquierda de nombres, y a la derecha una imagen que cambie al hacer click en cada nombre... No se si se puede hacer con HTML o habra que hacerlo con javascript.. ando pelin perdido.

Si me ayudaseis os lo agradeceria!!

Un saludo

Sarandong · #2 (**permalink**) 27/09/2010, 04:58

Prueba con el css puede funcionar en el caso que comentas

Edubur · #3 (**permalink**) 27/09/2010, 05:33

mmmm he estado mirando y creo que se puede hacer con javascript. Si lo consigo pego el codigo por si lo necesita alguien mas

emprear · #4 (**permalink**) 27/09/2010, 05:36

Edubur:
Con javaScript y css podés hacerlo de la siguiente manera

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
<head>
<title>Imagen aleatoria</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="x" />
<meta name="keywords" content="x" />
<meta http-equiv="Content-Language" content="ES-ar" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="copyright" content="&copy; 2006, Guillermo Gianello" xml:lang="es" />
<meta name="author" content="http://emprear.com"  xml:lang="es" />
<style type="text/css">
/*<![CDATA[*/
 
div#izquierda{
position:relative;
float: left;
margin-right: 30px;
}
div#derecha{
position:relative;
float: left;
}
 
img#ia{
border: solid 1px #000;
}
 
/*]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
 
function cambiar2(img){
document.getElementById("ia").src = img;
}
//]]>
</script>
</head>
<body>
<div id="izquierda">
<p><a href="#" onclick="cambiar2('1.jpg');">Cambiar imagen 1</a></p>
<p><a href="#" onclick="cambiar2('2.jpg');">Cambiar imagen 2</a></p>
<p><a href="#" onclick="cambiar2('3.jpg');">Cambiar imagen 3</a></p>
</div>
<div id="derecha"><img id="ia" alt="Imagen aleatoria" src="5.jpg" width="300" height="300" /></div>
<!-- ©2000 Emprear.com -->
</body>
</html>

Observaciones, lo ideal sería que tus imágenes tengan todas el mismo tamaño (si no es asi, no deberías fijar el height y el width en la imagen original) y la imágen que cargas por defecto puede ser una imagen en blanco o un gif transparente. Para mejorar aún el intercambio, si las imágenes no són demasiadas puedes agregar esta script con lo cual las imágenes que aún no han aparecido se carguen igualmente al cargar la página

Código Javascript:

Ver original<script type="text/javascript"> 
//<![CDATA[
function preCargar() { 
if (!document.images) return; 
var ar = new Array(); 
var arguments = preload.arguments; 
for (var i = 0; i < arguments.length; i++) { 
ar[i] = new Image(); 
ar[i].src = arguments[i]; 
} 
} 
//]]>
</script>

y en el body

<body onload="preCargar('1.jpg', '2.jpg', '3.jpg')">

Saludos

jomaruro · #5 (**permalink**) 29/09/2010, 05:30

Hola:

Échale un vistazo a este ejemplo de Mikmoro hecho totalmente con CSS. Si posicionas el cursor en el texto verás que cambia el color de la línea del título y la imagen de la derecha.

Saludos.