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;
}
}<!-- 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><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!
Discussão (2)
Carregando comentários...