Botão para executar ação

[mateusb]

Olá pessoal!

Conheço um pouquinho(pouquinho mesmo) de HTML, mas não sei como executar um gadget HTML/Javascript ao clique de um botão. Por exemplo: O usuário está no meu site, e eu coloquei um efeito de neve caindo nele. (código)

<script type="text/javascript">
endereco = "http://img42.imageshack.us/img42/5508/neve1.png";
</script>
<script type="text/javascript" src="http://acessoriosparablogs.com.br/scripts/neve.js"></script>

mas como esse efeito pode atrapalhar a leitura, gostaria de colocar algum botão para desativar o efeito. É possível?

Desde Já agradeço, Mateus Bandeira.

Edited July 5, 2012 at 06:10 PM by mateusb

[HappyHippyHippo]

Possível, deverá ser.

No entanto, para saber como, seria necessário saber o código de javascript de criação/ativação do efeito para se poder reverter o processo. E como link fornecido está em baixo, é impossível determinar como o fazer.

PS : já consegui aceder ao script .. vou analizar

PSS : parece que o script tem duas funções usadas para iniciar e terminar o processo, logo poderás ter algo do género

<script type="html/javascript">
 // variavel que dita se o script está "ligado" ou "desligado"
 var show_state = true;

 // função que altera o estado da neve
 function toogleShow() {
   // se estiver ligado
   if (show_state) {
     // chamar a função do script para "esconder" a neve
     hidesnow();
     // marcar o script como desligado
     show_state = false;
   }
   else {
     // chamar a função do script para apresentar a neve
     snowIE_NS6();
     // marcar o script como ligado
     show_state = true;
   }
 }
</script>
<input type="button" onclick="toogleShow();" value="Ligar/Desligar"/>

Nota : isto não foi testado, mas será algo muito parecido com isto

Edited July 5, 2012 at 08:25 PM by HappyHippyHippo

[mateusb]

enão, eu coloquei esse código nos htmls do blog, mas nada aconteceu. O próprio botão, apareceu, mas nada acontecia quando clicava. Lembrando que não sei nada de javascript e só um pouquinho de html. pode explicar melhor como eu faço pra funcionar?

[HappyHippyHippo]

será então complicado explicar, porque o código que apresentei era um exemplo ...

consegues disponibilizar um URL para se poder ver o que está a acontecer ?

[mateusb]

se é muito complicado para fazer, pode deixar, não faço questão desse código :-). Obrigado pela atenção.

[HappyHippyHippo]

não é complicado fazer, é complicado explicar a uma pessoa com poucos conhecimentos.

vou testar isso no meu servidor e já te digo algo

PS : alterei o script e está a funcionar

// JavaScript Document

var snowsrc=window.parent.endereco
//how many snowflakes there will be (currently 12)
var no =40;
//is the show showing
var snowshowing = false;
//The height the snow will reach before it disappears ("windowheight" or "pageheight")
var snowdistance = "pageheight";
///////////////////////////////End of Settings///////////////////////////////////
var ie4up = (document.all) ? 1 : 0;
var ns6up = (document.getElementById&&!document.all) ? 1 : 0;

function iecompattest()
{
 return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

var dx, xp, yp;
var am, stx, sty;
var i, doc_width = 800, doc_height = 600;

if (ns6up)
{
 doc_width = self.innerWidth;
 doc_height = self.innerHeight;
}
else
if (ie4up)
{
 doc_width = document.body.clientWidth;
 doc_height = document.body.clientHeight;
}

dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();

for (i = 0; i < no; ++ i)
{
 dx[i] = 0;
 xp[i] = Math.random()*(doc_width-50);
 yp[i] = Math.random()*doc_height;
 am[i] = Math.random()*20;
 stx[i] = 0.02 + Math.random()/10;
 sty[i] = 0.7 + Math.random();
 if (ie4up||ns6up)
 {
     if (i == 0)
     {
       document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: hidden; TOP: 15px; LEFT: 15px;\"><a href=\"http://rftactical.darkbb.com/index.htm\"><img src='"+snowsrc+"' border=\"0\"><\/a><\/div>");
     }
     else
     {
       document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: hidden; TOP: 15px; LEFT: 15px;\"><img src='"+snowsrc+"' border=\"0\"><\/div>");
     }
 }
}

function snowIE_NS6()
{
 doc_width = ns6up?window.innerWidth-10 : iecompattest().clientWidth-10;
 doc_height=(window.innerHeight && snowdistance=="windowheight")? window.innerHeight : (ie4up && snowdistance=="windowheight")?  iecompattest().clientHeight : (ie4up && !window.opera && snowdistance=="pageheight")? iecompattest().scrollHeight : iecompattest().offsetHeight;
 for (i = 0; i < no; ++ i)
 {
     yp[i] += sty[i];
     if (yp[i] > doc_height-50)
     {
       xp[i] = Math.random()*(doc_width-am[i]-30);
       yp[i] = 0;
       stx[i] = 0.02 + Math.random()/10;
       sty[i] = 0.7 + Math.random();
     }
     dx[i] += stx[i];
     document.getElementById("dot"+i).style.top=yp[i]+"px";
     document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+"px";
 }
 snowtimer=setTimeout("snowIE_NS6()", 10);
}

function showSnow()
{
 for (i=0; i<no; i++)
   document.getElementById("dot"+i).style.visibility="visible";
 snowshowing = true;

 if (ie4up||ns6up)
   snowIE_NS6();
}

function hideSnow()
{
 if (window.snowtimer)
   clearTimeout(snowtimer)

 for (i=0; i<no; i++)
   document.getElementById("dot"+i).style.visibility="hidden";
 snowshowing = false;
}

function toogleSnow()
{
 if (snowshowing)
   hideSnow();
 else
   showSnow();
}

//document.write('<p style="text-align:center"><a href="http://www.dicasparablogs.com.br/2009/12/colocar-efeito-neve-no-blog.html" target="_blank">Efeito Neve<br />Dicas para Blogs</a></p>')

o seguinte código é o HTML que usei para testar o script

<!DOCTYPE html>
<html>
 <head>
   <script type="text/javascript">
   // IMPORTANTE : endereço da imagem a ser apresentada como floco de neve
   endereco = "neve3.png";
   </script>
   <script type="text/javascript" src="neve.js"></script>
   <style>
     html, body {
       height: 100%;
     }
     .wrapper {
       height: 100%;
       background-color: #000;
     }
   </style>
 </head>
 <body>
   <div class="wrapper">
     <input type="button" onclick="toogleSnow();" value="Ligar/Desligar"/>
   </div>
 </body>
</html>

Nota : como podes ver no código, tenho o neve.js e a imagem na raiz do site e o script começa desligado

Edited July 6, 2012 at 07:47 PM by HappyHippyHippo

[mateusb]

olá amigo! Consegui um jeito de fazer o que eu quero.(foi na sorte mesmo) Eu coloquei hidesnow() no onclick do botão, e a neve desaparece, assim está ótimo!

<input type="button" onclick="hidesnow()" value="Desligar"/>

[HappyHippyHippo]

olá amigo! Consegui um jeito de fazer o que eu quero.(foi na sorte mesmo) Eu coloquei hidesnow() no onclick do botão, e a neve desaparece, assim está ótimo!

<input type="button" onclick="hidesnow()" value="Desligar"/>

desliga mas não liga 😄 , não faz o toogle

[mateusb]

Muito obrigado mesmoo! funcionou! Vou colocar seu crédito na página do blog.