Agrega Estilos a tus imagenes con enlaces
Image Link es un script que permite aplicar un estilo adicional a los enlaces de nuestras imagenes. Este script nos permitirá no solo agregar bordes en estado activo sino llegar un poco más lejos que eso agregando imágenes superpuestas. Image Link nos permite crear diversos estilos y hacer uso de cada uno de ellos llamando a una clase especifica, o evitar hacer usos de las clases y dejar que el script automáticamente resalta los enlaces de nuestras imágenes de forma default utilizando siempre un único estilo.
Descarga Image Link
USO
Descargamos el script Image Link. Descomprimimos cada uno de los archivos y los alojaremos en nuestro servidor, posteriormente realizaremos la llamada al script, introduciendo en nuestro encabezado, dentro de las etiquetas < head > …..< /head > el siguiente código.
JavaScript:
Tambien agregaremos un poco de CSS para los estilos:
CSS:
.imageOver{
background:url(zoom.gif) no-repeat 50% 50%;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
.imageOver2{
background:#fff;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
.imageOut2{
background:url(frame.gif) no-repeat 0 0;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
.imageOver3{
background:url(frame.gif) no-repeat 0 0;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
.imageOver4{
background:url(pattern.gif) repeat;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
.imageOver5{
background:url(button.gif) no-repeat 50% 50%;
}
</style>
Implementándolos:
La lupa es el estilo por default, no necesitaemos aplicar ninguna clase y el script automáticamente en estado over o al posar el mouse sobre la imagen, nos mostrara la lupa que indicara seguir un enlace. Entonces para este ejemplo agregaremos nuestras imágenes de forma tradicional y sin llamar a una clase.
HTML:
Llamar a clases y diversos estilos
Comenzamos a utilizar diversos estilos, por lo tanto llamamos a una clase class= “Nombre”:
HTML:
Si vas a cambiar los nombres en los estilos, debes recordar también cambiar los nombres en el archivo javascript.
Espero les haya sido util, nos vemos
Joel
