Foros del Web - Ver Mensaje Individual - Cambiar imagen dinamicamente al hacer click en un texto

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