O algo mas simple que se me ocurre:
Imagen pequeña:
Código HTML:
<img class="imagenPequeña" src="http://www.google.com.mx/intl/en_com/images/srpr/logo1w.png" onclick="zoom('visible', this.src)"> Un div oculto que contiene la imagen grande:
Código HTML:
<div id="zoom"><a class="cerrar" href="javascript: zoom('hidden', '')">Cerrar</a><img id="imagenGrande" src=''"></div> Estilos:
Código HTML:
<style type="text/css">
#zoom {
visibility: hiddenm;
position: absolute;
top: 20%;
left: 35%;
width: 200px;
height: 300px;
}
.cerrar {
position: absolute;
top:0px;
right: 0px;
}
.imagenPequeña {
width: 120px;
}
#imagenGrande {
position: relative;
top: 50px;
}
</style> Y una funcion que muestre el div, y la imagen con zoom:
Código HTML:
<script language="javascript">
function zoom(visibilidad, imagen) {
document.getElementById('zoom').style.visibility = visibilidad;
document.getElementById('imagenGrande').src = imagen;
}
</script> Puedes probar el codigo en
http://htmledit.squarefree.com/ solo copialo y pegalo. Es cuestion de que adaptes todo a tus necesidades