onmouseover / onmouseout

carcesar11 · Maio 2, 2016

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">

function mostrar(id, visibilidade) {

document.getElementById(id).style.display = visibilidade;

}

</script>

<address>Rua da Bagagem, 10<br/>

Tel: (21) 1234-5678<br/>

contato@malalca.com.br</a></address>

</font></div>

</font></td></tr>

</table>

<li>Inicial</li><br>

<li>Gabinetes</li><br>

<li>Fontes</li><br>

<li>Acessorios</li><br>

<li>Placas</li></ul>

</font> </td>

<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>

</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>

</td></tr>

<tr>

</td></tr>

<tr>

</td></tr>

</table>

</body>

</html>

wash · Maio 2, 2016

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

Entrar

onmouseover / onmouseout

Pergunta

carcesar11

Link para o comentário

Compartilhar em outros sites

1 resposta a esta questão

Posts Recomendados

wash

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades