Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Galera, estou precisando muito de um apoio.
A princípio, tenho somente conhecimento básico de JS, mas um trabalho da faculdade foi solicitado o seguinte:
Foi determinado o uso do método getElementById para essa troca de imagem. Mas estou batendo cabeça.
Já consegui criar essa estrutura, porém, eu preciso agora transformar o nome do modelo de cada máquina em link, que clicados, seja carregada a imagem desse determinado modelo
O modelo inicial que deve ficar é assim:
.https://www.flickr.com/photos/137066691@N05/21632183294/in/shares-ywu2X7/
Aí, quando eu passar o link no nome do modelo, a imagem deve aparece assim:
https://www.flickr.com/photos/137066691@N05/shares/6uVx15
Segue a estrutura que consegui realizar até o momento.
Oi Ronaldo,
Segue o código que eu já tenho, que chega até a imagem que eu te informei.
Eu tenho uma pasta no computador chamado "imagens" na qual possui as 4 imagens que devem aparecer. Ou seja, eu preciso transformar o nome (<td>Piccolo</td>) em link que quando clicado, aparece uma determinada imagem na coluna "Foto" da tabela e seu preço na coluna "Preço" dessa mesma tabela, como ta lá na foto que enviei. Se precisar, te envio a página em HTML pra ficar melhor a compreensão.
Mega obrigado.
<html>
<head>
<title>Expresso do Café</title>
<base target="_blank" />
<link rel="stylesheet" type="text/css" href="css/EstiloCafe.css"/>
</head>
<body>
<header>
<address class="ender">Avenida Mochaccino, 10 <br/><a href="mailto:contato@coffe.com.br">contato@coffe.com.br</a>
</address>
<img class="ImgLogo" src="imagens/logo_pequeno.png"/>
</header>
<nav>
<ul>
<li><a href="ExpressoCafe.html">Inicial</a></li>
<li><a href="Historia.html">História</a></li>
<li><a href="Maquinas.html">Máquinas</a></li>
<li><a href="Saches.html">Saches</a></li>
<li><a href="Compras.html">Compras</a></li>
</ul>
</nav>
<section>
<table class="tabInfo">
<tr>
<th colspan="4" id="linTH">Máquinas de Café</th>
</tr>
<tr>
<th id="linTH">Tipo</th>
<th id="linTH">Modelo</th>
<th id="linTH">Foto</th>
<th id="linTH">Preço</th>
</tr>
<tr>
<th id="colTH">Dolce Gusto</th>
<td>Piccolo</td>
<td rowspan="4" "</td>
<td rowspan="4" id="preco" rowspan="4"></td>
</tr>
<tr>
<th rowspan="2" id="colTH">Nespresso</th>
<td>Inissia C40</td>
</tr>
<tr>
<td>U 50</td>
</tr>
<tr>
<th id="colTH">Senseo</th>
<td>HD7811/96</td>
</tr>
</table>
</section>
</body>
</html>Eu não entendi bem, tem várias formas de fazer isso, como eu disse se não existir nenhuma imagem lá usaria inserir um nó HTML com img.... imagino que deva iniciar já com uma imagem carregada, assim poderia trocar apenas passando o id.. alterei apenas para o piccolo e Inissia como exemplo, clica neles que verá a troca passando através do ID de cada um... acho que dá pra entender... mas como eu disse tem muita coisa que deveria saber antes de saber como eu ia inserir a imagem ali... foi apenas um exemplo usando o que passou... aliás, tabelas praticamente não se usa mais... testa ai..
<html>
<head>
<title>Expresso do Café</title>
<base target="_blank" />
<link rel="stylesheet" type="text/css" href="css/EstiloCafe.css"/>
<script>
function troca(preco,img) {
document.getElementById('imgatual').src = img;
document.getElementById('precoatual').innerHTML = preco;
}
</script>
</head>
<body>
<header>
<address class="ender">Avenida Mochaccino, 10 <br/><a href="mailto:contato@coffe.com.br">contato@coffe.com.br</a>
</address>
<img class="ImgLogo" src="imagens/logo_pequeno.png"/>
</header>
<nav>
<ul>
<li><a href="ExpressoCafe.html">Inicial</a></li>
<li><a href="Historia.html">História</a></li>
<li><a href="Maquinas.html">Máquinas</a></li>
<li><a href="Saches.html">Saches</a></li>
<li><a href="Compras.html">Compras</a></li>
</ul>
</nav>
<section>
<table class="tabInfo">
<tr>
<th colspan="4" id="linTH">Máquinas de Café</th>
</tr>
<tr>
<th id="linTH">Tipo</th>
<th id="linTH">Modelo</th>
<th id="linTH">Foto</th>
<th id="linTH">Preço</th>
</tr>
<tr>
<th id="colTH">Dolce Gusto</th>
<td data-preco="R$ 500,00" data-img="http://iacom.s8.com.br/produtos/01/00/item/6935/8/6935855G1.jpg" onclick="troca(this.getAttribute('data-preco'),this.getAttribute('data-img'))">Piccolo</td>
<td rowspan="4"><img id="imgatual" src="http://iacom.s8.com.br/produtos/01/00/item/6935/8/6935855G1.jpg" width="70px"></td>
<td rowspan="4" id="precoatual" rowspan="4">R$ 500,00</td>
</tr>
<tr>
<th rowspan="2" id="colTH">Nespresso</th>
<td data-preco="R$ 220,00" data-img="http://ishop.s8.com.br/produtos/01/00/item/113067/9/113067914G1.jpg" onclick="troca(this.getAttribute('data-preco'),this.getAttribute('data-img'))">Inissia C40</td>
</tr>
<tr>
<td>U 50</td>
</tr>
<tr>
<th id="colTH">Senseo</th>
<td>HD7811/96</td>
</tr>
</table>
</section>
</body>
</html>Show de bola. Testarei quando chegar em casa. E dando tudo certinho, faço a troca dos demais e posto novamente aqui o feedback.
Mais uma vez, obrigado pelo apoio!
Ronaldo, esse deu tudo certo. Super funcionou! Muito Obrigado!
Posta seu código inteiro para ver o que já fez (não em imagem).
GetElementById serve para identificar o elemento, seja ele um input, textarea, div etc... Não sei se foi isso que quis dizer, mas não é ele que vai trocar a imagem.
Se você já tiver uma imagem la no campo você pode trocar o src dela informando o ID (com Getelement), mas se você não tem imagem alguma carregada lá ainda, você vai ter de inserir um nó HTML com a imagem (um pouco mais complexo - mas não difícil)