English Português

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!.

Escrito por Francisco Oliveros

Soy un gran aficionado del diseño y de todo lo que el código puede comunicar. Ingeniero mecánico por profesión, pero dedicado al desarrollo web a tiempo completo.

Blog / Twitter

Artículos relacionados

Sigue leyendo consejos, tips y tutoriales para tu blog.

    Comentarios

    1. Claudio / Hace 10 años /

      Hola:
      ¿Es posible aplicar a un blog estos codigos?
      y de que manera se pueden copiar sin ver el codigo fuente de la pagina??
      Gracias
      y saludos

      Responder a Claudio →
    2. nasa / Hace 10 años /

      dfdfdfdf

      Responder a nasa →
    3. nasa / Hace 10 años /

      dfdf

      Responder a nasa →
    4. nasa / Hace 10 años /

      solo quiero ver algo

      Responder a nasa →

    Responder

    ¡Gracias por dejar tu opinión! Por favor procura que tus comentarios estén dentro tema, que no sean promocionales (spam), ilegales u ofensivos, de otro modo, serán borrados. Todos los enlaces serán moderados y la URL indicada NO será enlazada.

    Blog and Web es un blog de Blógstica. Hospedado desde 2008 en Liquid Web.

    Términos de uso - Política de privacidad