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"></script>
-
$(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:
-
<a href="documento.pdf">Archivo PDF</a>
-
<a href="documento.zip">Archivo ZIP</a>
-
<a href="documento.doc">Archivo DOC</a>
-
<a href="http://google.com">Enlace externo</a>
-
<a href="http://undominio.com">Enlace externo</a>
-
<a href="http://blogandweb.com">blogandweb</a>
-
<a href="#enlaces">Enlace local </a>
Mayo 11th, 2008 at 7:19
Hola,
yo hace tiempo cree un plugin también en jquery, que hace eso mismo, incluso si la página tiene un favicon, si lo queremos podemos configurarlo para que nos lo muestre, te dejo la dirección por si lo quieres probar
http://www.noth.es/2007/11/24/actualizacion-del-jquery-link-version-03/
Un saludo
Mayo 11th, 2008 at 11:35
Hola Noth!
Muchas grácias por el aporte, así los lectores que escojan el código que más les guste.
El tema del favicon me ha parecido muy interesante.
Ciertamente estoy con un página de un cliente en la que hemos puesto el código de los enlaces pero en CSS, así que tendré que cambiarlo ya que hay mucha gente que aun tira con el IE6...
PD. me he suscrito a tus RSS
Un saludo!