Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

carcesar11

dúvidas com eventos ?

Por , em Javascript

Recommended Posts

carcesar11    0

carcesar11
Postado

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. Bem eu preciso uma tabela com 4 colunas: código do produto, nome produto, foto produto, preço do produto. A coluna código e nome produto terão 5 linhas com as suas informações e as colunas foto produto e preço terão apenas uma linha (rowspan 5). O que eu quero é quando passar o mouse sobre o nome do produto, mostre a foto na coluna foto e o preço deste produto na coluna preço. Ainda não encontrei um exemplo desses. Obrigado.

Compartilhar este post

Link para o post
Compartilhar em outros sites

gabrieldarezzo    255

gabrieldarezzo
Postado

Ficou confuso.

Não entendi ainda se sua duvida é sobre textarea, table ou manipulação do DOM via JavaScript.

 

Enfim, montei um exemplo pra ti 

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	
	<button id="bnt-evento">Passe o Mouse</button>
	
	<img id="foto-aqui" src="http://www.w3schools.com/html/pic_mountain.jpg" alt="Montanha" style="display:none;"/>
	
	<script type="text/javascript">
		document.getElementById('bnt-evento').addEventListener('mouseover', function(event){
			document.getElementById('foto-aqui').style.display = 'block';
		});
	</script>
	
	
</body>
</html>

Nesse exemplo assim que o mouse é passado em cima do id="bnt-evento" ele exibe a foto(que estava previamente com o style="display:none;" (não exibe)

 

Da pra fazer isto com o preço só seguir a mesma lógica.

 

Abraços.

Compartilhar este post

Link para o post
Compartilhar em outros sites

marsolim    110

marsolim
Postado

coloca id em todos os elementos envolvidos. digamos que o img seja id="img" e o elemento da descrição tenha id="desc" e as células seja id="prod0" até id="prod9" por exemplo. ai tu pode nomeas as imagens com os mesmos ids pra facilitar, por exemplo de prod0.jpg até prod9.jpg. aí tu vai usar os eventos onmouse over para quando passar o mouse em cima da célula e onmouseout para quando tirar o mouse de cima dela. exemplo numa célula:

<td id="prod0" onmouseover="fn_over(this.id);" onmouseout="fn_out(this.id);">PRODUTO 01</td>

this significa este ou seja, vai ser passado o id do elemento que tá sendo usado no momento. tu pode criar uma array com as descrições dentro do bloco script. vamos ao tal:

<script>

    function fn_over(id){
        id_num = id.replace("prod", ""); //tiramos o "prod" da id para ficar apenas a parte numérica para usar no retorno da array
        descs = ["Descrição do item 0", "Descrição do item 1", "Descrição do item 2", "Descrição do item 3", "Descrição do item 4", "Descrição do item 5", "Descrição do item 6", "Descrição do item 7", "Descrição do item 8", "Descrição do item 9"];

        document.getElementById("img").src = id + ".jpg";
        document.getElementById("desc").innerHTML = descs[id_num];
    }

    function fn_out(id){
        document.getElementById("img").src = "";
        document.getElementById("desc").innerHTML = "";
    }

 </script>

mas eu sugiro usar banco de dados que pode ser mysql e fazer a pesquisa usando php e ajax.

Compartilhar este post

Link para o post
Compartilhar em outros sites

carcesar11    0

carcesar11
Postado

Pessoal! Me desculpe por não conseguir deixar claro a dúvida. Eu 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 pois só terão esses elementos, então um banco de dados não seria necessário nesse caso. O código que tenho está abaixo. Mas por favor sou iniciante e me desculpem se tem algo errado. Como sabem na internet tem muita informação e as vezes em vez de facilitar, não complica, mas embola as coisas. 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;
}
preco {
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>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito