Muchas veces cuando tenemos archivos para descargar en nuestra web, quisiéramos mostrarle al usuario de antemano el tipo de archivo del que se trata. Con Javascript y CSS podemos hacer este efecto de la manera siguiente:

  1. Usaremos la siguiente función Javascript que podemos poner entre la etiquetas <head> y </head> o dentro de un archivo externo .js. La función que usaremos es la siguiente:
    function tipos_de_archivo() {
    var tipo_de_archivo;
    if (document.getElementsByTagName('a')) {
        for (var i = 0;
            (tipo_de_archivo = document.getElementsByTagName('a')[i]); i++) {
            if (tipo_de_archivo.href.indexOf('.pdf') != -1) {
                tipo_de_archivo.className = 'archivo_pdf';
            }
            if (tipo_de_archivo.href.indexOf('.css') != -1) {
                tipo_de_archivo.className = 'archivo_css';
            }
            if (tipo_de_archivo.href.indexOf('.zip') != -1) {
                tipo_de_archivo.className = 'archivo_zip';
            }
            if (tipo_de_archivo.href.indexOf('.rar') != -1) {
                tipo_de_archivo.className = 'archivo_rar';
            }
        }
    }
}
window.onload = function() {
    tipos_de_archivo();
}
  2. Con este script reconocemos el tipo de archivo (pdf, css, zip y rar) y le otorgamos una clase (archivo_pdf, archivo_css, etc.) y es en las clases donde le pondremos la imagen del tipo de archivo. La clases son las siguientes:
    .archivo_pdf {
  padding-right: 20px;
  background: url(formato_pdf.gif) no-repeat right;
}
.archivo_css {
  padding-right: 20px;
  background: url(formato_pdf.gif) no-repeat right;
}
.archivo_zip {
  padding-right: 20px;
  background: url(formato_pdf.gif) no-repeat right;
}
.archivo_rar {
  padding-right: 20px;
  background: url(formato_pdf.gif) no-repeat right;
}

Con este script y las clases aparecerá la imagen que al final de link del archivo. Puedes usar las siguientes imágenes creadas por BlogandWeb (BW) para definir el formato de tus archivos: