0

inserir a descrição da imagem aqui

Estou tentando usar a função para alterar entre 4 imagens através de clicks em determinados links. Entretanto enquanto uma imagem aparece, as outras 3 aparecem também como um campo a ser preenchido. Gostaria de mostrar apenas uma. Também gostaria de colocar um texto no campo preço que vai variar de acordo com a imagem.

function mudaImagem(i) {

  if (i == 1) {
    document.getElementById("imagem1").src = "Dulce_GustoP.jpg";
    document.getElementById("imagem2").src = "Nespresso_InissiaP_not.jpg";
    document.getElementById("imagem3").src = "Nespresso_C50P_not.jpg";
    document.getElementById("imagem4").src = "SenseoP_not.jpg";
  } else if (i == 2) {
    document.getElementById("imagem1").src = "Dulce_GustoP_not.jpg";
    document.getElementById("imagem2").src = "Nespresso_InissiaP.jpg";
    document.getElementById("imagem3").src = "Nespresso_C50P_not.jpg";
    document.getElementById("imagem4").src = "SenseoP_not.jpg";
  } else if (i == 3) {
    document.getElementById("imagem1").src = "Dulce_GustoP_not.jpg";
    document.getElementById("imagem2").src = "Nespresso_InissiaP_not.jpg";
    document.getElementById("imagem3").src = "Nespresso_C50P.jpg";
    document.getElementById("imagem4").src = "SenseoP_not.jpg";
  } else if (i == 4) {
    document.getElementById("imagem1").src = "Dulce_GustoP_not.jpg";
    document.getElementById("imagem2").src = "Nespresso_InissiaP_not.jpg";
    document.getElementById("imagem3").src = "Nespresso_C50P_not.jpg";
    document.getElementById("imagem4").src = "SenseoP.jpg";
  }
}
<tr>
  <th class="colTH">Dolce Gusto</th>
  <td><a id="colTD" onclick="mudaImagem(1)" onclick="mudaTexto(1)">Piccolo</a>
  </td>
  <td rowspan="4">
    <img id="imagem1" onclick="mudaImagem(1);" />
    <img id="imagem2" onclick="mudaImagem(2);" />
    <img id="imagem3" onclick="mudaImagem(3);" />
    <img id="imagem4" onclick="mudaImagem(4);" />
  </td>
  <td rowspan="4">
    <img id="texto1" onclick="mudatexto(1);" />
    <img id="texto2" onclick="mudatexto(2);" />
    <img id="texto3" onclick="mudatexto(3);" />
    <img id="texto4" onclick="mudatexto(4);" />
  </td>
</tr>
<tr>
  <th rowspan="2" class="colTH">Nespresso</th>
  <td><a id="colTD" onclick="mudaImagem(2)">Inissia C40</a>
  </td>
</tr>
<tr>
  <td><a id="colTD" onclick="mudaImagem(3)">U C50</a>
  </td>
</tr>
<tr>
  <th class="colTH">Senseo</th>
  <td><a id="colTD" onclick="mudaImagem(4)">HD7811/96</a>
  </td>
</tr>

2 Respostas 2

3

amigo, tive que fazer algo semelhante a algum tempo atras, segue o codigo que escrevi.

var container = document.getElementById("container");
var imagens = container.querySelectorAll("[data-sel]");
var preco = document.getElementById("preco");

[].forEach.call(imagens, function (imagem, indice) {
	imagem.addEventListener("click", function (event) {
        container.className = event.target.dataset.sel;
        preco.value = event.target.dataset.preco;
    });
})
#container {
    position: relative; 
    width: 330px;
    height: 440px;
} 

#imagem1, #imagem2, #imagem3, #imagem4 {
    position: absolute;    
    margin: 10px;
    background-color: white;
    box-shadow: 0px 0px 10px black;
    
    transition: width 1s, height 1s, top 1s, left 1s;
}

#container img {
    width: 100%;
    height: 100%;
}

.sel1 #imagem1 {    
    width: 320px;
    height: 320px;
    top: 0px;
    left: 0px;
    z-index: 4;
}

.sel1 #imagem2 {
    width: 100px;
    height: 100px;
    top: 330px;
    left: 0px;
}

.sel1 #imagem3 {
    width: 100px;
    height: 100px;
    top: 330px;
    left: 110px;
}

.sel1 #imagem4 {
    width: 100px;
    height: 100px;
    top: 330px;
    left: 220px;
}

.sel2 #imagem1 {    
    width: 100px;
    height: 100px;
    top: 330px;
    left: 0px;
}

.sel2 #imagem2 {
    width: 320px;
    height: 320px;
    top: 0px;
    left: 0px;
    z-index: 4;
}    

.sel2 #imagem3 {
    width: 100px;
    height: 100px;
    top: 330px;
    left: 110px;
}

.sel2 #imagem4 {
    width: 100px;
    height: 100px;
    top: 330px;
    left: 220px;
}

.sel3 #imagem1 {    
    width: 100px;
    height: 100px;
    top: 330px;
    left: 0px;
}

.sel3 #imagem2 {
    width: 100px;
    height: 100px;
    top: 330px;
    left: 110px;
}

.sel3 #imagem3 {
    width: 320px;
    height: 320px;
    top: 0px;
    left: 0px;
    z-index: 4;
}   

.sel3 #imagem4 {
    width: 100px;
    height: 100px;
    top: 330px;
    left: 220px;
}

.sel4 #imagem1 {    
    width: 100px;
    height: 100px;
    top: 330px;
    left: 0px;
}

.sel4 #imagem2 {
    width: 100px;
    height: 100px;
    top: 330px;
    left: 110px;
}

.sel4 #imagem3 {
    width: 100px;
    height: 100px;
    top: 330px;
    left: 220px;
}

.sel4 #imagem4 {
    width: 320px;
    height: 320px;
    top: 0px;
    left: 0px; 
    z-index: 4;
}
<div id="container" class="sel1">
    <div id="imagem1" data-sel="sel1" data-preco="7.35">
        1
    </div>    
    <div id="imagem2" data-sel="sel2" data-preco="12.15">
        2
    </div>
    <div id="imagem3" data-sel="sel3" data-preco="5.65">
        3
    </div>
    <div id="imagem4" data-sel="sel4" data-preco="8.00">
        4
    </div>
</div>
<input id="preco" type="text" readonly value="7.35" />

você só precisa trocar as div#imagem pelas suas imagens.

3
  • Amigo. No seu exemplo a imagem está realizando uma transição. Eu gostaria que as outras não aparecessem enquanto uma é apresentada. A troca eu já consegui fazer, entretanto o ícone das outras continua aparecendo.
    – ygorbr
    22/10/2015 às 13:12
  • Coloque um display none. 22/10/2015 às 13:16
  • display none faz sumir todas as imagens inclusive a que eu gostaria que fosse mostrada.
    – ygorbr
    23/10/2015 às 11:35
0

Resolvido o problema das imagens. Foi necessário apenas retirar o caminho para imagem que estava sendo inserido segundo o tutorial que usei como base para o uso do método js.

function mudaImagem(i) {

  if (i == 1) {
    document.getElementById("imagem1").src = "Dulce_GustoP.jpg";
    document.getElementById("imagem2").src = "";
    document.getElementById("imagem3").src = "";
    document.getElementById("imagem4").src = "";
  } else if (i == 2) {
    document.getElementById("imagem1").src = "";
    document.getElementById("imagem2").src = "Nespresso_InissiaP.jpg";
    document.getElementById("imagem3").src = "";
    document.getElementById("imagem4").src = "";
  } else if (i == 3) {
    document.getElementById("imagem1").src = "";
    document.getElementById("imagem2").src = "";
    document.getElementById("imagem3").src = "Nespresso_C50P.jpg";
    document.getElementById("imagem4").src = "";
  } else if (i == 4) {
    document.getElementById("imagem1").src = "";
    document.getElementById("imagem2").src = "";
    document.getElementById("imagem3").src = "";
    document.getElementById("imagem4").src = "SenseoP.jpg";
  }
}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .