styleimg.jpg

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.

Ver Demo - 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.

PLAIN TEXT
JavaScript:
<script type="text/javascript" src="imagelink/imagelink.js"></script>

Tambien agregaremos un poco de CSS para los estilos.

PLAIN TEXT
CSS:
<style>/* Estilos Usados en los ejemplos */

.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

s0.jpg

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.

PLAIN TEXT
HTML:
<p><a href="http://xyberneticos.com"><img src="image.jpg" alt="image" /></a></p>

Llamar a clases y diversos estilos

s1.jpg

Comenzamos a utilizar diversos estilos, por lo tanto llamamos a una clase class= "Nombre"

PLAIN TEXT
HTML:
<p><a href="http://enlace.com"><img class="image2" src="image.jpg" alt="image" /></a></p>

s2.jpg

PLAIN TEXT
HTML:
<p><a href="http://enlace.com"><img class="image3" src="image.jpg" alt="image" /></a></p>

s3.jpg

PLAIN TEXT
HTML:
<p><a href="http://enlace.com"><img class="image4" src="image.jpg" alt="image" /></a></p>

s4.jpg

PLAIN TEXT
HTML:
<p><a href="http://enlace.com"><img class="image5" src="image.jpg" alt="image" /></a></p>

Si vas a cambiar los nombres en los estilos, debes recordar también cambiar los nombres en el archivo javascript.