Efeito Muito Interessante em Input

Fredericomf · Dezembro 5, 2007

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>
<!-- Efeito desenvolvido por Frederico Mottinha de Figueiredo
Versao 1.0 beta.
 -->

<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;
	}
 }

<!-- Acrescentando campos para deteccao -->

	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>

<body onload="java script: addFieldsId('teste1,teste2,teste3,teste4,teste5,teste6,teste7,teste8,teste9,teste10,teste
1,teste12,teste13,teste14,botao1');">

<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>
<!-- Efeito desenvolvido por Frederico Mottinha de Figueiredo
Versao 1.0 beta.
 -->

<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;
	}
 }

<!-- Acrescentando campos para deteccao -->

	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>

<body onload="java script: addFieldsId('teste1,teste2,teste3,teste4,teste5,teste6,teste7,teste8,teste9,teste10,teste
1,teste12,teste13,teste14,botao1');">

<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!

jeovajunior · Janeiro 2, 2008

no meu IE nao deu mto certo nao

ele so apareceu assim:

nome:(caixa)

email:(caixa)

_____________________________________________________

pais:

(caixa)

_

|_|

acima e um mini botao sem nada escrito

http://forum.imasters.com.br/public/style_emoticons/default/natal_sad.gif

wilsonmorgado · Fevereiro 14, 2008

confirma-se, nao funciona!

Entrar

Arquivado

Efeito Muito Interessante em Input

Recommended Posts

Fredericomf 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

jeovajunior 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

wilsonmorgado 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Sistema não funciona corretamente

Fazer busca no Banco de dados usando vários critério

Ler campos com caracteres especiais no xml

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante