Buen día.
Tengo un problemita con una imagen que quiero mover.
Resulta que tengo lo siguiente:
Código HTML:
<div id="zoom">
<div id="opcioneszoom">
<a href="javascript:;" onclick="zoom_boletin(+1)">[Ampliar]</a>
</div>
<div id="zoomimagen">
<div id="zoomimagenoculto">
<img id="img_zoomimagen" width="300" src="img.jpg" onclick="mover_imagen()">
</div>
</div>
</div> Cuando hago click en Aumentar le incremento el ancho a la imagen.
Cuando le doy varias veces llega un momento en que parte de la imagen desaparece (lo cual es correcto según lo que estoy haciendo) y en ese caso lo que quiero es que al hacer click sobre la imagen, esta se mueva (es decir, como si tuviera la imagen dentro de un scroll, y lo que haría sería mover el scroll a la derecha para ver la parte oculta)
Hice esta función para probar:
Código PHP:
function mover_imagen () {
objeto("zoomimagen").style.scrollLeft=objeto("zoomimagen").style.scrollLeft+10;
}
Y los estilos que aplico son los siguientes:
Código HTML:
#zoomimagen
{
position:relative;
margin:0 auto;
width:500px;
overflow:hidden;
}
#zoomimagenoculto
{
width:500px;
overflow: visible;
}
Es decir, tengo un DIV de tamaño fijo que contiene a otro DIV de tamaño variable y dentro el IMG que aumenta de tamaño y que NO se mueve.
Quiero hacer algo así:
<- [DIV] ->
Cuando se presiona la flecha izquierda se visualiza la parte que esta oculta y se oculta la parte visible y viceversa con la otra flecha. Sólo que en lugar de usar flechas, que se haga con un click sobre la imagen.
A ver si me entendieron porque creo que no explique bien.