Publicado em 5 de dez.

Efeito Muito Interessante em Input

Estou precisando de ajuda para implementar a opção de escolha de cores para este script que eu criei.

Fiquem a vontade para comentar e dar suas sugestões:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Trabalhando com Coordenadas</title>

<script language="javascript">

	var DragId = "";
	var OffsetY = 0;
	var OffsetX = 0;
	var MouseX = 0;
	var MouseY = 0;
	var fieldId = new Array();
	var fieldX = new Array();
	var fieldY = new Array();

	if (navigator.appName == "Microsoft Internet Explorer") {
 var Browser = "IE";
	}
	else {
 var Browser = "FF";
	}

	function mouseMoveIE() {
 MouseX = event.clientX;
 MouseY = event.clientY;
 for(a = 0; a < fieldId.length; a++){

 position = MouseY - fieldY[a];
 if(position < 0){

 position -= position * 2;

 }

 if(position > 84){
 position = 84;
 }

 position = (position * 3).toString(16);

 document.getElementById("botao1").value = position;

 document.getElementById(fieldId[a]).style.background = "#" +position+"EEEE";

 }//fim de for
	}

	function mouseMoveFF(event) {
 MouseX = event.clientX;
 MouseY = event.clientY;

 for(a = 0; a < fieldId.length; a++){

 position = MouseY - fieldY[a];
 if(position < 0){

 position -= position * 2;

 }

 if(position > 84){

 position = 84;

 }

 position = (position * 3).toString(16);

 document.getElementById("botao1").value = position;

 document.getElementById(fieldId[a]).style.background = "#" +position+"FF"+position;

 }//fim de for

 window.getSelection().removeAllRanges();

	}

	function startMovementDetection(){
	if (Browser == "IE") {
 document.onmousemove = mouseMoveIE;
	}
	else {
 document.onmousemove = mouseMoveFF;
	}
 }

	function addFieldsId(ids){//utilizar com this.id

 brokenParameter = ids.split(",");

 totalBroked = brokenParameter.length;

 for(i = 0; i < totalBroked; i++){

 fieldId[i] = brokenParameter[i];

 fieldX[i] = findPosX(fieldId[i]);
 fieldY[i] = findPosY(fieldId[i]);

 }//fim de for

	}//end of addFieldsId

	function findPosX(objnome)

{

 var curleft = 0;
 obj = document.getElementById(objnome);
 if (obj.offsetParent) { while (obj.offsetParent) { curleft += obj.offsetLeft; obj = obj.offsetParent; }};
 return curleft;
}

	function findPosY(objnome)

{

 var curtop = 0;
 obj = document.getElementById(objnome);
 if (obj.offsetParent) { while (obj.offsetParent) { curtop += obj.offsetTop; obj = obj.offsetParent; }};
 return curtop;
}

</script>
</head>

<div name="general" id="general" style="height:500px; width:500px;" onmousemove="startMovementDetection();">
Nome: <input type="text" id="teste1" /><br /><br />
E-mail: <input type="text" id="teste2" /><br /><br /><br /><hr />
Pais: <input type="text" id="teste3" /><br />
<input type="text" id="teste4" /><br />
<input type="text" id="teste5" /><br />
<input type="text" id="teste6" /><br />
<input type="text" id="teste7" /><br />
<input type="text" id="teste8" /><br />
<input type="text" id="teste9" /><br />
<input type="text" id="teste10" /><br />
<input type="text" id="teste11" /><br />
<input type="text" id="teste12" /><br />
<input type="text" id="teste13" /><br />
<input type="text" id="teste14" /><br />

<input type="button" id="botao1" />
</div>

</body>
</html>

-----------------------------------------------------------------------------------

Post Mesclado

-----------------------------------------------------------------------------------

Desenvolvi mais uma versao para o Javascript. Agora pode-se setar as cores de acordo com a preferencia.

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Trabalhando com Coordenadas</title>

<script language="javascript">

	var DragId = "";
	var OffsetY = 0;
	var OffsetX = 0;
	var MouseX = 0;
	var MouseY = 0;
	var fieldId = new Array();
	var fieldX = new Array();
	var fieldY = new Array();

	//Especificar a cor aqui em hexadecimal sem o "#" = #RRGGBB
	var colorR = "FF"; //01
	var colorG = "FF"; //93
	var colorB = "99"; //DD

	//Convertendo o codigo hexadecimal em decimal
	colorR = parseInt(colorR, 16);
	colorG = parseInt(colorG, 16);
	colorB = parseInt(colorB, 16);

	//Detectando o browser (obs: Internet Explorer nao e Browser e lixo)
	if (navigator.appName == "Microsoft Internet Explorer") {
 var Browser = "IE";
	}
	else {
 var Browser = "FF";
	}

	//Rotina especialmente para o IE.
	function mouseMoveIE() {
 MouseX = event.clientX;
 MouseY = event.clientY;

 for(a = 0; a < fieldId.length; a++){

 position = MouseY - fieldY[a];
 if(position < 0){

 position -= position * 2;

 }

 positionR = ((position * 2)+colorR);
 if(positionR > 255){ positionR = 255}
 if(positionR < colorR){ positionR = colorR;}
 if(positionR.length < 2 || positionR.length == "undefined"){positionR = "0" + positionR;}

 positionR = positionR.toString(16);
 if(positionR.length < 2){positionR = "0" + positionR;}

 positionG = ((position * 2)+colorG);
 if(positionG > 255){ positionG = 255}
 if(positionG < colorG){ positionG = colorG;}
 if(positionG.length < 2 || positionG.length == "undefined"){positionG = "0" + positionG;}

 positionG = positionG.toString(16);
 if(positionG.length < 2){positionG = "0" + positionG;}

 positionB = ((position * 2)+colorB);
 if(positionB > 255){ positionB = 255}
 if(positionB < colorB){ positionB = colorB}
 if(positionB.length < 2 || positionB.length == "undefined"){positionB = "0" + positionB;}

 positionB = positionB.toString(16);
 if(positionB.length < 2){positionB = "0" + positionB;}

 document.getElementById("botao1").value = positionR;

 document.getElementById(fieldId[a]).style.background = "#" +positionR+positionG+positionB;

 }//fim de for
	}

	//Rotina para o BROWSER FIREFOX
	function mouseMoveFF(event) {
 MouseX = event.clientX; //Pegando a posicao do cursor na div
 MouseY = event.clientY;

 //Criando um loop para tratar cada campo individualmente
 for(a = 0; a < fieldId.length; a++){

 position = MouseY - fieldY[a];

 if(position < 0){

 position -= position * 2;

 }

 //Tratando individualmente cada cor
 positionR = ((position * 2)+colorR);
 if(positionR > 255){ positionR = 255}
 if(positionR < colorR){ positionR = colorR}
 if(positionR.length < 2 || positionR.length == "undefined"){positionR = "0" + positionR;}
 //Convertendo em Hex
 positionR = positionR.toString(16);
 //Certificando a existencia de 2 digitos Hex
 if(positionR.length < 2){positionR = "0" + positionR;}

 positionG = ((position * 2)+colorG);
 if(positionG > 255){ positionG = 255}
 if(positionG < colorG){ positionG = colorG}
 if(positionG.length < 2 || positionG.length == "undefined"){positionG = "0" + positionG;}

 positionG = positionG.toString(16);
 if(positionG.length < 2){positionG = "0" + positionG;}

 positionB = ((position * 2)+colorB);
 if(positionB > 255){ positionB = 255}
 if(positionB < colorB){ positionB = colorB}
 if(positionB.length < 2 || positionB.length == "undefined"){positionB = "0" + positionB;}

 positionB = positionB.toString(16);
 if(positionB.length < 2){positionB = "0" + positionB;}

 //Elemento de teste, retirar.
 document.getElementById("botao1").value = positionR;

 //Aqui você pode setar qualquer estilo CSS aplicavel ao objeto identificado abaixo
 document.getElementById(fieldId[a]).style.background = "#" +positionR+positionG+positionB;

 }//fim de for

 window.getSelection().removeAllRanges();

	}

	function startMovementDetection(){
	if (Browser == "IE") {
 document.onmousemove = mouseMoveIE;
	}
	else {
 document.onmousemove = mouseMoveFF;
	}
 }

	function addFieldsId(ids){//utilizar com this.id

 brokenParameter = ids.split(",");

 totalBroked = brokenParameter.length;

 for(i = 0; i < totalBroked; i++){

 fieldId[i] = brokenParameter[i];

 fieldX[i] = findPosX(fieldId[i]);
 fieldY[i] = findPosY(fieldId[i]);

 }//fim de for

	}//end of addFieldsId

	function findPosX(objnome)

{

 var curleft = 0;
 obj = document.getElementById(objnome);
 if (obj.offsetParent) { while (obj.offsetParent) { curleft += obj.offsetLeft; obj = obj.offsetParent; }};
 return curleft;
}

	function findPosY(objnome)

{

 var curtop = 0;
 obj = document.getElementById(objnome);
 if (obj.offsetParent) { while (obj.offsetParent) { curtop += obj.offsetTop; obj = obj.offsetParent; }};
 return curtop;
}

</script>
</head>

<div name="general" id="general" style="height:500px; width:500px;" onmousemove="startMovementDetection();">
Nome: <input type="text" id="teste1" /><br /><br />
E-mail: <input type="text" id="teste2" /><br /><br /><br /><hr />
Pais: <input type="text" id="teste3" /><br />
<input type="text" id="teste4" /><br />
<input type="text" id="teste5" /><br />
<input type="text" id="teste6" /><br />
<input type="text" id="teste7" /><br />
<input type="text" id="teste8" /><br />
<input type="text" id="teste9" /><br />
<input type="text" id="teste10" /><br />
<input type="text" id="teste11" /><br />
<input type="text" id="teste12" /><br />
<input type="text" id="teste13" /><br />
<input type="text" id="teste14" /><br />

<input type="button" id="botao1" />
</div>

</body>
</html>

Obrigado Pessoal!

Discussão (2)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Carregando comentários...