Codeworks :: Artigos

"Quanto mais brilhante você é, tão mais você tem a aprender. " – Don Herold

08/06/2010

Proteger imagens de serem salvas com CSS

Ao som de U2 – Pride ( In the Name of Love )

Você pode estar se perguntando o por que de utilizar técnicas desse tipo para proteger imagens de serem salvas no browser, digo-lhe que os motivos são vários e um deles é o copyright(imagens com direitos reservados), que muitas vezes os usuários não respeitam.

Essa técnica é utilizada pelo Flickr, não é 100% segura mas pode lhe evitar um pouco de dor de cabeça. Vamos a explicação da técnica: Iremos utilizar uma imagem transparente de 1px de largura e altura que ficará por cima da imagem real, com isso, quando o usuário tentar salvar a imagem, provavelmente irá clicar com o botão direito do mouse encima dela e escolherá a opção “Salvar imagem como”, e é aí que ele irá somente conseguir salvar a imagem transparente. A Marcação HTML utilizada no exemplo é a seguinte:

1.<div id="box">
2. <img src="imagem_real_aqui" alt="" title="" />
3. <img src="spaceball.gif" class="img_oculta" alt="" title="" />
4.</div>

Utilizamos a classe img_oculta que é a imagem transparente que ficará por cima da imagem real, utilizando técnica de position:relative e position:absolute:

1.#box {height:343px; margin:0 auto; position:relative; width:500px}
2..img_oculta {height:343px; left:0; position:absolute; top:0; width:50;

Simples, agora a imagem transparente sobrepõe a imagem real, “impedindo de ser salva”, vejam aqui nesse exemplo criado .

Fonte: http://www.cssnolanche.com.br/proteger-imagens-de-serem-salvas-com-css/

Nenhum Comentário »

Nenhum comentário ainda.

RSS feed for comments on this post. TrackBack URI

Leave a comment