La mate por un Yogur.net

Imágenes asociadas a determinados enlaces

Navegando por los foros de PHP-Hispano, me encuentro con una interesa explicación sobre vincular imágenes a determinados tipos de enlaces. Muchas veces había visto como determinados enlaces a archivos pdf llevaban una imagen explicativa asociada, también los enlaces internos pueden ser destacados u otros tipos de archivos, las posibilidades son infinitas. Según comentan Mozilla y Opera no tienen ningún tipo de problema al interpretar este código, por otra parte el seudo navegador Internet Explorer no hace ni caso, para variar.

El siguiente código añadiría las propiedades descritas a todo aquel enlace que comience por http:// dentro del atributo href. Deberemos cambiar la ruta de la imagen por la que nosotros vayamos a utilizar.

a[href^="http://"] {
padding-right: 11px;
background: url(imagen.gif) no-repeat;
background-position: right !important;
}

La personalización puede ir más allá y con el uso del atributo rel podremos asociar propiedades diferentes a los distintos tipos de archivo o lo que se nos ocurra. He aquí unos ejemplos:

a[rel="pdf"] {
padding-right: 11px;
background: url(imagen.gif) no-repeat;
background-position: right !important;
}

a[rel="zip"] {
padding-right: 11px;
background: url(imagen.gif) no-repeat;
background-position: right !important;
}

También deberemos cambiar la ruta indicando las diferentes imágenes que vayamos a usar.