Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

alex.ve

Div Flutuante

Por , em Javascript

Recommended Posts

alex.ve    0

alex.ve
Postado

Bom Galera estou precisando montar um scriptzinho e gostaria de saber se alguém ja viu em algum lugar e pode me dar um luz.

 

Eu quero o seguinte, quando eu passar o mouse em um link abra uma DIV FLUTUANTEe me traga os dados basicos da pessoa..

 

Se alguem souber e puder me ajudar, agradeço.

Compartilhar este post

Link para o post
Compartilhar em outros sites

goruks    0

goruks
Postado

isso ai eh no forum de javascript e html

 

você pode usar onmouseover mostra div

Compartilhar este post

Link para o post
Compartilhar em outros sites

Furian    0

Furian
Postado

FUNÇÃO JAVASCRIPT

 

function nome1() {

if (document.getElementById("nome1").style.display=="none") {

document.getElementById("nome1").style.display="block";

}

else {

document.getElementById("nome1").style.display="none";

}

}

function endereco1() {

if (document.getElementById("endereco1").style.display=="none") {

document.getElementById("endereco1").style.display="block";

}

else {

document.getElementById("endereco1").style.display="none";

}

}

function telefone1() {

if (document.getElementById("telefone1").style.display=="none") {

document.getElementById("telefone1").style.display="block";

}

else {

document.getElementById("telefone1").style.display="none";

}

}

 

=================================================

FORMULÁRIO

<HTML>

<HEAD>

<TITLE> FORMULÁRIO </TITLE>

</HEAD>

<BODY>

<DIV align="center">

<DIV ID="form" style="background-color:#FFFFCC;">

<FORM name="dados" METHOD="post" ID="dados">

<a onMouseOver="java script:nome1()" onMouseOut="java script:nome1()"><b>Nome:</b></a>       <input type="text" MAXLENGTH="50" ID="nome"><br>

<a onMouseOver="java script:endereco1()" onMouseOut="java script:endereco1()"><b>Endereço:</b></a> <input type="text" MAXLENGTH="50" ID="endereco"><br>

<a onMouseOver="java script:telefone1()" onMouseOut="java script:telefone1()"><b>Telefone:</b></a> <input type="text" MAXLENGTH="2" ID="ddd" size="1" onKeyUp="java script:proximo()"> 

<input type="text" MAXLENGTH="9" ID="telefone" NAME="telefone"><p></p>

<b>Sexo:</b><br><input type="radio" ID="m" NAME="sexo" VALUE="masculino">Masculino

<input type="radio" ID="f" NAME="sexo" VALUE="feminino">Feminino<p></p>

<input type="button" value="Enviar" onclick="setCookie(), validaform(), novaJanela()">

</FORM>

<HR size="5" color="#0000cc" width="75%">

<DIV ID="nome1" style="display:none">

<IFRAME SRC="nome1.html">

</IFRAME>

</DIV>

<DIV ID="endereco1" style="display:none">

<IFRAME SRC="endereco1.html">

</IFRAME>

</DIV>

<DIV ID="telefone1" style="display:none">

<IFRAME SRC="telefone1.html">

</IFRAME>

</DIV>

</DIV>

</DIV>

</BODY>

</HTML>

 

OBS: Para cada div que você quiser que apareça você deve ter a página correspondente, como acima no exemplo... <IFRAME SRC="telefone1.html">, espero que possa ter ajudado... um grande abraço, fique com Deus... até...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Batman DarkKnight    0

Batman DarkKnight
Postado

Eu tenho a Solução para seu problema mas, terá de confiar em mim!

 

Cria um carniça.js e dentro deste coloque isso (foi retirado de um fonte livre e adaptado):

 

var navegador =

{

ns6: (!document.all && document.getElementById),

ie4: (document.all),

ns4: (document.layers)

};

 

 

janela = {

}

janela.getLimiteSuperior = function ()

{

if (navegador.ie4)

return document.body.scrollTop;

return scrollY;

 

 

 

}

janela.getLimiteEsquerdo = function ()

{

if (navegador.ie4)

return 140; // document.body.scrollLeft;

return scrollX;

}

 

 

janela.getHeight = function ()

{

if (navegador.ns4 || navegador.ns6)

return window.innerHeight;

else if (navegador.ie4)

return document.body.clientHeight;

else

alert ("Navegador não suportado!");

}

janela.getWidth = function () {

if (navegador.ns4 || navegador.ns6)

return window.innerWidth;

else if (navegador.ie4)

return document.body.clientWidth;

else

alert ("Navegador não suportado!");

}

 

 

var navegador =

{

ns6: (!document.all && document.getElementById),

ie4: (document.all),

ns4: (document.layers)

};

 

 

 

function Painel (id)

{

if (!this.getObjeto (id))

{

//alert ("Impossivel selecionar objeto "+id);

return 0;

}

this.defineLocalizacaoAtual ();

this.movePara (140,document.body.clientHeight - 30);//this.X, this.Y);

 

}

Painel.prototype.getObjeto = function (id)

{

if (!(tmp = document.getElementById (id)))

return 0;

this.objeto = tmp;

 

 

this.objeto.style.position = "absolute";

return 1;

}

Painel.prototype.defineLocalizacaoAtual = function ()

{

this.X = (this.objeto.style.left) ? parseInt (this.objeto.style.left) : 0;

this.Y = (this.objeto.style.top) ?parseInt (this.objeto.style.top) : 0;

}

 

 

Painel.prototype.getDistanciaAtualDoTopo = function ()

{

this.defineLocalizacaoAtual ();

return (this.Y - janela.getLimiteSuperior ());

}

Painel.prototype.getDistanciaAtualDaEsquerda = function ()

{

this.defineLocalizacaoAtual ();

return (this.Y - janela.getLimiteEsquerdo ());

}

Painel.prototype.setX = function (x)

{

var old_x = this.X;

this.X = x;

this.objeto.style.left = this.X;

return old_x;

}

Painel.prototype.getX = function ()

{

this.defineLocalizacaoAtual ();

return this.X;

}

Painel.prototype.getXRelativo = function ()

{

return (this.X - janela.getLimiteEsquerdo ());

}

Painel.prototype.setY = function (y)

{

var old_y = this.Y;

this.Y = y;

this.objeto.style.top = this.Y;

return old_y;

}

Painel.prototype.getY = function ()

{

this.defineLocalizacaoAtual ();

return this.Y;

}

Painel.prototype.getYRelativo = function ()

{

return (this.Y - janela.getLimiteSuperior ());

}

 

 

Painel.prototype.getAltura = function ()

{

return parseInt (this.objeto.style.height);

}

 

Painel.prototype.getLargura = function ()

{

return parseInt (this.objeto.style.width);

}

 

 

Painel.prototype.movePara = function (x, y)

{

this.setX (140);

this.setY (y);

}

Painel.prototype.move = function (ac_x, ac_y)

{

this.defineLocalizacaoAtual ();

this.movePara (this.X + ac_x, this.Y + ac_y);

}

Painel.prototype.flutuar = function (nomeObjeto, distanciaDaEsquerda, distanciaDoTopo, intervaloParaAlinhar)

{

this.distanciaDaEsquerda = distanciaDaEsquerda;

this.distanciaDoTopo = document.body.clientHeight - 60;//distanciaDoTopo;

this.intervaloParaAlinhar = intervaloParaAlinhar;

 

this.nomeObjeto = nomeObjeto;

 

d = new Date ();

this.ultimaInteracao = d.getTime ();

 

 

window.setInterval ("Painel_flutuante ("+this.nomeObjeto+")", 1);

}

Painel.prototype.iniciaAnimacao = function ()

{

this.defineLocalizacaoAtual ();

 

d = new Date ();

 

if ( this.getXRelativo () <= this.distanciaDaEsquerda + 1 &&

this.getXRelativo () >= this.distanciaDaEsquerda - 1 &&

this.getYRelativo () <= this.distanciaDoTopo + 1 &&

this.getYRelativo () >= this.distanciaDoTopo - 1 )

{

this.ultimaInteracao = d.getTime ();

return 0;

}

 

if (d.getTime () - this.ultimaInteracao < this.intervaloParaAlinhar)

{

return 0;

}

return 1;

}

Painel.prototype.alinhar = function ()

{

d = new Date ();

 

 

zX = this.distanciaDaEsquerda - this.getXRelativo ();

zY = this.distanciaDoTopo - this.getYRelativo ();

 

 

regX = parseInt (Math.abs (((zX - this.getXRelativo ()) / (janela.getWidth () / 3))));

regY = parseInt (Math.abs (((zY - this.getYRelativo ()) / (janela.getHeight () / 3))));

 

 

 

moveX = (zX > 1) ? ((zX % 10000) + 1) : ((zX < 1) ? ((zX % 10000) - 1) : 0);

moveY = (zY > 1) ? ((zY % 10000) + 1) : ((zY < 1) ? ((zY % 10000) - 1) : 0);

 

//moveX *= (regX > 1) ? regX + 1: 1;

//moveY *= (regY > 1) ? regY + 1: 1;

 

this.move (moveX, moveY);

}

Painel.prototype.esconde = function ()

{

this.objeto.style.visibility = "hidden"

}

Painel.prototype.mostra = function ()

{

this.objeto.style.visibility = "visible"

}

function Painel_flutuante (obj)

{

if (obj.iniciaAnimacao ())

obj.alinhar ();

}

 

 

dentro da carniça.aspx coloque:

 

<script language="javascript" src="../carniça-v1.0.js"></script>

 

e ainda :

 

<script language="JavaScript">

 

var painel = new Painel ("lala");

 

</script>

 

se tiver um carniça.ascx dentro da carniça.aspx faça assim:

dentro da carniça.ascx crie uma DIV e de o nome de "lala"

se for direto no carniça.aspx

crie uma DIV e de o nome de "lala"

 

 

e era só por enquanto... voltaremos diretamente da liga da justiça...

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito