Ir para conteúdo

POWERED BY:

Arquivado

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

Fernanda Damasceno

Passar mouse eem cima do link aparecer imagem e descrição do produto

Por , em Javascript

Recommended Posts

Fernanda Damasceno    0

Fernanda Damasceno
Postado

Boa noite!

 

Preciso de uma ajuda!

Sou nova criação de sites, estou tentatndo montar um site aonde ao passar o mouse em cima de um link ele abre ao lado uma div com a foto do produto e descrição.

 

consegui montar este código, porém nao consigo adicionar um proximo link com uma nova DIV, ele sempre esta chamando a mesma imagem.

 

Gostaria de algo parecido com este site. http://www.maujor.com/contato.php, so que sem link para outra página.

 

<html>   

<script language="JavaScript">   
       function mostrarElemento(id, visibilidade) {   
           document.getElementById(id).style.display = visibilidade;   
       }   
   </script>   


<style type="text/css">   
#prodImagem {   
   width: 200px;   
   height: 150px;   
   background-color:#09C;   
   display: none;   
   position: absolute;   -
   color: white;   
   padding: 5px;   
}   
</style>   


<body>   
   <a href="#" onMouseOver="mostrarElemento('prodImagem', 'inline');"   
       onMouseOut="mostrarElemento('prodImagem', 'none');">Produto   
       001</a><br>
       <br>
       <br>
       <br>
<br>
<div id="prodImagem">Imagem do produto  <img src="images/elusart2.jpg" alt=""> </div>   


   <a href="##" onMouseOver="mostrarElemento('prodImagem', 'inline');"   
       onMouseOut="mostrarElemento('prodImagem', 'none');">Produto   
       001</a><br>
<div id="prodImagem">Gloria a Deus  <img src="images/elusart.jpg" alt=""> </div>   

</body>   


</html>

 

Desde ja agradeço

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado 

<html>
<head>
<script type="text/javascript">   
function mostrarElemento(id, visibilidade) {   
document.getElementById(id).style.display = visibilidade;   
}
</script>
<style type="text/css">   
.prodImagem {  
   width: 200px;   
   height: 150px;   
   background-color:#09C;   
   display: none;   
   position: absolute;
   color: white;   
   padding: 5px;   
}
</style>
</head>
<body>   
<a href="#" onMouseOver="mostrarElemento('img1', 'inline');"  onMouseOut="mostrarElemento('img1', 'none');">Produto 001</a>
<div id="img1" class="prodImagem">Imagem do produto  <img src="images/elusart2.jpg" alt="img1" /></div>

<br /><br /><br /><br />

<a href="#" onMouseOver="mostrarElemento('img2', 'inline');" onMouseOut="mostrarElemento('img2', 'none');">Produto 002</a><br>
<div id="img2" class="prodImagem">Gloria a Deus  <img src="images/elusart.jpg" alt="img2" /></div>

<br /><br /><br /><br />

<a href="#" onMouseOver="mostrarElemento('img3', 'inline');" onMouseOut="mostrarElemento('img3', 'none');">Produto 003</a><br>
<div id="img3" class="prodImagem">Gloria a Deus  <img src="images/elusart3.jpg" alt="img3" /></div>
</body>
</html>

apenas repense nesse teu posicionamento absoluto.

Pois ele está pegando referência do body.

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