JavaScript

Home	Importante!	História	Tutorial	HTML	Glossário	Faqs	Buscadores	Sinapse
Fóruns	ASCII	Cores	JavaScript	CSS	Links	Novidades	Browsers	Conclusão

T u t o r i a l D H T M L / C S S E d a u r e l i o
2 0 0 1 - 2 0 0 4

JavaScript

IMAGEM PROTEGIDA
Este recurso em JavaScript impede que o internauta copie as imagens do site para o seu HD desabilitando os botões do mouse quando o cursor SÓ ESTIVER posicionado sobre a imagem. Insira a rotina abaixo entre as tags <HEAD> e </HEAD>. Depois altere a mensagem na linha alert("..."); como melhor lhe convir.
Sintaxe:
<SCRIPT language=JavaScript>

</SCRIPT>
Em seguida configure a tag <BODY> com o seguinte parâmetro: <BODY OnLoad="trap()">.

ATENÇÃO: É para inserir esse parâmetro sem deletar o restante do conteúdo de BODY, evidentemente. Então a BODY de seu arquivo ficará parecida com a linha abaixo:
<BODY BACKGROUND="fundo.jpg" BGCOLOR="#FFE4C4" TEXT="#000000" LINK="#003300" VLINK="#003300" ALINK="#003300" OnLoad="trap()">

Pronto, já podemos fazer um teste. Tente copiar qualquer imagem desta página clicando com o mouse sobre ela:

Logicamente este recurso só dificulta um pouco a cópia da imagem pois se o internauta tiver a idéia de salvar a página clicando em [Arquivo], na barra de ferramenta do browser e depois em [Salvar como...], o sistema irá copiar o arquivo.htm inteiro para o seu HD juntamente com a sua linda imagem "protegida". Já um internauta mais expert nem se daria a todo esse trabalho, vejam só: (caso o seu browser seja um Internet Explorer v5.5)
1) Clique com os dois botões fora da imagem, segure e
2) Arraste para dentro da imagem, como quem fosse seleciona-la e depois solte.

Pronto, mais um recurso de proteção burlado! Mas mesmo assim é interessante criar e (principalmente) saber burlar sistemas de proteção.

JANELA RELOCÁVEL
Este script exibe uma janela que o internauta poderá relocá-la para outros cantos da tela porém não apagá-la. Posicione o cursor sobre a barra de título da janela e movimente-a.

Tutorial DHTML/CSS Edaurélio

A mais completa coleção de exemplos aplicados da Web!

Insira o código abaixo entre as tags <HEAD> ... </HEAD>
Sintaxe:
<script>
//  by Erik Arvidsson  
var checkZIndex = true;
var dragobject = null;
var tx;
var ty;
var ie5 = document.all != null && document.getElementsByTagName != null;
function getReal(el) {
temp = el;
while ((temp != null) && (temp.tagName != "BODY")) {
	if ((temp.className == "moveme") || (temp.className == "handle")){
	el = temp;
	return el;
	}
	temp = temp.parentElement;
}
	return el;
}
function moveme_onmousedown() {
	el = getReal(window.event.srcElement)
	if (el.className == "moveme" || el.className == "handle") {
	if (el.className == "handle") {
	tmp = el.getAttribute("handlefor");
	if (tmp == null) {
	dragobject = null;
	return;
	}
	else
	dragobject = eval(tmp);
	}
	else 
	dragobject = el;
	if (checkZIndex) makeOnTop(dragobject);
	ty = window.event.clientY - getTopPos(dragobject);
	tx = window.event.clientX - getLeftPos(dragobject);
	window.event.returnValue = false;
	window.event.cancelBubble = true;
	}
	else {
	dragobject = null;
	}
}

function moveme_onmouseup() {
	if(dragobject) {
	dragobject = null;
	}
}

function moveme_onmousemove() {
	if (dragobject) {
	if (window.event.clientX >= 0 && window.event.clientY >= 0) {
	dragobject.style.left = window.event.clientX - tx;
	dragobject.style.top = window.event.clientY - ty;
	}
	window.event.returnValue = false;
	window.event.cancelBubble = true;
	}
}

function getLeftPos(el) {
	if (ie5) {
	if (el.currentStyle.left == "auto")
	return 0;
	else
	return parseInt(el.currentStyle.left);
	}
	else {
	return el.style.pixelLeft;
	}
}

function getTopPos(el) {
	if (ie5) {
	if (el.currentStyle.top == "auto")
	return 0;
	else
	return parseInt(el.currentStyle.top);
	}
	else {
	return el.style.pixelTop;
	}
}

function makeOnTop(el) {
	var daiz;
	var max = 0;
	var da = document.all;
	for (var i=0; i<da.length; i++) {
	daiz = da[i].style.zIndex;
	if (daiz != "" && daiz > max)
	max = daiz;
	}
	el.style.zIndex = max + 1;
}

if (document.all) { //This only works in IE4 or better
	document.onmousedown = moveme_onmousedown;
	document.onmouseup = moveme_onmouseup;
	document.onmousemove = moveme_onmousemove;
}

document.write("<style>");
document.write(".moveme	{cursor: move;}");
document.write(".handle	{cursor: move;}");
document.write("</style>");
</script>

<style>

</style>
Repare que as últimas linhas do script estão com fonte marrom. Na verdade este trecho não faz parte do script e consiste em propriedades de configuração CSS da janela. Através dela podemos definir cor de fundo (background:#daa520), formato das bordas (border-style:solid), texto centralizado (text-align:center), tamanho da janela (height:50px; width:250px), etc
Agora insira o código a seguir entre as tags <BODY> ... </BODY> exatamente onde você quer que a janela apareça, antes de uma tabela ou depois de uma frase... A janela irá aparecer onde você inserir o código.

Sintaxe:

<DIV id="testDIV">
<DIV class="handle" handlefor="testDiv" id="title">
Tutorial DHTML/CSS Edaurelio</DIV>
<DIV id="inner">
A mais completa coleção de exemplos aplicados da Web!</DIV>
</DIV>

Pronto, sua janela relocável já deve estar funcionando agora. Configure-a conforme melhor lhe convir.

JANELA POPUP CENTRALIZADA
A janela Pop-up conciste numa pequema janela que aparece automaticamente na parte superior do monitor no momento do carregamento de uma página. Se o usuário clicar dentro da janela pop-up, ela se fechará e redirecionará o usuário para uma nova janela de tamanho normal, abrindo o site do anunciante na Web. Se o usuário não clicar no anúncio pop-up, ela se fechará (ou não) automaticamente depois de alguns segundos. O usuário também pode fechar o anúncio clicando no botão [X] no canto superior direito da janela pop-up. O script a seguir irá criar uma janela popup centralizada através do acionamento de um botão.

Esta janela popup abriu um arquivo exemplo chamado flores1.htm (que aparece com uma borboletinha voando), mas você pode inserir textos, tabelas, imagens, ou qualquer informação que justifique a sua utilização.
Insira o código abaixo entre as tags <HEAD> ... </HEAD>

Sintaxe:

<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

Para alterar o tamanho da janela basta mudar os valores de width=200,height=200, para mudar a localização de sua abertura no monitor manipule os valores em (xMax - 200)/2 e (yMax - 100)/2, quanto maior for o denominador da fração maior será o deslocamento da janela para a esquerda em xMax ou para cima em yMax. O resto aconselho não mexer, salvo seja um expert em JavaScript.
Agora insira o código a seguir entre as tags <BODY> ... </BODY> exatamente onde você quer que o botão de chamada da janela apareça. Para alterar a escrita da superfície do botão, basta mexer em value="...". O tamanho do botão se ajusta ao conteúdo escrito nele.

Sintaxe:

<FORM>
<input type=button value="Test popup" onclick="centerWindow()">
</FORM>

Home	Importante!	História	Tutorial	HTML	Glossário	Faqs	Buscadores	Sinapse
Fóruns	ASCII	Cores	JavaScript	CSS	Links	Novidades	Browsers	Conclusão