Jump to content
AlexandreHenrique

mudar atributo SRC de uma imagem

Recommended Posts

Boa noite galera, 

preciso que minha função receba o valor do atributo src de uma determinada imagem (dentre várias), e atribua esse valor capturado em outra imagem;

Tenho uma álbum de fotos, com vária miniaturas e uma imagem acima, grande, (sem src definido).

Ao clicar em uma das miniaturas quero que a mesma carrega na imagem grande; 

Fiz um esquema gráfico que explica melhor

Sem título-8.png

Share this post


Link to post
Share on other sites

Basicamente você pode deixar um Listener no evento 'click' ou mouseover do JS e chamar a função que bem enteder...

 

Ex:

<!DOCTYPE HTML>
<html lang="pt-BR">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>

<img src="imagem.png" id="img1" />
<img src="imagem2.png" id="img2" />


	<script type="text/javascript">
	
		function myCustomFunc(){
			alert(this.src);
		}
		document.getElementById('img1').addEventListener('click', myCustomFunc);
		document.getElementById('img2').addEventListener('click', myCustomFunc);

	</script>
</body>
</html>

Demo Online:

https://fiddle.jshell.net/L04uysot/

 

Obviamente fazer com o atributo class ex (class="ampliar_img")  faz muito mais sentido

 

Recomendo a leitura:

https://github.com/gabrieldarezzo/helpjs-ravi

 

Share this post


Link to post
Share on other sites

eu gosto de fazer mais ou menos assim

 

<img src="" id="imgSetada">
<img src="img1.jpg" id="foto1" onClick="imgLoad(this.id);"><img src="img2.jpg" id="foto2" onClick="imgLoad(this.id);"><img src="img3.jpg" id="foto3" onClick="imgLoad(this.id);">
<script>
    function imgLoad(id){
        document.getElementById("imgSetada").src = document.getElementById(id).src; 
    }
</script>

e pode ainda criar uma função pra varrer uma pasta e adicionar  as imagens na linha de imagens sem precisar botar uma a uma também

Share this post


Link to post
Share on other sites

@marsolim 

Evita de usar camelCase (onClick != onclick)  nos atributos inline do JS/HTML , alguns browser não suportam.

 

Fora isso é questão de gosto mesmo.

A técnica do inline é muito adotada por Frameworks do mercado hehe ng-click 

 

 

18 minutos atrás, marsolim disse:

e pode ainda criar uma função pra varrer uma pasta e adicionar  as imagens na linha de imagens sem precisar botar uma a uma também

Boa! 

 

Ai mete um eventListener no class, algo assim, jQuery é para os fracos!

(brincadeira kkk to treinando pra ficar menos dependente dele kkk)

<!DOCTYPE HTML>
<html lang="pt-BR">
<head>
	<meta charset="UTF-8">
	<title></title>
	
	<style type="text/css">
		.ativarAlert {
			cursor: -webkit-grab;
		}
		
	
	</style>
</head>
<body>

<img src="https://avatars0.githubusercontent.com/u/4562367" id="img1" class="ativarAlert"/>
<img src="https://avatars2.githubusercontent.com/u/75607" id="img2" class="ativarAlert"/>


	<script type="text/javascript">
	
		var fields = document.getElementsByClassName("ativarAlert");
		for (var i = 0; i < fields.length; i++) {
			fields[i].addEventListener('click',  function() {
				alert(this.src);
			}, false);
		}
	</script>
</body>
</html>

Demo:

https://fiddle.jshell.net/yLmrfrao/

 

Share this post


Link to post
Share on other sites

bem na verdade eu falava de pegar as imagens duma pasta e meter elas na lista de miniaturas que vai ser clicada hehehe tipo assim

 

<div id="imgList"></div>
var folder = "images/";
$.ajax({
    url: folder,
    success: function (data) {
        $(data).find("a").attr("href", function (i, val) {
            if( val.match(/\.(jpe?g|png|gif)$/) ) { 
                $("#imgList").append( "<img src='"+ folder + val +"'>" );
            } 
        });
    }
});

 

aí não precisa colocar isso

 

src="img1.jpg" id="foto1" onClick="imgLoad(this.id);"><img src="img2.jpg" id="foto2" onClick="imgLoad(this.id);"><img src="img3.jpg" id="foto3" onClick="imgLoad(this.id);">

 

basta colocar a div que vai receber as imagens da pasta automaticamente e quando tiver mais imagens pra botar é só upar elas pra pasta e não precisa mexer no html mais, não sei se isso que tu também pensou pois me pareceu que entendestes que a ideia era pegar a lista de imagens colocadas no html hehehe

Share this post


Link to post
Share on other sites

Entendi errado na 1x
Ai editei e escrevi 'boa' -> boa ideia hehe /BOAAAA

Olha o onClick novamente ali husahuhas

 

http://stackoverflow.com/questions/87934/javascript-and-why-capital-letters-sometimes-work-and-sometimes-dont

Share this post


Link to post
Share on other sites

oh mas esse bagulho aí é doido pois já teve vez que o script só funfou com inicial do nome do evento maiúsculo tipo onClick, onBlur... isso uns anos atrás mas na verdade sempre usei maiuculo só nos atributos html porque dentro do js mesmo é preciso seguir as regras case do próprio hehehe

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 kleberaugus
      Vi na internet que para pegar o src de uma imagem se coloca o seguinte código: 
      <form action="/action_page.php">
        <input type="file" name="pic" accept="image/*">
        <input type="submit">
      </form>  
      e isso vai retornar pic="nome do arquivo", o problema é que eu não sei como usar isso com a tag <img> para escolher esse local de arquivo... como eu posso implementar isso? Eu só quero colocar uma imagem qualquer no site através do input file mas não sei como faço...
    • By Cesar Melo
      Olá.
      Estou tentar fazer um atributo de um objeto receber um objeto de outra classe. Mas dependendo da forma que faço isso, recebo uma mensagem de erro.
      class PedidoFilho { public $id; public $tipo; } class PedidoPai { public $id; public $tipo; public $pedidoFilho public function getPedFilho() { $this->pedidoFilho= new PedidoFilho(); } } $pedido= new PedidoPai(); $pedido->getPedFilho();  
    • By AlexandreHenrique
      Olá 
      tenho uma função JS para mudar valor de atributos de uma imagem.
      A imagem é essa:
      <img src="capa.jpg"  data-desc="2018 - Aventura" alt="titulo do filme" onclick="teste(this,2);" id="video" />  A função:
      function teste(arg,p){ var pos = p; document.getElementById('video').src="novacapa.jpg"; // muda src document.getElementById('video').alt="Titulo do novo video"; // muda alt     document.getElementById('video').attr('data-desc', 'valor a atribuir'); // ??? } A função muda o "src" e "alt" mas não consigo mudar o valor do atributo 'data-desc", como faço isso?
      Essa é a linha em questão: 
      document.getElementById('video').attr('data-desc', 'valor a atribuir'); 
       
       
    • By JOWEB
      Pessoal gostaria de mudar essa frase Você pode gostar também   
      no Tema ColorMag, consigo fazer isso pelo editor do wordpress ou terei que entra nas sub pasta via FTP e qual caminho seria?
      Tendei usar o inspetor do navegador, seguei nessa parte:
       
      <h4 class="related-posts-main-title"><i class="fa fa-thumbs-up"></i><span>Você pode gostar também</span></h4> 
    • By matheus.leite
      Boa tarde pessoal !
      Sou novo aqui no forum, então se eu postar algo errado me perdoe.
      Amigos, sou novo com php e estou tendo problemas em achar uma solução. 
      Tenho um array: 
      $arrayCarro = array( array( "Cor"=>$gol->getCor(), "Marca"=>$gol->getMarca(), "Modelo"=>$gol->getModelo(), "Ano"=>$gol->getAno() ), array( "Cor"=>$fusca->getCor(), "Marca"=>$fusca->getMarca(), "Modelo"=>$fusca->getModelo(), "Ano"=>$fusca->getAno() ), array( "Cor"=>$tg->getCor(), "Marca"=>$tg->getMarca(), "Modelo"=>$tg->getModelo(), "Ano"=>$tg->getAno() ) ); e eu passo ele para um objeto do tipo 'Corrida', até ai tudo bem. Porém eu tenho uma function chamada 'ultrapassagem' e não faço a menor ideia de como poderia, de fato, fazer essa "ultrapassagem".
      Este é o 'index.php':
      <?php require 'classes/Carro.php'; require 'classes/Corrida.php'; $gol = new Carro(); $fusca = new Carro(); $tg = new Carro(); $gol->setCor("Rosa"); $gol->setMarca("Wolks"); $gol->setAno(2018); $gol->setModelo("Sedan"); $fusca->setCor("Azul"); $fusca->setMarca("Wolks"); $fusca->setAno(2018); $fusca->setModelo("4X4"); $tg->setCor("vermelho"); $tg->setMarca("TG sedan"); $tg->setAno(2098); $tg->setModelo("Flat"); $arrayCarro = array( array( "Cor"=>$gol->getCor(), "Marca"=>$gol->getMarca(), "Modelo"=>$gol->getModelo(), "Ano"=>$gol->getAno() ), array( "Cor"=>$fusca->getCor(), "Marca"=>$fusca->getMarca(), "Modelo"=>$fusca->getModelo(), "Ano"=>$fusca->getAno() ), array( "Cor"=>$tg->getCor(), "Marca"=>$tg->getMarca(), "Modelo"=>$tg->getModelo(), "Ano"=>$tg->getAno() ) ); $corrida = new Corrida($arrayCarro); $corrida->posicaoCarro(); Esta é a Classe Corrida:
      <?php class Corrida { private $arrayCarros; public function __construct($arrayCarros) { $this->arrayCarros = $arrayCarros; if(count($arrayCarros) > 0) { echo 'A corrida pode começar pois existe mais de um carro !'.PHP_EOL; } else { echo 'A corrida não pode começar pois existe apenas um carro :('.PHP_EOL; exit; } } public function iniciarCorrida() { echo 'Começando a corrida ...'.PHP_EOL; echo '1, 2, 3 e JÁ!!.' .PHP_EOL; echo '- A corrida começou ! Confira a posição inicial de cada carro: '.PHP_EOL; echo PHP_EOL; $this->posicaoCarro(); } public function ultrapassagem() { /*Aqui eu tentei fazer algo, porem ele apenas retira o último elemento do array e o avança para direita, foi o mais próximo que consegui de uma 'Ultrapassagem' */ $quantidadeCarros = count($this->arrayCarros); $auxiliar = $this->arrayCarros[$quantidadeCarros - 1]; for ($i = $quantidadeCarros -1; $i > 0 ; $i--) { $this->arrayCarros[$i] = $this->arrayCarros[$i -1]; } $this->arrayCarros[0] = $auxiliar; echo 'Aconteceu uma ultrapassagem'.PHP_EOL; print_r($this->arrayCarros); } //Apenas uma função para 'melhorar' a exibição dos arrays. public function posicaoCarro() { $i = 1; foreach ($this->arrayCarros as $key => $value){ echo 'Posição ['. $i++."] => "; print_r("Marca: " . $value['Marca'] . ", "); print_r("Modelo: " . $value['Modelo'] . ", "); print_r("Ano: " . $value['Ano'] . " "); print_r("Cor: " . $value['Cor'] . " " .PHP_EOL); echo PHP_EOL; } } OBS: Existem N carros.
      Um carro só pode passar o carro que esta na sua frente, por ex: Carro[1] pode  ultrapassar o Carro[0], porém  o Carro [2] não pode ultrapassar o Carro[0], apenas o Carro[1]. Após a ultrapassagem a lista dos carros deve ser reordenada.
       
      Alguém poderia me ajudar ? 
      Desde já agradeço !
×

Important Information

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