Muchas veces necesitamos mostrar iconos al lado de los enlaces, ayuda al lector además de que ayudan a expresar el significado del enlace si sabemos utilizarlo correctamente. Pero, ¿y si estos enlaces fueran “inteligentes” y dependiendo del contenido del enlace, pasaran a mostrar un icono distinto automáticamente? Mucho más inteligentes que si tienen el poder de ocultarse y mostrarse o mostrando al lado un icono de fondo.
Esto es lo que vamos a crear con CSS, de forma sencilla. Por ejemplo, podemos usar estos iconos:

	Enlace a ventana emergente
	Enlace a sitios externos
	Indica un enlace “mailto:”
	Enlace a archivos pdf
	Enlaces a archivos Word
	Enlaces a archivos Excel

Ahora explicaremos como funciona, después veremos varios ejemplos paso a paso:

¿Cómo funciona?

Como vemos en la imagen, la magia está en el código CSS. Se trata de Escoger la etiqueta <a> y buscar dentro del enlace lo que existe al final, en este caso, como el enlace termina en .PDF (archivo .PDF) le damos este estilo (un icono al lado, aunque puede ser lo que nosotros queramos).

Ejemplo 1 – Enlace a archivo PDF

Código HTML

Enlazamos al archivo PDF mediante un enlace:

<a href="files/holidays.pdf">View Holidays</a>

Y obtendremos algo parecido a esto:

Código CSS

a[href $='.pdf'] {

padding-right: 18px;

background: transparent url(icon_pdf.gif) no-repeat center right;

}

Al aplicar el estilo nos tendrá que quedar algo parecido a esto:

Listo, ya tenemos nuestro primer enlace inteligente.

Ejemplo 2 – Enlace hacia un correo

Para enlazar hacia un correo y que automáticamente CSS defina al lado del enlace el icono de un correo, debemos de seguir estos pasos:

Código HTML

<a href="mailto:billg@microsoft.com">Contact Me</a>

Código CSS

a[href ^="mailto:"] {

padding-right: 20px;

background: transparent url(icon_mail.gif) no-repeat center right;

}

Fijaos en los signos “^=”, esto quiere decir “empieza con”, es decir, se aplicará este estilo a todos los enlaces que empiezen por: “mailto:”.

Aquí se puede ver el resultado final:

Ejemplo 3 – Enlace a ventanas emergentes

Código HTML

Aquí usaremos la clase “popup” (ver guía sobre las clases) o el atributo “rel”:

<a class="popup" href="help.html">Help Page</a>

Código CSS

Aplicamos el nombre de la clase al código CSS:

a[class ="popup"] {

padding-right: 18px;

background: transparent url(icon_popup.gif) no-repeat center right;

}

Esta regla funcionará para todos los enlaces que tengan la clase =”popup”.

Aquí podemos ver el resultado final:

Encontrando un valor entre muchos

Observad esta clase en el código HTML:

Código HTML

<a class="popup specialstyle" href="help.html">View Help</a>

Se encuentran valores separados, ¿verdad?. Ahora debemos utilizar otra regla para identificar este enlace. Fijaos en el siguiente código CSS:

Código CSS

a[class ~="popup"] {

padding-right: 18px;

background: transparent url(icon_popup.gif) no-repeat center right;

}

Con estos signos “~=”, si existen múltiples valores en una clase, se buscará el que esté definido entre el código CSS descrito anteriormente. Si se encuentra, aparecerá al lado del enlace el icono que hayamos definido (en el ejemplo es un icono, pero puede ser, por ejemplo, que la fuente del enlace se convierta en negrita).

Más ejemplos

En Iconize podremos ver más ejemplos con varios tipos de enlaces: Ver más ejemplos sobre los enlaces inteligentes.

Problemas con IE 6

Para variar, en IE 6 este hack no funciona, por lo tanto deberemos hacer uso de JQuery. Añade esto en tu documento (modifica según los tipos de enlaces que hayas puesto, puede que no sean los mismos que los del ejemplo):

$(document).ready(function(){
         $("a[@href$=pdf]").addClass("pdf");
         $("a[@href$=zip]").addClass("zip");
         $("a[@href$=psd]").addClass("psd");
});

Ejemplo de su funcionamiento

Podemos descargar todos los ejemplos aquí:

Si te ha gustado la entrada, apoya comentándola, por favor.

Muchas gracias por habernos leído.

Vía | ACG

Compartir/Guardar