Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS

Moderador: web

 
Mais de 25 postagens
Mais de 25 postagens
Tópico Autor
Mensagens: 49
Nome: Renildo Marcio
Descrição do site: Web Radio Gratis
Localização: goias / goiania / brasil
Contato:

Protegendo imagens de serem salvas com CSS

20-11-2010 14:03

Vou mostrar aqui um "truque" para ajudar a proteger imagens de serem salvas utilizando CSS e dificultar que elas sejam copiadas.
Este "truque" faz com que uma imagem transparente sobreponha a imagem a ser protegida e dificulte a pessoa de salvar uma determinada imagem.
Este "truque" é utilizado, por exemplo, nas galeria de imagens da Globo.com e do UOL e em fotos protegidas por direitos autorais no Flickr.

No HTML faremos assim:


<div id="imagem"> <img src="img_a_ser_protegida.extensao" /> <img src="img_que_ocultara_a_img_protegida.extensao" class="ocultar" /> </div>

Sendo que, a "img_que_ocultara_a_img_protegida.extensao" deverá ser um GIF transparente com dimensões de 1x1 pixels.

E no CSS teriamos:

#imagem { height: 200px; width: 200px; margin: 0 auto; position: relative; } .ocultar { height: 200px; width: 200px; left: 0; position: absolute; top: 0; }

O height e width da classe "ocultar" deve ser o mesmo da imagem a ser protegida.

Exemplo prático:


<html> <head> <title>Proteger imagens de serem salvas com CSS</title> <style type="text/css"> #imagem { height: 200px; width: 300px; margin: 0 auto; position: relative; } .ocultar { height: 200px; width: 300px; left: 0; top: 0; position: absolute; } </style> </head> <body> <div id="imagem"> <img src="minha_imagem.jpg" /> <img src="transparente.gif" class="ocultar" /> </div> </body> </html>

Espero ajudar vocês!
0
Web site:
www.webradiogratis.com

Cadastro:
http://auth.webradiogratis.com/index.php

Comunidade Codigos na Web
http://www.orkut.com.br/Main#Community?cmm=94905489

Acessem a comunidade do codigos na web no orkut...

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado