Dar estilo a los links de diferentes tipos es muy sencillo con CSS3, pues permite recoger la extensión de cualquier archivo con una instrucción y darle estilos directamente. Por ejemplo:
a[href $='.pdf'] {
padding-right: 20px;
background: url(icono-pdf.gif) no-repeat right;
}Desafortunadamente estos selectores no son soportados por IE6 (raro ¿verdad?) pero en Web Designer Wall nos dan una solución para hacerlo por medio de la librería jQuery.
- Descargamos la librería y hacemos el llamado entre las etiquetas <head> y </head>.
<script type="text/javascript" src="jquery.js"></script> - Enseguida después del llamado, agregamos la función que hará que se le otorgue una clase a cada tipo de link y otro que abrirá los enlaces externos en una nueva ventana.
<script type="text/javascript">
$(document).ready(function(){
//Definición de clases para cada tipo de archivo.
$("a[@href$=pdf]").addClass("pdf");
$("a[@href$=zip]").addClass("zip");
$("a[@href$=doc]").addClass("doc");
//Estilos y atributos a los enlaces externos.
$("a:not([@href*=http://blogandweb.com])").not("[href^=#]")
.addClass("externo")
.attr({ target: "_blank" });
});
</script> - Ahora solo falta definir los estilo para cada tipo de archivo. Por ejemplo, agregándole un icono al inicio que lo identifique:
.pdf {
padding-left: 20px;
background: transparent url(icono-pdf.png) left top no-repeat;
}
.zip {
padding-left: 20px;
background: transparent url(icono-zip.png) left top no-repeat;
}
.doc {
padding-left: 20px;
background: transparent url(icono-doc.png) left top no-repeat;
}
.externo {
padding-left: 20px;
background: transparent url(icono-ext.png) left top no-repeat;
}Estos estilos los definimos dentro de la hoja de estilos (style.css) o dentro de la sección css.
- Ahora cada vez que usemos un enlace con alguna de las extensiones definidas tendrán los atributos de la clase que le corresponde. Por ejemplo:
<div id="enlaces">
<p><a href="documento.pdf">Archivo PDF</a></p>
<p><a href="documento.zip">Archivo ZIP</a></p>
<p><a href="documento.doc">Archivo DOC</a></p>
<p><a href="http://btemplates.com">BTemplates - enlace externo</a></p>
<p><a href="http://serturista.com">Ser Turista - enlace externo</a></p>
<p><a href="http://blogandweb.com/2008/05/06/dar-estilo-a-los-links-de-diferentes-tipos-con-jquery/">Regrasar al tutorial - enlace local</a></p>
<p><a href="#enlaces">Enlace local #</a></p>
</div>
No hay comentarios:
Publicar un comentario