Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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>
<a href="#"><img src="links/livro.png" name="menu0" width="86" height="13" border="0"/></a>
<a href="#"><img src="links/aviao.png" name="menu0" width="109" height="13" border="0"/></a>
<a href="#"><img src="links/motos.png" name="menu0" width="108" height="13" border="0"/></a>
<a href="#"><img src="links/bicicleta.png" name="menu0" width="114" height="13" border="0"/></a>
<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 ?Carregando comentários...