..:: MX Studio Fóruns ::..: Mouseover aparece um texto - ..:: MX Studio Fóruns ::..

Jump to content

Publicidade

ATENÇÃO
Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

Mouseover aparece um texto Script para dreaweaver

#1 User is offline   ayrtonprospero 

  • Group: Membros
  • Posts: 5
  • Joined: 19-January 05

Posted 25 April 2005 - 10:30 AM

Bom dia..
preciso de um script para colocar em uma foto e quando o cara passar com o mouse sobre um elemento da foto, aparece uma mensagem sobre o objeto.
Grato pela atenção
Ayrton
0

#2 User is offline   MXDesign 

  • Group: Membros
  • Posts: 236
  • Joined: 26-January 05

Posted 25 April 2005 - 12:27 PM

Pow kra simples... é so onde tem vc colocar oq quer q apareça mo quadrinho reservado pro comentário (dreamweaver)
0

#3 User is offline   ayrtonprospero 

  • Group: Membros
  • Posts: 5
  • Joined: 19-January 05

Posted 25 April 2005 - 02:23 PM

ok.. eu acho que já fiz... e não deu certo, vou la ver....
mas valeu
0

#4 User is offline   TiTi Celestino 

  • Group: Membros
  • Posts: 5198
  • Joined: 13-February 05

Posted 26 April 2005 - 12:56 AM

tipo vc quer q qando o cara passe o mouse em cima da imagem apareça um texto?
0

#5 User is offline   NoP 

  • Group: Membros
  • Posts: 99
  • Joined: 28-June 04

Posted 27 April 2005 - 12:22 AM

Se eu bem entendi, uma coisa simples de você fazer isso é você usar o ALT do HTML. Ficaria assim:

HTML
<img src="imagem.jpg" alt="Essa é uma imagem" />


Caso queira algo mais bonito e mais legal, será necessário um pouco mais de trabalho. Você poderá trabalhar com layers no Dreamweaver. Há algum tempo atrás escrevi um tuto de como fazer +- isso com layers, basta adaptar para o que você precisa wink.gif

Link do tópico

[ ]'s
0

#6 User is offline   Marcus VBP 

  • Group: Membros
  • Posts: 948
  • Joined: 06-June 03

Posted 27 April 2005 - 08:59 AM

na verdade, "alt" é o atributo de texto alternativo, caso a imagem não carregue. o fato de exibir um "hint" no internet explorer significa que eh bug. para exibir um "hint" qdo colocar o mouse em cima, use o atributo "title", que serve exatamente para isso.

o que vc quer fazer eh muito facil. nao precisa nem de javascript, apenas de DOM. ja ja eu posto um exemplo.
0

#7 User is offline   Marcus VBP 

  • Group: Membros
  • Posts: 948
  • Joined: 06-June 03

Posted 27 April 2005 - 09:33 AM

CODE

<!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" xml:lang="pt" lang="pt">
<head>
 <title>Layout Padrão</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;
     }
     /* isso soh tah ai para exemplificar, nao precisa pra funcionar */
     #img1 {
       left: 200px;
       top: 300px;
     }
     #img2 {
       left: 500px;
       top: 200px;
     }
     #img3 {
       left: 300px;
       top: 50px;
     }
   </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>Passe o mouse sobre os smileys</p>
<div class="imghint" id="img1">
<img alt="smiley" onmouseover="mostrahint(1)" onmouseout="ocultahint(1)" src="http://forum.mxstudio.com.br/style_emoticons/default/thumbsup.gif" />
<span class="label" id="label1">Isso aqui é um smiley</span>
</div>
<div class="imghint" id="img2">
<img  onmouseover="mostrahint(2)" onmouseout="ocultahint(2)"  src="http://forum.mxstudio.com.br/style_emoticons/default/thumbsup.gif" alt="smiley" />
<span class="label" id="label2">Isso aqui é outro Smiley</span>
</div>
<div class="imghint" id="img3">
<img onmouseover="mostrahint(3)" onmouseout="ocultahint(3)" src="http://forum.mxstudio.com.br/style_emoticons/default/thumbsup.gif" alt="smiley" />
<span class="label" id="label3">Isso aqui é mais um smyley</span>
</div>
</body>
</html>

0

Share this topic:


Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

Similar Topics Collapse

  Topic Forum Started By Stats Last Post Info
New Replies IFPI abre processo para recuperar domínio Notícias Notícias 
  • 0 Replies
  • 624 Views
New Replies Interurbano para áreas vizinhas deixará de ser cobrado em 446 locais Notícias Notícias 
  • 0 Replies
  • 168 Views
New Replies Microsoft libera IE7 para usuários de cópias falsificadas do Windows Notícias Notícias 
  • 0 Replies
  • 512 Views
New Replies Scripts para administração
Scripts para administração do Serviço ColdFusion 		ColdFusion mvzeppelin 
  • 2 Replies
  • 1370 Views
New Replies Chinês mata mãe que não deu dinheiro para ele ir ao cibercafé Notícias Notícias 
  • 0 Replies
  • 365 Views
New Replies Greenpeace alerta para lixo eletrônico do Vista Notícias Notícias 
  • 0 Replies
  • 417 Views
New Replies News Corp marca para "semanas ou meses" conteúdo pago Notícias Notícias 
  • 0 Replies
  • 229 Views
New Replies Bíblia da auto-ajuda de Dale Carnegie ganha versão para era digital Notícias Notícias 
  • 0 Replies
  • 160 Views

Publicidade

1 User(s) are reading this topic
0 membro(s), 1 visitante(s) e 0 membros anônimo(s)