Alternativa a Iconize
Mayo 10th, 2008Hace un tiempo publiqué un post sobre Iconize.
Es un código con CSS que sirve para poner un icono automáticamente a tus enlaces hacia archivos. Por ejemplo que al linkar a un pdf el link de este aparezca un icono de pdf y asi con cualquier fichero.
Al parecer este código no servia para IE6 (menuda novedad).
Así pues, a través de Blogandweb he encontrado una solución hecha en jQuery que sí funciona en IE6.
Lo primero. Bajar la librería jQuery y enlazarla dentro de las etiquetas <head></head>
<script src="jquery.js" type="text/javascript"></script>En el mismo después de incluir la librería jQuery incluimos el las siguientes funciones:
La primera función añade un estilo al enlace para cada tipo de extensión (PDF, ZIP, DOC).
La segunda función añade el atributo target=”_blank” a todos los enlaces externos de nuestro site para que se ejecuten en una nueva ventana. (Muy útil).
<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" });
});
Código para los estilos en CSS para cada extensión:
.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;
}
Ahora cada vez que pongamos en nuesta web enlaces a archivos como estos, automáticamente nos aparecerán los iconos de archivo en los 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://google.com">Enlace externo</a></p> <p><a href="http://undominio.com">Enlace externo</a></p> <p><a href="http://blogandweb.com">blogandweb</a></p> <p><a href="#enlaces">Enlace local #</a></p>
