Ir para conteúdo

POWERED BY:

Arquivado

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

RafaelLN

[Resolvido] Mudar imagem ao passar o mouse na legenda

Por , em Javascript

Recommended Posts

RafaelLN    0

RafaelLN
Postado

Olá Pessoal!

Pesquisei muito mas não achei nada parecido na internet.

quero fazer o seguinte, tenho um menu vertical com 3 campos em cada campo uma legenda(é uma tabelinha mesmo de 1 coluna e 3 linhas)e do lado coloquei um campo de imagem... o que eu quero fazer é mudar a imagem conforme passo o mouse sobre as células. tentei usar esse código:

<script type="text/javascript">

var imagem=new Array();
imagem[0]="foto1.jpg";
imagem[1]="foto2.jpg";
imagem[2]="foto3.jpg";

function mudar_banner(x){
document.getElementById("banner").src=imagem[x];
</script>

e em cada célula da tabela coloquei:

na 1ª onmouseover="mudar_banner(0)"

na 2ª onmouseover="mudar_banner(1)"

e na 3ª onmouseover="mudar_banner(2)"

 

porem não aconteçe nada... alguma pessoa bondosa de coração e genial poderia me ajudar?

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

tecnicamente, isso que você quer, é possível resolver apenas com css.

 

Basta usar o pseudo seletor :hover

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Depende.. poste uma imagem do layout, ou um link para avaliarmos corretamente.

Compartilhar este post

Link para o post
Compartilhar em outros sites

RafaelLN    0

RafaelLN
Postado

esse é o layout do menu,ver

que eu preciso é que a imagem do lado direito seja alterada quando coloco o mouse em cima de uma legenda

essa é a estrutura 

 <div style="width:720px; height:280px; position:relative; left:10px; top:10px;">
    <table style="width:300px; height:280px; border-collapse:collapse;" border="0">
    <tr>
    <td style="background-color:#ffb60b;" onmouseover="mudar_banner(0)" id="foto1"><p>Participe conosco desta importante campanha social.</p></td>
    </tr>
    <tr>
    <td style="background-color:#4800ff;" onmouseover="mudar_banner(1)" id="foto2"><p>Aluna da Unidade Jardim é BRONZE na Olimpíada Paulista de Química 2012</p></td>
    </tr>
    <tr>
    <td style="background-color:#000;" onmouseover="mudar_banner(2)" id="foto3"><p>Aluno da Unidade Jardim é um dos finalistas da Olimpíada Brasileira de Linguística 2012</p></td>
    </tr>
    </table>
    <img src="foto1.jpg" id="banner" style="width:420px; height:280px; position:relative; float:right; margin-top:-280px;"/>
    </div>
    </div>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Marcos Vilela Alves    4

Marcos Vilela Alves
Postado

Rafael, eu fiz aqui um teste muito simples que nao apresentou erro.

<html>
   <head>
       <title>teste</title> 
       <script>
           function muda_img(foto){
               document.getElementById("img").src=foto;
           }
       </script>
   </head>
   <body>
       <table>
           <tr>
               <td onmouseover="muda_img('img1.png');"><p>img1</p></td>
           </tr>
           <tr>
               <td onmouseover="muda_img('img2.png');"><p>img2</p></td>
           </tr>
           <tr>
               <td><p>img3</p></td>
           </tr>
       </table>
       <div>
           <img src="img1.png" id="img"/>
       </div>

   </body>

</html>

 

tenta nao passar valor dentro do vetor.. tenta passar direto onome da imagem no parametro da funcao. assim funcionou no meu teste.

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