Desplazamiento interactivo de imágenes con Javascript
Corner Dock es una pequeña utilidad en Javascript que permite desplazarnos de manera interactiva a través de un grupo de imágenes. Por defecto la ubicación de las imágenes es en la esquina superior (por algo el nombre), aunque no he visto si eso se puede configurar.
Como usarlo
Después de descargar el paquete comprimido, referenciamos en nuestra página html, la hoja de estilos y el archivo Javascript.
<script language="JavaScript" src="js/CornerDock.js"></script>
<link rel="stylesheet" href="css/CornerDock.css" type="text/css" />
Luego en un div (id=MiDiv) colocamos una serie de imágenes.
<div id="CornerDockDiv" style="border:1px solid red;">
<!-- Each 'a' tag must have a unique ID and must contain one single 'img' tag -->
<a id="0" href="JavaScript:alert('You clicked icon 1');"><img src="images/Chart.png" alt="" /></a>
<a id="1" href="JavaScript:alert('You clicked icon 2');"><img src="images/Pie Diagram.png" alt="" /></a>
<a id="2" href="JavaScript:alert('You clicked icon 3');"><img src="images/User.png" alt="" /></a>
<a id="3" href="JavaScript:alert('You clicked icon 4');"><img src="images/Chat_01.png" alt="" /></a>
<a id="4" href="JavaScript:alert('You clicked icon 5');"><img src="images/Class.png" alt="" /></a>
<a id="5" href="JavaScript:alert('You clicked icon 6');"><img src="images/Contact.png" alt="" /></a>
<a id="6" href="JavaScript:alert('You clicked icon 7');"><img src="images/Copy.png" alt="" /></a>
<a id="7" href="JavaScript:alert('You clicked icon 8');"><img src="images/House.png" alt="" /></a>
<a id="8" href="JavaScript:alert('You clicked icon 9');"><img src="images/Shopping cart.png" alt="" /></a>
</div>
Creamos un Corner Dock, pasamos como parámetros el id del div que contiene nuestras imágenes, así como la altura y ancho de este.
<script language="JavaScript">
window.CornerDock = new JSCornerDock('CornerDockDiv',300,800);
</script>
El resultado final lo podemos apreciar aquí.
Hola amigo tb hize comentario en otro lugar donde aparece el mismo codigo.
Mira no funciona.
Creo que estoy haciendo algo mal.
Segui probando y cuando solamente pongo 4 imagenes . me funciona pero de las cuatro una de ellas superponer a otra y sola mente muestra 3 .
No se que es ayudame porfavor.
mi correo es alanazabache@hotmail.com
Muy agradecido desde ya … 😉
Puedes probar asegurandote que el atributo ID sea distinto, otra cosa q puedes hacer es probar en diversos navegadores y probar con el tipo de imagen correcto que en este caso en .png
Ok. Amigo mio.
Tu codigo esta muy bueno.
El error aparecia por que en la misma pagina asp en donde lo probe existia mas codigo en javascript.
Uno que hacia referencia a imagenes desplazantes en forma horizontal.
Probe tu codigo y las referencias en una pagina nueva. y todo chevere funciona.
Pero creo que debes de revizar tu codigo encontre el siguiente error, que no se por que sucede.
Haz lo siguiente:
1. Ubica una imagen con tu mouse.
esta imagen tiene dos eventos.
Uno desplazante hacia la izquierda y otro hacia la derecha.
Ahora si haces rapidamente esto dos movimientos a una misma imagen. Las imagenes se superponen. y llega al limite de que desaparecen :D. Pruebalo y veras.
Pero despues de eso esta muy bueno. Felicitaciones.
Amigo mio lo que pasaba era de que el control no controla si es que hago las acciones de ida y de vuelta.
Ejemplo : cuando tu le das click a la imagen y esta se desplaza a la izquierda el control no contempla o no valida que le al estar girando hacia la izquierda accione el giro en sentido contrario , al hacer esto una a una las imagenes se van perdiendo. Me ayudaste mucho pero no era lo que buscaba.
Hola… una pregunta como hago para ke las imagenes salgan de forma horizontal ke parte del .js tengo ke modificar gracias!