JMiur [E]

Muchas veces vi el símbolo pegado un enlace, indicando que este es externo y siempre pensé que era una buena manera de diferenciar diferentes vínculos pero siempre me pareció que era demasiado trabajo. En algún momento, me puse a inspeccionar el código y descubrí "rarezas" que no pude comprender.

Hoy, en BlogMundi encontré la respuesta y es bastantes simple ... una vez que se sabe.

Se trata de utilizar selectores de atributo y CSS3, que, aunque aún no es una especificación aprobada, es soportada por los navegadores más modernos: Firefox, Safari e Internet Explorer 7. El resto, simplemente la ignora,

Para que en todos los enlaces externos se agregue la imagen de fondo con ese iconito (o cualquier otro), hay que agregar algo de código en la parte de estilo de la plantilla.

Con esto, indicamos que todos los enlaces con el texto http tengan las siguientes propiedades:
a[href^="http"] {
background:url(URLimagen) no-repeat right top;
padding-right: 10px;
}
Y para evitar que se resalten los vínculos internos:
a[href^="http://www.URLsitio.com"], a[href^="http://URLsitio.com/"] {
background-image: none;
padding-right: 0;
}
Aunque imagino que es posible utilizar esta nuevas características para detectar tipos de archivos, es algo que, por ahora, excede mis conocimientos. Si alguien lo sabe, soy todo oídos

3 comentarios:

EFI  

Hola

Me encantó. Ya lo he incluído en la plantilla de mi blog, aunque tuve algunos "contratiempos":

1» Dibuja los vínculos internos, como bien comentas.
2» Dibuja los vínculos gráficos, ej: las fotos que subo a Blogger y de sitios como Technorati, etc

La solucion a los 2 puntos es la que mencionas en tu entrada. Pero como Blogger tiene varios sitios donde guarda las imágenes, ej bp1.blogger.com, bp2.etc, entonces se me ocurrió simplificar con esto:

a[href $='.jpg'], a[href $='.png'], a[href $='.gif'] {
background-image: none;
padding-right: 0;
}

que lo que hace es dibujar el icono de los distintos formatos. O al menos debería. Pero sólo funciona con los jpg... no sé por qué.

Ese código lo adapté de este otro:

a[href $='.pdf'] {
background: transparent url(URL_icono) no-repeat top right;
padding-right: 10px;}

el cual permite usar el icono URL_icono en aquellos vínculos a pdf. Y que es lo que te preguntabas en la entrada.

Copié esta información de http://www.hunlock.com/blogs/Attach_icons_to_anything_with_CSS

Saludos.

Responder
EFI  

a[href $='.jpg'], a[href $='.png'], a[href $='.gif'] {
background-image: none;
padding-right: 0;
}

Quise decir q NO dibuja etc

Responder
JMiur  

Muy buena información, ya guardé la pagina a la que hacés referencia y trataré de investigar el asunto, me has dado una punta por donde empezar, cosa que hasta ahora no tenía.

Lo de las imágenes parece un problema porque tu solución es lógica y debería funcionar para todos o para ninguno, eso de que sólo lo haga con jog es un poco desconcertante.

Prometo ver el asunto porque parece algo muy interesante y abre muchas otras posibilidades.

Un saludo y, otra vez muchas gracias.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR