Protegendo imagens de serem salvas com CSS


Autor/fonte: Sandro J. S. Souza
E-mail/Url: http://www.sandro.eti.br
Tags: [ imagens ]



Digg del.icio.us

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>

Referência:

Proteger imagens de serem salvas com CSS



Sobre o autor(a): Sandro J. S. Souza
Trabalho com desenvolvimento Web. Visite meu site - http://www.sandro.eti.br
Avatar



Enviado por xKuRt em 26/02/2009 às 12:41


Itens relacionados

Não troque todas as suas imagens por background!
Borda nas imagens usando CSS e HTML

Avaliação

Avaliação desta publicação: 10.00; Total de avaliações: 1


Avaliar:


A avaliação de publicações é restrita a membros cadastrados e logados no nosso site.



Comentários

AvatarEnviado por dddweb em 13/05/2010 às 21:06

É ajuda um pouco, quando se fala em proteger mas tem um esquema que é o seguinte :
Clica em cima da foto e arraste ate a barra de titulo que o navegador abre a foto
ai lascou tudo.

--
Programador da Library Asp

AvatarEnviado por leo4way em 14/04/2010 às 15:13

Na verdade, é possível através do servidor apache utlizando o arquivo .htaccess, estou olhando ainda mas consegui bloquear as imagens para visualização em outro domínio. Mas prejudicou meu site, não tenho muito conhecimento de servidor ainda, então fica difícil.

Esse tipo de bloqueio é bom quando vc quer evitar de que peguem o link da sua imagem e assim aumentar o acesso do site e fazer o servidor cair para você. Pq contratamos por banda de acesso e o copiar link faz isso estourar.

--
www.leonardodesign.com.br

AvatarEnviado por xKuRt em 26/02/2009 às 16:49

Dependendo do projeto que você estiver desenvolvendo, algo do tipo pode ser útil.

Igual eu mencionei no post ("este 'truque' serve para dificultar que as imagens sejam copiadas"), realmente não existe nenhuma proteção 100%, a não ser que você não publique sua imagem em nenhum lugar (seja meio digital ou impresso - já que o impresso você pode scannear). Enfim, isto é apenas uma técnica para ajudar a dificultar a cópia de imagens.

--
Trabalho com desenvolvimento Web. Visite meu site - http://www.sandro.eti.br

AvatarEnviado por trambulhao em 26/02/2009 às 16:43

Ainda não compreendi essa necessidade de proteger as imagens. Sinceramente, acho uma palhaçada..
Bom, sobre a técnica, interessante.

--
Trambulhao

AvatarEnviado por danielosneto em 26/02/2009 às 16:43

Não sei pra que perder tempo com isso, muito fácil de burlar. por enquanto não conheço nenhum jeito de impedir que o usuário pegue a imagem que quiser, na verdade acho que, por enquanto, fazer isso é impossível usando somente com HTML+CSS+Javascript, talvez seja possível com Flash ou um applet java mesmo assim nada que um printscreen não resolva.

--
danielneto.com


Envio de comentário:




  

Terça, 22 de Julho de 2014




Leitura recomendada

Java Dicas & Truques

Top 5 membros

Últimos membros online

Últimos membros cadastrados



Capa do livro
Código Limpo: Habilidades Práticas do Agile Software


Capa do livro
Otimização de Conversão - A Arte e a Ciência de Converter Prospects em Clientes


Capa do livro
Manual de Marketing em Mídias Sociais





Hostnet

IMD