Publicado em 16 de nov.

Trocar imagem pelo nome da imagem: carro.png por carro-B.png ...

Olá pesssoal,

Sou novato em JS.

Eu tenho 6 links, que são imagens que quero substituir, uma pela outra.

Eu sei que poderia fazer isso facilmente via CSS, mas para treinar quero fazer da seguinte forma:

Minha ideia seria pegar o src das imagens e alterar mudando o nome da imagem, tipo assim:

Tenho imagens que são os links nomeados assim: carro.png / carro-B.png (uma imagem(link) é branca e a outra é amarela).

Como faço para alterar a imagem trocando uma pela outra nesse esquema ?

	<a href="#"><img src="**links/carro.png**" name="menu0" width="90" height="13" border="0"/></a>

	e trocar para

	<a href="#"><img src="**links/carro-B.png**" name="menu0" width="90" height="13" border="0"/></a>

	 

	Como são **6 imagens** eu estou pegando via** getElementsByTagName** e depois fazer uma função que automatize para todas as outras.....

	Tirando o CSS HOVER via Javascript, essa seria a melhor maneira de automatizar essa troca ?

	vai lá o código:

	 

<html>
<head>
<style>
	body{background-color: #000000;}
</style>

<script>
 window.onload = function(){

 var menu0 = document.getElementsByName("menu0");

 var imagem = menu0[0].src;
 //////////////////////////////////////////////
 //bloco que vai varrer cada item: ////////////
 //for(var i=0; i<menu0.length; i++){
 // alert(menu0[i].src);
 //}
 //////////////////////////////////////////////
 }
</script>
</head>

<body>
<a href="#"><img src="links/carro.png" name="menu0" width="90" height="13" border="0"/></a>&nbsp;&nbsp;&nbsp;
<a href="#"><img src="links/livro.png" name="menu0" width="86" height="13" border="0"/></a>&nbsp;&nbsp;&nbsp;
<a href="#"><img src="links/aviao.png" name="menu0" width="109" height="13" border="0"/></a>&nbsp;&nbsp;&nbsp;
<a href="#"><img src="links/motos.png" name="menu0" width="108" height="13" border="0"/></a>&nbsp;&nbsp;&nbsp;
<a href="#"><img src="links/bicicleta.png" name="menu0" width="114" height="13" border="0"/></a>&nbsp;&nbsp;&nbsp;
<a href="#"><img src="links/onibus.png" name="menu0" width="114" height="13" border="0"/></a>
</body>
</html>

	a imagem **carro.png** tem o seu respectivo** carro-B.png**

	**                  aviao.png                                        aviao-B.png**

	 

	E assim por diante.... Essa é uma boa maneira de fazer isso via JS ?? ou tem melhores ?

Discussão (2)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Omar~· 16 de nov.

56 minutos atrás, renan mafra disse:

E assim por diante.... Essa é uma boa maneira de fazer isso via JS ?? ou tem melhores ?

Depende cara....

Qual a condição para que a imagem seja trocada... O que tens de acontecer para o src ser alterado?

No caso do src para imagens no javascript precisamos usar a classe nativa dos browsers Image.

É muito simples de usar, veja uma situação:

<img src="carro.png" alt="" id="exemplo" />

<script>
 setTimeout(function () {
 var img = new Image();
 var id = document.getElementById('exemplo');
 img.src = 'carro-B.png?rand=' + Math.random();
 id.src = img.src;
 }, 3000);
</script>

	Nesse exemplo uma imagem aparece, após 3 segundos a mesma é substituída por oura.

renan mafra· 16 de nov.

eu quero aproveitar somente uma chamada via document.getElementsByName("menu0");

	e usar uma função para que **ao pairar o mouse em cima de cada imagem/link (mouseover)** a imagem troque pela outra

	eu estou me enrolando com a array criada pelo DOM:

	 

	**Um link Já funcionou**, eu quero que funcione para todos entendeu ? Segue onde estou.... depois prentendo

	colocar um **duas addEventListener.

	segue:**

	 

<script>
 window.onload = function(){

 var menu0 = document.getElementsByName("menu0");

 var imagem = menu0[0].src;
 var oc = imagem.indexOf('.png')

 var oc2 = imagem.indexOf('links/')
 var extracao2 = imagem.slice(oc2, oc);
 var novastring = (extracao2 + "-B.png");
 var string_anterior = (extracao2 + ".png");

 menu0[0].onmouseover = function troca(){
 menu0[0].src = novastring;

 }
 menu0[0].onmouseout = function troca2(){
 menu0[0].src = string_anterior;

 }
 //////////////////////////////////////////

 //////////////////////////////////////////////OK
 //bloco que vai varrer cada item: ////////////
 //for(var i=0; i<menu0.length; i++){
 // alert(menu0[i].src);
 //}
 //////////////////////////////////////////////
 }
</script>
</head>

<body>
<a href="#"><img src="links/carro.png" name="menu0" width="90" height="13" border="0"/></a>&nbsp;&nbsp;&nbsp;
<a href="#"><img src="links/aviao.png" name="menu0" width="86" height="13" border="0"/></a>&nbsp;&nbsp;&nbsp;
<a href="#"><img src="links/moto.png" name="menu0" width="109" height="13" border="0"/></a>&nbsp;&nbsp;&nbsp;
<a href="#"><img src="links/jet.png" name="menu0" width="108" height="13" border="0"/></a>&nbsp;&nbsp;&nbsp;
<a href="#"><img src="links/skate.png" name="menu0" width="114" height="13" border="0"/></a>&nbsp;&nbsp;&nbsp;
<a href="#"><img src="links/scooter.png" name="menu0" width="114" height="13" border="0"/></a>
</body>
</html>

	Tipo automatizar a parada, o menu[0] vai ser menu* dentro do loop for

**
como está no bloco em //comentário
*

**
Até já funcionou para pescar os itens, eu to me enrolando na hora de colocar um evento para disparar em
*

**
cada um dos links/imagens....
*