1. Este site usa cookies. Ao continuar a usar este site está a concordar com o nosso uso de cookies. Saber Mais.

[Pedido - Javascript]Onmouseover

Discussão em 'Web Development' iniciada por Ruanes, 28 de Maio de 2008. (Respostas: 11; Visualizações: 1493)

  1. Ruanes

    Ruanes Power Member

    Oi, estou a ter uns problemas em construir um script


    Queria um script que funciona-se da seguinte maneira:
    Enquando o utilizador passa com o rato por um texto, este texto ir alternando(de um em um segundo) entre a cor cinzento e vermelho
     
  2. Mavors

    Mavors Power Member

    Mostra o que já fizeste para te ajudarmos a construir o resto do código. :)
     
  3. Ruanes

    Ruanes Power Member

    apguei uma parte e provavelmente estarão ai muitos erros pois nao costumo fazer scripts deste tipo
    Código:
     
    function test()
    {
    var clockl=clockl+1000;
    var danger=document.getElementById("danger");
    while (document.getElementById("danger").onmouseover)
    {
    setTimeout("danger.style.color='gray'",clockl);
    setTimeout("danger.style.color='red'",clockl);
    }
    }
    
     
  4. MPalhas

    MPalhas Power Member

    aqui tens. testado e a funcionar:

    Código:
    <script>
    var nextColor="gray";
    function swapColor() {
        danger=document.getElementById("danger");
        danger.style.color=nextColor;
        nextColor= (nextColor=='gray') ? 'red' : 'gray';
        timer= setTimeout(swapColor, 1000);
    }
    
    function stopSwap() {
        clearTimeout(timer)
    }
    </script>
    
    ....
    ....
    ....
    <a id="danger" onMouseOver="swapColor()" onMouseOut="stopSwap()" style="color:red">TESTE</a>
    
     
    Última edição: 28 de Maio de 2008
  5. XpiritO

    XpiritO Power Member

    Espero que ajude :)

    Código:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    <title>myPage Title (TechZone Scripts)</title>
    
    <style type="text/css">
    .texto{
    	font-family: arial, serif, verdana, tahoma;
    	font-size: 8pt;
    	text-color: dark; // cor inicial do texto
    }
    </style>
    
    <script type="text/javascript">
    <!--
    var timerID = 0;
    var tStart  = null; // valor inicial do contador
    var timeOut = 1000; // em milisegundos
    
    function updateTextColor() {
    	coractual = document.getElementById('texto').style.color;
    	if(coractual=='red')
    		//se estiver vermelho, coloca em preto
    		document.getElementById('texto').style.color='black';
    	else
    		//se estiver preto, coloca em vermelho
    		document.getElementById('texto').style.color='red';
    }
    
    function UpdateTimer() {
    	if(timerID) {
    		clearTimeout(timerID);
    		clockID  = 0;
    	}
    	if(!tStart)
    		tStart   = new Date();
    	updateTextColor();
    	timerID = setTimeout("UpdateTimer()", timeOut);
    }
    
    function Start() {
    	tStart = new Date();
    	timerID = setTimeout("UpdateTimer()", timeOut);
    }
    
    function Stop() {
    	if(timerID) {
    		clearTimeout(timerID);
    		timerID  = 0;
       }
       tStart = null;
    }
    
    //-->
    </script>
    
    </head>
    <body>
    
    <p><span id="texto" onmouseover="Start()" onmouseout="Stop()">Texto de demonstração, um mero exemplo da aplicação do script ;)</span></p>
    
    </body>
    </html>
     
    Última edição: 28 de Maio de 2008
  6. Ruanes

    Ruanes Power Member

  7. MPalhas

    MPalhas Power Member

    ei Xpirito que coisa grande! :007:
    fizeste isso tudo agora?
     
  8. XpiritO

    XpiritO Power Member

    Sim :)

    Página XHTML completa (valida no W3C), não só com o Javascript mas também com o stylesheet e exemplo já feito e com o boxing model adequado :P
     
  9. Armadillo

    Armadillo Folding Member

  10. XpiritO

    XpiritO Power Member

    Boas. À vontade.
    Tive só a dar uns retoques nas declarações dos scripts, porque isso estava a provocar a não-validação no W3C XHTML Validator... agora já está tudo OK.

    Abraço.
     
  11. MPalhas

    MPalhas Power Member

    já que vai para o repositório, sugeria só uma alteração, porque pelo que tenho lido o getElementById deve ser usado com moderação porque pesa um bocado

    podias fazer mais ou menos como eu fiz no meu, com uma variável que guarda uma cor, e de cada vez que executa troca o valor pela outra cor
     
  12. Armadillo

    Armadillo Folding Member

    Ja foi adicionado.
    Obrigado
    Cumps
     

Partilhar esta Página