Inicio Desarrollo Web Desplazamiento interactivo de imágenes con Javascript

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í.

Programador y Desarrollador Web. Administrador de RibosoMatic y Proyecto Yupy. Blogger y entusiasta de la tecnología, internet, software y tutoriales para desarrollo de aplicaciones para la web ....