Etiquetar con una pequeña imagen los link a distintos formatos de archivos
Marzo 7th, 2007 | Publicado por Francisco en CSS, Javascript | 4 Comentarios
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:
- 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> - 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!.
Foros del Blog
BTemplates
Web a 2.0
Ser Turista
Blog Ingeniería
Blógstica
Octubre 6th, 2007 a las 6:31 pm (#)
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
Enero 13th, 2008 a las 12:06 pm (#)
dfdfdfdf
Enero 13th, 2008 a las 12:06 pm (#)
dfdf
Enero 13th, 2008 a las 12:07 pm (#)
solo quiero ver algo