Blog and Web

Etiquetar con una pequeña imagen los link a distintos formatos de archivos

Muchas veces cuando tenemos archivos para descargar en nuestra web, quisieramos 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();
    }
    </script>
  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 imagenes creadas por BlogyWeb (BW) para definir el formato de tus archivos:




Ojala que les sirva!.