Ir para conteúdo
Fórum Script Brasil
  • 0

onmouseover / onmouseout


carcesar11

Pergunta

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>
Link para o comentário
Compartilhar em outros sites

1 resposta a esta questão

Posts Recomendados

  • 0

Olá!

Já que queres aprender:

Sugiro que já comece com html5

As imagens que o sr. mostra quando passa o mouse em cima dos links, estão dentro de divs.

Logo tudo o que colocares dentro das divs, só aparecerão tb, quando as divs aparecerem.

Podes colocar os preços dentro das mesmas divs onde estão as imagens ocultas
 

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152k
    • Posts
      651,8k
×
×
  • Criar Novo...