Olá pessoal, hoje eu vou falar com vocês uma jogada com imagem e HTML em uma página web. Se você navega na Internet pelo computador e pelo celular você sabe que é bem fácil pegar uma imagem de um site com apenas o clique direito do mouse, clica e arrasta ou clica e segura.
Devido a essa certa insegurança com imagens, existem várias maneiras de evitar esse tipo de download de imagem, mas as pessoas sempre arrumam um jeito para pegar.
- Existe o script que evita o clique direito do mouse
- Existe o script em javascript que evita selecionar algum objeto da tela
- E existem muitos outros scripts
Mas o que vou falar com você aqui agora é de uma sobreposição de imagem, uma das coisas que pode ser usado para evitar a cópia ou arrastar e botão direito por exemplo.
Eu tenho no HTML um div onde pode ser usado um style com uma imagem em background. Depois disso você pode colocar a tag img com uma imagem transparente do mesmo tamanho da imagem original que está dentro do div.
Vamos ver no código?
Código 1.1 - Sobrepor a imagem
<div style="background-image: url(imagem-principal.png);">
<img src="imagem-transparente.png" style="border:0px; width:600px; height:887px;" />
</div>
Pronto, o código 1.1 mostra na primeira linha o style com a imagem em background. Essa é a imagem principal e dentro do div existe a imagem transparente do mesmo tamanho da imagem principal.
Assim a imagem transparente fica por cima da imagem principal e com isso quando o usuário for copiar, clicar com o botão direito ou salvar a imagem, o que ele vai salvar é a imagem transparente ao invés da imagem principal.
Bom, espero ter ajudado e qualquer dúvida por entrar em contato pela rede social ou pelo meu site.
Instagram: @mauriciojunior_net
Site: www.mauriciojunior.net
