Foros del Web - Ver Mensaje Individual

emprear · #5 (**permalink**) 18/12/2010, 22:28

Bueno, algo muy básico podria ser esto

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es" >
<head>
<title>XHTML 1.0 transitional</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
 
img#ia{
border: solid 1px #000;
}
 
/*]]>*/
</style>
 
<script type="text/javascript">
//<![CDATA[
 
function cambiar(imagen){
document.getElementById("ia").src = imagen;
}
 
//]]>
</script>
</head>
<body>
<div>
<img id="ia" src="1.jpg" alt="" />
</div>
<p><a href="#" onmouseover="cambiar('2.jpg');">imagen 2</a></p>
<p><a href="#" onmouseover="cambiar('3.jpg');" onmouseout="cambiar('1.jpg');">imagen 3</a></p>
<!-- ©2000 Emprear.com -->
</body>
</html>

Al segundo link le puse un mouseout para quue restituya la imagen original.
si tus imagenes son todas del mismo tamaño, podes definir el width y height en la misma imagen, si no te conviene a la capa que contiene a la imagen fijarle un valor de ancho y alto, de por lo menos el tamaño de la mayor de tus imágenes.

Otra mejora sería hacer una precarga de las imagenes que aún no se cargaron, una forma de hacerlo con css seria, a continuación del <body> incluir
<span class="precarga"><img src="2.jpg" alt="" /><img src="3.jpg" alt="" /></span>
y en el css darle a la clase

Código CSS:

Ver original.precarga{
display: none;
}

Saludos