Jump to content
Fórum Script Brasil
  • 0

onmouseover / onmouseout


carcesar11
 Share

Question

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:[email protected]">
[email protected]</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 to comment
Share on other sites

1 answer to this question

Recommended Posts

  • 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 to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Forum Statistics

    • Total Topics
      149.6k
    • Total Posts
      646.2k
×
×
  • Create New...