• Revista PROGRAMAR: Já está disponível a edição #53 da revista programar. Faz já o download aqui!

GONCALOPES

duvida informaçao

3 mensagens neste tópico

Olá a todos, estou a fazer uma apresentação, e queria que as pessoas ao passarem o rato por cima da imagem que tenho, que aparecesse um texto a dizer o que era a foto, e a pessoa ao tirar o rato do cimo da foto, essa mensagem desaparecia?alguem sabe como eu posso fazer?

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Olha um exemplo simples:

<html>
<head>
<title>Layout Teste</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
   <style type="text/css">
     .imghint {
       position: relative;
     }
     .label {
       font-family: arial;
       color: #f00;
       border: 1px solid #FFCC33;
       background-color: #FFFFCC;
       width: 150px;
       padding: 3px;
       font-size: 0.8em;
       position: absolute;
       left: 5px;
       top: 4px;
       visibility: hidden;
     }
   </style>

   <script type="text/javascript">
     function mostrahint(n) {
       document.getElementById("label"+n).style.visibility="visible";
     }
     function ocultahint(n) {
       document.getElementById("label"+n).style.visibility="hidden";
     }
   </script>

</head>
<body>
<p>Passa o rato sobre as imagens</p>
<div class="imghint" id="img1">
<img onmouseover="mostrahint(1)" onmouseout="ocultahint(1)" src="http://www.sorria.com.br/imagens/oti_imagem.jpg" />
<span class="label" id="label1">Ahhh Leão xD</span>
</div>
<div class="imghint" id="img2">
<img  onmouseover="mostrahint(2)" onmouseout="ocultahint(2)"  src="http://i168.photobucket.com/albums/u189/heather409/Owned.gif"/>
<span class="label" id="label2">Foste Ownado LOOOl</span>
</div>
</body>
</html>

Copia o código e guarda como html para veres o efeito, depois muda ao teu gosto o efeito do texto.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!


Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.


Entrar Agora