carcesar11
-
Total de itens
1 -
Registro em
-
Última visita
Sobre carcesar11
carcesar11's Achievements
0
Reputação
-
Pessoal eu sou novato estou tentando aprender javascript e sei que tenho um caminho longo a trilhar, mas estou precisando de ajuda para uma tarefa que tenho que enviar. Eu já consigo usar o efeito do mouse (onmouseover e onmouseout) e mostrar a imagem. Mas eu tenho que mostrar duas coisas ao passar o mouse e escondê-las ao retirar o mouse: a imagem e o preço de cada um na sua coluna. Não sei também se já tenho que deixar o texto do preço inserido na coluna preço e escondo com uma imagem em branco, para depois mostrar o texto do preço sobre essa imagem vazia e que estaria escondendo o preço. É apenas uma ideia. Como só terão poucos elementos (exercício), então um banco de dados não seria necessário nesse caso. O código que estou tentando está abaixo. Mas por favor sou iniciante e me desculpem se tem algo errado. Como sabem na internet tem muita informação que as vezes facilitam, não complicam, mas embola as coisas de quem está aprendendo a engatinhar no assunto. Agradeço a ajuda e vocês. <html> <head> <title>Exercícios</title> <style> td { background-color: #ffffff; border: 1px solid #3C1808; padding: 6px 12px 6px 12px; text-align: center; color: #573218; } td#tt { background-color: #3C1808; border: 1px solid #3C1808; padding: 6px 12px 6px 12px; text-align: left; } th { border: 1px solid #3C1808; padding: 6px 12px 6px 12px; text-align: center; } th#t01 { background-color: #907968; color: #ffffff; vertical-align: middle; } th#t02 { background-color: #EACEAC; color: #573218; } preço { color: #cc0000; vertical-align: middle; } a:link,a:visited { text-decoration: none; } a:hover,a:visited:hover { color: #ff0000; font-weight: bold; } .imagem { display: none; position: absolute; color: white; padding: 10px; top: 220px; left: 835px; } </style> </head> <body bgcolor="#3C1808" text="#F3EDA3" link="#FFFF33" vlink="#F3EDA3"> <script language="javascript"> function mostrar(id, visibilidade) { document.getElementById(id).style.display = visibilidade; } </script> <table width="100%"> <tr><td id=tt colspan="2"> <img src="imagens/MalaRodasPeq.png" align="left" /> <div align="right"> <font face="verdana,liberation" color="#FFEEBB"> <address>Rua da Bagagem, 10<br/> Tel: (21) 1234-5678<br/> <a href="mailto:contato@malalca.com.br"> contato@malalca.com.br</a></address> </font></div> <font face="verdana,liberation" color="#DDCC99"> <br/><br/> <hr color="#F3EDA3" width="480" align="left" size="3" noshade /> </font></td></tr> </table> <table width="100%"> <tr><td id=tt rowspan=6 width="180" valign="top"><br/> <font face="verdana,liberation" color="#FFEEBB"> <ul type="square"> <li>Inicial</li><br> <li>Gabinetes</li><br> <li>Fontes</li><br> <li>Acessorios</li><br> <li>Placas</li></ul> </font> </td> <th colspan="4" id=t01>G A B I N E T E S</th></tr> <tr> <th id=t01>Modelo</th><th width="280" id=t01>Tamanho</th><th id=t01>Foto</th><th id=t01>Preço</th></tr> <tr> <th id=t02>Saurus</th><td> <a href="#" onclick="return false;"></a> <a href="#" onMouseOver="mostrar('img1', 'inline');" onMouseOut="mostrar('img1', 'none');">Excepcionalmente Grande</a> <div id="img1" class="imagem"><img src="saurus.jpg" alt="img1" /></div> </td><td rowspan=4><img src="vazio.jpg"></td><td rowspan=4><img src="vazio.jpg"></td></tr> <tr> <th rowspan=3 id=t02>Vitória</th><td> <a href="#" onclick="return false;"></a> <a href="#" onMouseOver="mostrar('img2', 'inline');" onMouseOut="mostrar('img2', 'none');">G r a n d e</a> <div id="img2" class="imagem"><img src="vitoria.jpg" alt="img2" /></div> </td></tr> <tr> <td><a href="#" onclick="return false;"></a> <a href="#" onMouseOver="mostrar('img2', 'inline');" onMouseOut="mostrar('img2', 'none');">M é d i o</a> <div id="img2" class="imagem"><img src="vitoria.jpg" alt="img2" /></div> </td></tr> <tr> <td><a href="#" onclick="return false;"></a> <a href="#" onMouseOver="mostrar('img2', 'inline');" onMouseOut="mostrar('img2', 'none');">P e q u e n o</a> <div id="img2" class="imagem"><img src="vitoria.jpg" alt="img2" /></div> </td></tr> </table> </body> </html>