Scripts y código de ejemplo : HTML y CSS : Imágenes y colores :

Protección de una imagen mediante CSS

Descripción | Ver ejemplo | Ver código fuente | Imprimir script

Presentamos una forma muy simple de dificultar la copia de las imágenes de una página web. Colocando una imagen transparente delante de la imagen a proteger (usando una capa posicionada de forma absoluta), cuando el usuario pulse el botón derecho sobre la imagen y escoja la opción "Guardar como...", sólo podrá guardar la imagen transparente. La imagen transparente es muy pequeña (de 1 pixel por 1 pixel), y habrá que adaptar su tamaño (atributos width y height) y posición (left y top) al tamaño de la imagen a proteger.

Aunque parece una solución perfecta presenta varios inconvenientes:

• La capa con la imagen transparente se ubica de forma absoluta, lo que dificulta la protección de imágenes en tablas, cuya posición final depende de la resolución de la pantalla, el navegador... Una solución podría ser agrandar la imagen transparente para que ocupe toda la página (no es muy elegante, pero funcionaría).
• No tendrá efecto con navegadores enteriores a la generación 4.x (navegadores que no soportan la etiqueta span).

Finalmente, recordar que estas protecciones son poco robustas, ya que la imagen descargada estará disponible en la caché del navegador del usuario. Sí resulta útil para dificultar la copia o impedirla a usuarios inexpertos.

Scripts relacionados

JavaScript : Seguridad :
Proteger las imágenes de un documento: Evita que las imágenes de una página se puedan guardar pulsando el botón derecho del ratón que permite la opción de guardar como.

JavaScript : Seguridad :
Proteger las imágenes de un documento (mejorado): Evita que las imágenes de una página se puedan guardar pulsando el botón derecho del ratón (con la opción de guardar como), pero permite sin embargo abrir un enlace en ventana nueva con el botón derecho.

¿Necesitas ayuda con este script?

Usa el foro Preguntas acerca de los scripts para plantear y resolver dudas sobre este script. Y si ves que el ejemplo no funciona, indícanoslo en el foro Reporte de errores en los scripts, e intentaremos corregirlo.