programador php 0 Denunciar post Postado Janeiro 11, 2008 galera fiz esse script mediante à um exemplo do site do maujor caso não gostem podem criticar, deletar, ou sei lá moderadores se quiserem mover ou fazer qualquer coisa com isso fiquem a vontade abraço <html> <head> <title>Barra de Navegação com tool tip</title> <style type="text/css"> .contLink a { position: relative; font: 12px Arial, Verdana,Helvetica,sans-serif; text-decoration: none; text-align: center; padding: 1px 5px; margin-right:-1px; } .contLink img { z-index: 1; } .contLink a:hover { z-index: 1; } .contLink a span { display:none; } .contLink a:hover span { display: block; position: absolute; top:20px; left:0; width: 200px; padding: 2px 0; color: #666; background:#fffff0; font-size: 12px; border:2px dotted #000; text-align:center; z-index: 100; } --> </style> </head> <body> <h3>BARRA TOOL TIP </h3> <h3>Passe o mouse sobre o carrinho</h3> <table border=0> <tr class="contLink"> <td>celula1</td> <td>celula1</td> <td>celula1</td> <td>celula1</td> <td><a href="#"><img src="carrinho_compras.png" width="25" height="25" border=0 /><span>Aqui você digita o Texto que quer que apareça!!!!</span></a></td> </tr> <tr class="contLink"> <td>celula1</td> <td>celula1</td> <td>celula1</td> <td>celula1</td> <td><a href="#"><img src="carrinho_compras.png" width="25" height="25" border=0 /><span>Aqui você digita o Texto que quer que apareça!!!!</span></a></td> </tr> <tr class="contLink"> <td>celula1</td> <td>celula1</td> <td>celula1</td> <td>celula1</td> <td><a href="#" ><img src="carrinho_compras.png" width="25" height="25" border=0 /><span>Aqui você digita o Texto que quer que apareça!!!!</span></a></td> </tr> <tr class="contLink"> <td>celula1</td> <td>celula1</td> <td>celula1</td> <td>celula1</td> <td><a href="#"><img src="carrinho_compras.png" width="25" height="25" border=0 /><span>Aqui você digita o Texto que quer que apareça!!!!</span></a></td> </tr> </table> </body> </html> Compartilhar este post Link para o post Compartilhar em outros sites
inforsis 1 Denunciar post Postado Janeiro 11, 2008 Movido: Webstandards: CSS / XML / XHTML/ HTML http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Artigos, Dicas, Tutoriais e Matérias (Webstandards) Compartilhar este post Link para o post Compartilhar em outros sites
Silas Martins 0 Denunciar post Postado Abril 8, 2008 a.tooltip { border-bottom: 1px dashed #ff5e2f; text-decoration: none; position: relative; color: #ff5e2f; z-index: 24 } a.tooltip:hover { border-bottom: 1px dashed #7a7a7a; text-decoration: none; color: #7a7a7a; z-index: 25 } a.tooltip span { display: none } a.tooltip:hover span { border: 1px solid #f0d070; background-color: #ffffe4; position: absolute; color: #d0a010; display: block; padding: 3px; width: 245px; top:2em; left:0em; }No texto aonde irão clicar para abrir a janela pop-up, basta colocar o seguinte: <a class='tooltip' href='#'>este é o texto que abre o tooltip<span>este é o texto mostrado sobre a link</span></a> Compartilhar este post Link para o post Compartilhar em outros sites
William Bruno 1501 Denunciar post Postado Abril 8, 2008 Muito bacana cara, gostei da idéia. Acho que "não chega à evitar" alguns pop-ups, mas já é um belo efeito sem JavaScript. Qnto mais programamos e nos deparamos com desafios, é que aparecem as melhores soluções. Compartilhar este post Link para o post Compartilhar em outros sites
webflex 0 Denunciar post Postado Abril 8, 2008 Olá, Ficou porreiro mesmo :). Cumps \o/ Compartilhar este post Link para o post Compartilhar em outros sites
RobertoPC 0 Denunciar post Postado Abril 10, 2008 Olá, Muito interessante o efeito, porém não substitue as pop-ups por finalidade! Compartilhar este post Link para o post Compartilhar em outros sites
brcontainer 16 Denunciar post Postado Abril 11, 2008 Um exemplo do mesmo: http://www.maujor.com/dicas/tooltip.php Ps.: E tem uma breve "explicação" do funcinamento ;) Compartilhar este post Link para o post Compartilhar em outros sites
