Jump to content
renan mafra

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

By renan mafra, in Javascript

Recommended Posts

renan mafra    0

renan mafra
Posted

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

Omar~    87

Omar~
Posted
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

renan mafra    0

renan mafra
Posted

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
Go To Topic Listing Javascript

  • Similar Content

    • Rodrigo Biaggio
      Percorrer Array
      By Rodrigo Biaggio
      Senhores, conseguem me ajudar a evoluir na questão abaixo??
       
      Tenho esse código simples, aonde chamo uma API e percorro um array e pego apenas um campo e faço a soma. Só que preciso retornar além do campo "consumedHostUnits" e o campo "name", conforme print.
       

       
      Alguém poderia me dar uma luz, como fazer isso? 
       
      O resultado seria mostrando 
       
      Name: APIGateway | ConsumedHostsUnits: 2
       
      Segue o HTML:
       
      <!DOCTYPE html> <html lang="pt-br"> <title>API Management</title> <head> <meta charset="8"> </head> <body> <script> var urlapi = ''; function fazerRequisicao(){ var url = urlapi + document.getElementById('hostgroup').value; //var url = urlapi; var xhttp = new XMLHttpRequest(); xhttp.open("GET", url, false); xhttp.send(); var arrayElements = xhttp.responseText.split(','); var i; var sumComsumed = 0.0; for (i = 0; i < arrayElements.length; i++) { if(arrayElements[i].includes("consumedHostUnits")) { sumComsumed = sumComsumed + +arrayElements[i].split(":")[1]; } } document.getElementById("div-responsetext").innerHTML = sumComsumed; } </script> <button onclick="fazerRequisicao();">Pesquisar</button> <input type="text" id="hostgroup" style="width: 100px;"> <hr/> <div id="div-responsetext"></div> </body> </html> Obrigado.
       
    • Deivid Santos
      DataGrid com opção de movimentar (reposicionar)
      By Deivid Santos
      Salve galera, estou quebrando a cabeça aqui, já pesquisei mas não achei nada sobre.
      Eu tenho alguns dados que busco no banco de dados e mostro em um datagrid, além do CRUD que implantei eu preciso ter a opção de mudar as posições no banco. Preciso fazer isso pois elas são informações que vão para um telão. e ele segue uma ordem na mostragem dos dados.
      Teria alguma forma de arrastar a linha do grid e assim ele mudar o ID do mesmo conforme a posição que ficaria e assim os outros também seriam atualizados?
      Como exemplo segue uma imagem de como ele funciona. por exemplo eu movimento o ID 1 na posição abaixo do ID 3, assim o ID 2 e 3 se tornariam 1 e 2 com essa movimentação e o que era 1 se torna 3.

       
      Agradeço qualquer ajuda que puder.
       
       
    • juliosertori
      Ação Onkeyup com atraso de 1 ação!
      By juliosertori
      Olá boa noite, tudo bem galera?
       
      Tenho um input:
      <input type="text" value="0" name="qtdProds" id="qtdProds" class="form-control" onkeyup="atualizaTotalPrecos(this);" required /> E quando ele está ONBLUR, funciona o seguinte script:
      function atualizaTotalPrecos(sel){ var nameInput = sel.name; var IdNameProds = parseInt(nameInput.match(/\d/g).join('')); var valor = $('input[name="produtos_pdv['+IdNameProds+'][qtdProds]"]').val(); var custo = $('input[name="produtos_pdv['+IdNameProds+'][custoProds]"]').val(); var totalCusto = valor*custo; $("[name='produtos_pdv["+IdNameProds+"][custoTotalProds]']").val(totalCusto); //$("[name='totalPedidoDesconto']").val(totalCusto); var descontoPedido = $("#descontoPedido").maskMoney('unmasked')[0]; var total = 0; $('.somaTotal').each(function(){ var valor = Number($(this).val()); if (!isNaN(valor)) total += valor; }); var totalDescontado = total - descontoPedido; //alert(totalDescontado); $(".SomaTotalPrecos").maskMoney('mask', total); $(".totalpedidos").maskMoney('mask', totalDescontado); //////////////// var totalCusto = 0; $('.somaCustoTotal').each(function(){ var valor = Number($(this).val()); if (!isNaN(valor)) totalCusto += valor; }); $(".SomaTotalCustos").maskMoney('mask', totalCusto); };  
      Onde atualizo o campo .SomaTotalPrecos, funciona perfeitamente.
       
      Mas quando troco para Onkeyup, e inserir 1 por exemplo, primeiro ele preenche o campo com 0, e da segunda vez, ele atualiza para a primeira vez, ou seja, 1.
       
      Ex: coloco o valor de R$ 10,00 e na quantidade coloco 1, ele preenche o campo com 0, depois se insiro 2, ai ele preenche o campo com a quantidade anterior, ou seja 1xR$ 10,00
       
    • AndersonWS
      Preencher dinamicamente segundo combobox de acordo com o primeiro (com busca sql)
      By AndersonWS
      Tenho um código que aparentemente estaria certo porém ele "trava" e  não mostra os resultados.
      Creio que o problema está na parte de "buscar" o json apenas.
      Segue o código:
      <style>.carregando{color:#666;display:none;}</style> <div class="col-md-7"> <label for="empreendimento">Escolha o empreendimento</label> <select name="empreendimento" class="form-control" required="" id="empreendimento"> <option value="">-- Escolha um empreendimento --</option> <?php $sqlVs = "SELECT `id`,`nm` FROM `empreend` WHERE `dis`='1' ORDER BY `nm` ASC"; $queryVs = mysqli_query($link, $sqlVs); $total = mysqli_num_rows($queryVs); if ($total > 0){ while($r = mysqli_fetch_array($queryVs)){ $id = $r['id']; $nm = $r['nm']; echo '<option value="'.$id.'">'.$nm.'</option>'; } } else { echo '<option value="0">Não há empreendimentos disponíveis</option>'; } ?> </select> </div> <div class="col-md-5"> <label for="unidades">Unidade</label> <span class="carregando">Aguarde, carregando...</span> <select name="unidades" id="unidades" class="form-control" required=""> <option value="">-- Escolha uma unidade --</option> </select> </div> <script src="http://www.google.com/jsapi"></script> <script type="text/javascript"> google.load('jquery', '1.3'); </script> <script type="text/javascript"> $(function(){ $('#empreendimento').change(function(){ if( $(this).val() ) { $('#unidades').hide(); $('.carregando').show(); $.getJSON('ajax/busca_emp.php?search=',{empreendimento: $(this).val(), ajax: 'true'}, function(j){ var options = '<option value=""></option>'; for (var i = 0; i < j.length; i++) { options += '<option value="' + j[i].id + '">' + j[i].nm + '</option>'; } $('#unidades').html(options).show(); $('.carregando').hide(); }); } else { $('#unidades').html('<option value="">– Escolha um empreendimento –</option>'); } }); }); </script> if(!empty($_GET["search"])) { $empreendimento = trim($_GET["search"]); $empreendimento = mysqli_real_escape_string($link, $empreendimento); $unidades = array(); $sqlVs = "SELECT `id`,`nm` FROM `empreendimento` WHERE `id`='$empreendimento' ORDER BY `nm` ASC"; $queryVs = mysqli_query($link, $sqlVs); $total = mysqli_num_rows($queryVs); if ($total > 0){ while($r = mysqli_fetch_array($queryVs)){ $unidades[] = array( 'id' => $r['id'], 'nm' => $r['nm'], ); } } echo( json_encode( $unidades ) ); } else { echo 'vazio'; } Ele trava e fica apenas mostrando:
      Aguarde, carregando...
       
      Olhei o json e ele está recuperando:
      [{"id":"1","nm":"Condominio"}]
    • phpcoder
      Pegar valor de vários inputs, e enviar através apenas de um input hidden.
      By phpcoder
      OLÁ, gostaria de pegar os valores desses input e enviar no formulario apenas por um unico input hidden, um input com id diferente. Meu codigo está assim, gostaria de saber se é isso mesmo ou o que falta.
      input class="gp_input_grid" id="cod1" name="cod1" autofocus onKeyUp="javascript:pulacampo('cod1','cod2')" maxlength="1" type="tel" value="">
      input class="gp_input_grid" id="cod2" name="cod2" maxlength="1" onKeyUp="javascript:pulacampo('cod2','cod3')" type="tel" value=""
        
      input class="gp_input_grid" id="cod3" name="cod3" maxlength="1" onKeyUp="javascript:pulacampo('cod3','cod4')" type="tel" value="">
        input class="gp_input_grid" id="cod4" name="cod4" maxlength="1" onKeyUp="javascript:pulacampo('cod4','cod5')" type="tel" value=""
        input class="gp_input_grid" id="cod5" name="cod5" maxlength="1" onKeyUp="javascript:pulacampo('cod5','cod6')" type="tel" value=""
        
      input class="gp_input_grid" id="cod6" name="cod6" maxlength="1" onKeyUp="javascript:pulacampo('cod6','pulou')" type="tel" value=""
       
       input type="hidden" name="dados" id="dados" value="<?=$_POST['cod1']; ?><?=$_POST['cod2']; ?><?=$_POST['cod3']; ?><?=$_POST['cod4']; ?>"

      GOSTARIA DE SABER SE É ISSO MESMO, OU O QUE FALTA. 
×

Important Information

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

  I accept