Imagem voando pela tela

[Luciana Laurentino 0]

Neste site tem uma dica chamada "Imagem voando pela tela".

Este é o código:

 

<script language="JavaScript1.2">

var imagem="Coloque o nome do arquivo de imagem aqui"

if (document.layers)

{document.write("<LAYER NAME='animacao' LEFT=10 TOP=10><img src='"+imagem+"' ></LAYER>")}

else if (document.all){document.write("<div id='animacao' style='position:absolute;top:10px;left:10px;width:17px;height:22px;z-index:50'><img src='"+imagem+"'></div>")}

 

conta=-1;

move=1;

function curva(){

abc=new Array(0,1,1,1,2,3,4,0,6,-1,-1,-1,-2,-3,-4,0,-6)

for (i=0; i < abc.length; i++)

{var C=Math.round(Math.random()*)}

iniciar=abc[C];

setTimeout('curva()',1900);

return iniciar;

}

ypos=10;

xpos=10;

movimento = 60;

function moveR(){

caminho=movimento+=iniciar;

y = 4*Math.sin(caminho*Math.PI/180);

x = 6*Math.cos(caminho*Math.PI/180);

if (document.layers){

ypos+=y;

xpos+=x;

document.animacao.top=ypos+window.pageYOffset;

document.animacao.left=xpos+window.pageXOffset;

}

else if (document.all){

ypos+=y;

xpos+=x;

document.all.animacao.style.top=ypos+document.body.scrollTop;

document.all.animacao.style.left=xpos+document.body.scrollLeft;

}

T=setTimeout('moveR()',50);

}

function edges(){

if (document.layers){

if (document.animacao.left >= window.innerWidth-40+window.pageXOffset)movimento=Math.round(Math.random()*45+157.5);

if (document.animacao.top >= window.innerHeight-30+window.pageYOffset)movimento=Math.round(Math.random()*45-112.5);

if (document.animacao.top <= 2+window.pageYOffset) movimento = Math.round(Math.random()*45+67.5);//OK!

if (document.animacao.left <= 2+window.pageXOffset) movimento = Math.round(Math.random()*45-22.5);//OK!

}

else if (document.all)

{

if (document.all.animacao.style.pixelLeft >= document.body.offsetWidth-45+document.body.scrollLeft)movimento=Math.round(Math.random()*45+157.5);

if (document.all.animacao.style.pixelTop >= document.body.offsetHeight-35+document.body.scrollTop)movimento=Math.round(Math.random()*45-112.5);

if (document.all.animacao.style.pixelTop <= 2+document.body.scrollTop) movimento = Math.round(Math.random()*45+67.5);//OK!

if (document.all.animacao.style.pixelLeft <= 2+document.body.scrollLeft) movimento = Math.round(Math.random()*45-22.5);//OK!

}

setTimeout('edges()',100);

}

function efeito(){

curva();

moveR();// onUnload="opener.gO()"

edges();

}

if (document.all||document.layers)

efeito()

</script>

 

Tenho duas dúvidas:

 

1. Como faz para que a imagem não saia da tela, ou seja, quando a imagem vai para a direita e para parte inferior, ela sái da tela fazendo com que as barras de rolagens apareçam.

 

2. Alguém sabe como associa um link à essa imagem?

 

Obrigada.

[Fleury 3]

Da forma como está não dá pra coloca link... teria que modificar algumas coisas.

Ali na primeira parte:

var imagem="Coloque o nome do arquivo de imagem aqui";var link="Coloque o endereço da imagem aqui";var target="Fale onde a imagem irá abrir aqui... Recomendado: _self";if (document.layers){document.write("<LAYER NAME='animacao' LEFT=10 TOP=10><a href="+link+" target="+target+"><img src='"+imagem+"' ></a></LAYER>")}else if (document.all){document.write("<div id='animacao' style='position:absolute;top:10px;left:10px;width:17px;height:22px;z-index:50'><a href="+link+" target="+target+"><img src='"+imagem+"'></a></div>")}

[Luciana Laurentino 0]

Fleury,

 

Muito obrigada pela resposta. O link funcionou, mas em volta da figura apareceu uma borda. Tem como tirar? É porque eu uso uma imagem sem fundo e se não der pra tirar vou ter que fazer uma imagem quadrada com fundo para poder acompanhar essa borda.

Eu segui o seu raciocício e criei uma variável, mas não tirou a borda:

 

var borda= "0"if (document.layers){document.write("<LAYER NAME='animacao' LEFT=10 TOP=10><a href="+link+" target="+target+"><img src='"+imagem+"' border='"+borda+"'></a></LAYER>")}else if (document.all){document.write("<div id='animacao' style='position:absolute;top:10px;left:10px;width:17px;height:22px;z-index:50'><a href="+link+" target="+target+"><img src='"+imagem+"'></a></div>")}

E você sabe como delimitar o espaço onde essa figura vai "voar", sem que ela saia da tela?

[Fleury 3]

Você pensou correto, acontece que tem dois document.write ali.

Um deles para a serie Netscape e outra para o IE. Você alterou só do Netscape. =)

 

Corrigido:

var borda= "0"if (document.layers){document.write("<LAYER NAME='animacao' LEFT=10 TOP=10><a href="+link+" target="+target+"><img src='"+imagem+"' border='"+borda+"'></a></LAYER>")}else if (document.all){document.write("<div id='animacao' style='position:absolute;top:10px;left:10px;width:17px;height:22px;z-index:50'><a href="+link+" target="+target+"><img src='"+imagem+"' border='"+borda+"'></a></div>")}

[Luciana Laurentino 0]

Fleury,

 

Muito obrigada mesmo por sua ajuda. Agora está sem nenhuma borda.

 

Alguém sabe como resolver a minha segunda dúvida? Como delimitar o espaço na tela por onde a imagem vai "voar"?