Jump to content
renan mafra

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

Recommended Posts

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 ?
 

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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....

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By cleomarjose
      Boa noite
      preciso de uma ajuda de vocês, montando um raspador de site e quero que as informaçções fiquem organizadas, não consigo descobrir como coloco as id valorCep e valorComplCep na mesma linha, obrigado pela ajuda
       
                 <h1> <p id="valorCep">                 </p>    </h1>
                 <h1> <p id="valorComplCep">            </p>    </h1>
                 
      <input type="text" id="cependseg__numero" name="cependseg__numero" autocomplete="off" class="input-cep" maxlength="5" onkeyup="autoTabSelection( get(&#39;cependseg__numero&#39;) , get(&#39;cependseg__complemento&#39;), event);" value="29092" onchange="javascript:atualizarHiddenCep(&#39;cependseg&#39;);javascript:limparCampos([&#39;estabelecimento&#39;,&#39;codigoLocalDesconto&#39;,&#39;codigoTipoLocalDesconto&#39;,&#39;clausulaServico&#39;,&#39;codigoClausulaServico&#39;]);javascript:acionarBuscaDiretaPorCep_cependseg(this);" onblur="javascript:setValorFromId(&#39;cependseg&#39;,preencherAEsquerda(getValorFromId(&#39;cependseg&#39;),3,&#39;0&#39;));javascript:atualizarHiddenCep(&#39;cependseg&#39;);" onkeypress="return isNumber(event);"> - <input type="text" id="cependseg__complemento" name="cependseg__complemento" autocomplete="off" class="input-complemento_cep" maxlength="3" value="065" onchange="javascript:atualizarHiddenCep(&#39;cependseg&#39;);javascript:limparCampos([&#39;estabelecimento&#39;,&#39;codigoLocalDesconto&#39;,&#39;codigoTipoLocalDesconto&#39;,&#39;clausulaServico&#39;,&#39;codigoClausulaServico&#39;]);" onblur="javascript:setValorFromId(&#39;cependseg&#39;,preencherAEsquerda(getValorFromId(&#39;cependseg&#39;),5,&#39;0&#39;));javascript:atualizarHiddenCep(&#39;cependseg&#39;); javascript:acionarBuscaDiretaPorCep_cependseg(this);" onkeypress="return isNumber(event);"><div class="div-botoes-atributo div-botao-encontrarcep"><div class="btCor3"></div>
      <script>
               capturando = document.getElementById('cependseg__numero').value;
          document.getElementById('valorCep').innerHTML = capturando;
               capturando = document.getElementById('cependseg__complemento').value;
          document.getElementById('valorComplCep').innerHTML = capturando;
          </script>
    • By srawolf
      Eu tenho uma tabela, essa tabela vem com o campo nome e matricula do banco de dados (fiz em mongodb), eu ia colocar uns inputs para notas e ser enviado no text do email, mas ele repete a primeira linha da tabela
      Estou usando, node.js, nodemailer, mongodb
      o email não aparece na tela, so no banco de dados e eu puxo ele quando vou enviar o email, como eu posso identificar esses inputs para que cada email receba sua respectiva nota?
    • By studdiox
      Ola pessoal tudo certo ... tenho um problema com um script que pode ajudar muita gente 
      ele da um preview das imagens carregadas em um form de upload ele funciona mas só da o preview
      de uma imagem quando carrega ... se eu colocar o formulário em multiple ele exibe todas as imagens selecionadas 
      antes de fazer o upload para o banco de dados, mas se eu deixar a seleção normal ou seja
      uma imagem por vez,  ele não carrega o restante das imagens, apenas a primeira, vou por o
      código abaixo completo funcionando com o multiple se alguém ai conseguir me ajudar a mudar ele
      para exibir cada imagem carregada separadamente eu agradeço e vai ajudar muita gente também 
       
       
      <html> <head> <style type="text/css"> .thumb-image{ float:left;width:100px; position:relative; padding:5px; } </style> </head> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <div id="wrapper" style="margin-top: 20px;"> <input id="fileUpload" multiple="multiple" type="file"/> <div id="image-holder"></div> </div> <script language="JavaScript"> $("#btnCLear").on('click',function(){ $("#image-holder").html(""); }); $("#fileUpload").on('change', function () { //Obtendo contagem dos arquivos selecionados var countFiles = $(this)[0].files.length; var imgPath = $(this)[0].value; var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase(); var image_holder = $("#image-holder"); image_holder.empty(); if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") { if (typeof (FileReader) != "undefined") { //loop para cada arquivo selecionado para uploaded. for (var i = 0; i < countFiles; i++) { var reader = new FileReader(); reader.onload = function (e) { $("<img />", { "src": e.target.result, "class": "thumb-image" }).appendTo(image_holder); } image_holder.show(); reader.readAsDataURL($(this)[0].files[i]); } } else { alert("Seu navegador não tem suporte ao FileReader."); } } else { alert("Selecione apenas arquivos de imagem."); } }); </script> </body> </html> No meu caso ele ficaria assim
       
       
       
      <html> <head> <style type="text/css"> .thumb-image { float: left; width: 100px; position: relative; padding: 5px; } </style> </head> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <div id="wrapper" style="margin-top: 20px;"> <input id="fileUpload" type="file"/> <div id="image-holder"></div> </div> <div id="wrapper" style="margin-top: 20px;"> <input id="fileUpload" type="file"/> <div id="image-holder"></div> </div> <div id="wrapper" style="margin-top: 20px;"> <input id="fileUpload" type="file"/> <div id="image-holder"></div> </div> <div id="wrapper" style="margin-top: 20px;"> <input id="fileUpload" type="file"/> <div id="image-holder"></div> </div> <div id="wrapper" style="margin-top: 20px;"> <input id="fileUpload" type="file"/> <div id="image-holder"></div> </div> <div id="wrapper" style="margin-top: 20px;"> <input id="fileUpload" type="file"/> <div id="image-holder"></div> </div> <div id="wrapper" style="margin-top: 20px;"> <input id="fileUpload" type="file"/> <div id="image-holder"></div> </div> <script language="JavaScript"> $("#btnCLear").on('click',function(){ $("#image-holder").html(""); }); $("#fileUpload").on('change', function () { //Obtendo contagem dos arquivos selecionados var countFiles = $(this)[0].files.length; var imgPath = $(this)[0].value; var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase(); var image_holder = $("#image-holder"); image_holder.empty(); if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") { if (typeof (FileReader) != "undefined") { //loop para cada arquivo selecionado para uploaded. for (var i = 0; i < countFiles; i++) { var reader = new FileReader(); reader.onload = function (e) { $("<img />", { "src": e.target.result, "class": "thumb-image" }).appendTo(image_holder); } image_holder.show(); reader.readAsDataURL($(this)[0].files[i]); } } else { alert("Seu navegador não tem suporte ao FileReader."); } } else { alert("Selecione apenas arquivos de imagem."); } }); </script> </body> </html>  
       
       
       
    • By Overtron8000
      Ola Pessoas,
      Recentemente fiz uma prova para Desenvolvedor Javascript jr em uma empresa e tinha varias questões para escrever o código NA MÃO  e uma delas me deixou encabulado por exigirem que um junior saiba de cór isso era a seguinte pergunta:
       
      Dado o JSON abaixo construa um código que faça o calculo da media do parâmetro "time"  quando "type" for semelhante a "call" e o máximo valor para "time" quando "type for semelhante a "ping". Considere que o array events poderá conter milhões de objetos portanto seu código deve levar em consideração o processamento assíncrono do Node.js de forma que o resultado seja síncrono, ou seja, o codigo so deve completar quando o resultado do s cálculos estiverem prontos.
      JSON : events = { [ {type:"ping", time :10) [ {type:"ping", time: 5) [ {type:"call", time: 99) [ {type:"call", time: 67) [ {type:"ping", time: 7) [ {type:"call", time: 127) }  
      Isso tudo para fazer no resto da folha que sobrou alem da pergunta, se alguém saber uma solução poste ai que estou curioso ate hoje, sei que leva o conceito de promisses assíncronas mas ainda não cheguei nessa parte
       
       
       
       
                                   
       
       
    • By RSN
      Boa noite,
      Gostaria de após selecionar o produto carregasse outro select informando os preços(tabela produto), com javascript fazendo requisição para a servlet.
      div class="form-group col-md-4"> <label for="exampleInputEmail1">Produto</label> <select class="form-control select2" style="width: 100%;" id="id_produto" name="id_produto"> <option value="nao_informado">Selecione</option> <c:forEach items="${produto}" var="product"> <option value="${product.id}" id="${product.id}" <c:if test="${product.id == orcament.id_produto}"> <c:out value = "selected=selected" /> </c:if>> ${product.descricao}</option> </c:forEach> </select> </div> <div class="form-group col-md-1"> <label for="exampleInputEmail1">Tabela/Precos</label> <select class="form-control select2" style="width: 100%;" id="id_table" name="id_table" > <option value="nao_informado">Selecione</option> </select> </div>  
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.