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>
