Hola! necesito ayuda para poder terminar una página en cuadrícula que muestra una serie de fotos pequeñas, que al pasar el ratón por encima, hace un efecto zoom. Hasta ahí todo bien. Se puede ver en: http://www.articoarquitectos.cl/desarrollo3/index3.html
Es una página HTML que está vinculada a un JS (zoom.js), el que le da el efecto.
PERO LO QUE QUIERO es que al hacer el mouseover, muestre OTRA IMAGEN, sin que se pierda el efecto. Es decir, quiero el efecto zoom, pero con 2 imagenes, una pequeña y la otra que se muestre al hacer el zoom.
Les envío el codigo del zoom.js y el html de cada foto.
ZOOM.JS:
function setZoom(img, dir, width, height, margin, zIndex, delay) {
setTimeout(function() {
if (img.dir==dir) {
img.style.width=width;
img.style.height=height;
img.style.margin=margin;
img.style.zIndex=zIndex;
img.parentNode.parentNode.style.zIndex=zIndex;
}
}, delay);
}
function larger(img, width, height) {
img.dir='rtl';
now=parseInt(img.style.zIndex);
for (i=now+1; i<=10; i++) {
w=(width*(10+i))/20+'px';
h=(height*(10+i))/20+'px';
m=(-i)+'px 0 0 '+(-width*i/40)+'px';
setZoom(img, 'rtl', w, h, m, i, 20*(i-now));
}
}
function smaller(img, width, height) {
img.dir='ltr';
now=parseInt(img.style.zIndex);
for (i=now-1; i>=0; i--) {
w=(width*(10+i))/20+'px';
h=(height*(10+i))/20+'px';
m=(-i)+'px 0 0 '+(-width*i/40)+'px';
setZoom(img, 'ltr', w, h, m, i, 20*(now-i));
}
}
HTML:
<div class="preview" style="width:80px;height:80px;float:left">
<a href="/screenshots/195cc6ab3b7738bbe85a5feb6d8dad57/"><img class="preview" style="width:80px;height:60px;z-index:0"
src="img/prueba.jpg" title="" onmouseover="larger(this,160,120)" onmouseout="smaller(this,160,120)" /></a>
<div class="caption" style="padding-top:60px"></div>
</div>
OJALÁ ALGUIEN PUEDA AYUDARME CON ESTA PARTE QUE ME FALTA!!!!!
GRACIAS DESDE CHILE!!!
