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

Rollover com texto

Discussão em 'Web Development' iniciada por migjac, 12 de Junho de 2008. (Respostas: 16; Visualizações: 1187)

  1. migjac

    migjac Power Member

    Boa tarde,

    É possivel fazer rollover de texto no dreamweaver?
    A ideia é ter um titulo que ao ser clicado apareça um texto.
    No fundo é um titulo que oculte texto e só fique disponivel quando o utiliza o solicite.
    Tenho que criar duas imagens ou é possivel fazer de outra forma mais simples?

    Cumprimentos
     
  2. migjac

    migjac Power Member

    Alguma ideia??
     
  3. silvino

    silvino Power Member

    Olá, não percebi bem o que pretendes, podes te explicar melhor ?
     
  4. Kayvlim

    Kayvlim Undefined Moderator
    Staff Member

    Se percebi bem, não podes pôr o texto numa div invisível (style="display: none") e quando clicas em alguma coisa, no evento onClick ele activa por javascript a div (document.getElementById("id_da_div").style.display = "none", acho eu)?
     
  5. migjac

    migjac Power Member

    Olá
    Vou tentar explicar melhor. A minha ideia é ter um titulo e quando se clicar nesse titulo/frase poder aparecer por baixo um texto que está oculto.

    Do tipo:

    Legislação sobre xxxxxx

    Ao clicar naquela frase vai aparecer algo do genero:

    Legislação sobre xxxxxx
    A legislação blá blá blá...................................blá blá

    É só isto. Fazendo rollover com uma imagem das duas frases é possivel mas não me parece que fique bem.
    Será que existe uma solução mais fácil de implementar? Alguem conhece?

    Obrigado
     
  6. Kayvlim

    Kayvlim Undefined Moderator
    Staff Member

    No fundo é o que eu disse no post anterior, mas em vez de ser no onClick, é no onMouseOver.
    É algo assim:

    Código:
    <html>
    <body>
    <span onmouseover="document.getElementById('hidden1').style.display='block'" 
          onmouseout="document.getElementById('hidden1').style.display='none'">Legislação sobre xxx</span>
    <div id="hidden1" style="display:none" 
         onmouseover="this.style.display='block'" 
         onmouseout="this.style.display='none'">A legislação blá blá blá</div>
    </body>
    </html>
    
    Partindo daqui, talvez consigas facilmente o que queres. (dica: para muitos controlos, faz só uma função)
     
  7. migjac

    migjac Power Member

    Muito obrigado pela ajuda.

    Não queria abusar mas sabem se isso dá para fazer directamente no dreamweaver sem ser priciso ir ai código?
     
  8. migjac

    migjac Power Member

    Ninguem faz ideia como se pode fazer isso no dreamweaver?
     
  9. svr

    svr Power Member

    As dicas que te deram parecem-me bem, e funcionam certamente.
    Quanto ao Dreamweaver sim é possivel, utilizas o modo de codigo e escreves o script.
    Se o Dreamweaver fizesse tudo não era preciso homem atras da maquina, mas o Dreamweaver faz muito pouco...
     
  10. migjac

    migjac Power Member

    Olá
    As dicas que me deram foram muito uteis.
    Não querendo abusar podiam-me esclarecer se eu quiser que o texto só apareça após um clique com o rato na frase e só desapareça se voltar a clicar sobre a mesma frase como posso fazer?

    Muito obrigado pela ajuda
     
  11. Kayvlim

    Kayvlim Undefined Moderator
    Staff Member

    Isto?
    Código:
    <span onclick="document.getElementById('hidden2').style.display = 
                   (document.getElementById('hidden2').style.display=='block')
                   ? 'none'
                   : 'block'">Teste</span>
    <div id="hidden2" style="display: none;">coiso</div>
    
     
  12. hostmake

    hostmake Power Member

    Podes criar uma função javascript, verificas o value do display da div, e atribuis o oposto, e chamas a função javascript no onclick



    Edit: ou acrescentares tudo lá na div, como te foi explicado no post anterior.
     
  13. Kayvlim

    Kayvlim Undefined Moderator
    Staff Member

    Por acaso eu sou a favor de se fazer o que o hostmake disse :)
    Para exemplificar mostro o essencial. Mas se quiseres fazer isso várias vezes na mesma página, então é mesmo com a função! Evitas ter o código repetido essas vezes todas.
     
  14. migjac

    migjac Power Member

    muito obrigado pela resposta tão rápida. è a solução que eu procurava. O unico problema é só se aseguir tiver outra ferase com texto para ocultar e se repetir a função quando clico na segunda frase nao aparece o texto da primeira frase mas aparece o texto oculto da primeira.
    Espero que tenha feito entender
     
  15. hostmake

    hostmake Power Member

    Tens que mudar os id's :P

    Se tens dois gajos com o nome Rui na rua, e dizes Anda cá Rui, epah, o mais provável é que olhem os dois.
    Se só houver um Rui, o outro não vai olhar não é ?:P


    (desculpa, apeteceu-me mesmo fazer essa comparação estúpida)
     
    Última edição: 20 de Junho de 2008
  16. migjac

    migjac Power Member

    Muito obrigado. Já funciona!
    Agradeço imenso...
     
  17. Kayvlim

    Kayvlim Undefined Moderator
    Staff Member

    Como nem eu sabia que era capaz de fazer isto, decidi fazer um exemplo um pouco maior.
    Também mostra a diferença entre "display" e "visibility": em "display" o objecto desaparece como se não existisse, e em "visibility" o espaço que o mesmo ocupa mantém-se alocado. Assim, fiz um HTML de exemplo para eu testar, e deixo-o aqui:

    Código:
    <html>
    <head>
     <title>Teste</title>
     <style type="text/css">
      body {
       font-family: tahoma, verdana; 
       font-size: 12px;
      }
     
      #hidden1, #hidden2, #hidden3, #hidden4,
      #hidden11, #hidden12, #hidden13, #hidden14
      {
       color: green;
      }
      #hidden11, #hidden12, #hidden13, #hidden14 {
       margin-bottom: 13px;
       display: none;
      }
     
      span {
       text-decoration: underline;
       pointer: hand;
       cursor: hand;
      }
     </style>
    </head>
    <body>
     <script type="text/Javascript">
      function textclick(ctl) 
      {
       if(!ctl.style) ctl=document.getElementById(ctl);
       ctl.style.display = (ctl.style.display=='block'?'none':'block');
      }
     
      function texthover(ctl, over) 
      {
       if(!ctl.style) ctl=document.getElementById(ctl);
       if(over)
        ctl.style.visibility = 'visible';
       else
        ctl.style.visibility = 'hidden';
      }
     </script>
     
     <span onmouseover="texthover('hidden1',true)" onmouseout="texthover('hidden1', false)">Texto 1</span> |
     <span onmouseover="texthover('hidden2',true)" onmouseout="texthover('hidden2', false)">Texto 2</span> |
     <span onmouseover="texthover('hidden3',true)" onmouseout="texthover('hidden3', false)">Texto 3</span> |
     <span onmouseover="texthover('hidden4',true)" onmouseout="texthover('hidden4', false)">Texto 4</span>
     <div id="hidden1" style="visibility:hidden">Ajuda 1</div>
     <div id="hidden2" style="visibility:hidden">Ajuda 2</div>
     <div id="hidden3" style="visibility:hidden">Ajuda 3</div>
     <div id="hidden4" style="visibility:hidden">Ajuda 4</div>
     <br>
     <br>
     
     <span onclick="textclick('hidden11')">Texto alternativo 1</span><br>
     <div id="hidden11">Outra ajuda 1</div>
     <span onclick="textclick('hidden12')">Texto alternativo 2</span><br>
     <div id="hidden12">Outra ajuda 2</div>
     <span onclick="textclick('hidden13')">Texto alternativo 3</span><br>
     <div id="hidden13">Outra ajuda 3</div>
     <span onclick="textclick('hidden14')">Texto alternativo 4</span><br>
     <div id="hidden14">Outra ajuda 4</div>
     </body>
    </html>
    
    Agora é uma questão de brincar com as propriedades do CSS, mesmo :)

    Isto é divertido :D
     
    Última edição: 21 de Junho de 2008

Partilhar esta Página