Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

AlexandreHenrique

mudar atributo SRC de uma imagem

Por , em Javascript

Recommended Posts

AlexandreHenrique    1

AlexandreHenrique
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

gabrieldarezzo    255

gabrieldarezzo
Postado

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

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

marsolim    110

marsolim
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

gabrieldarezzo    255

gabrieldarezzo
Postado

@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/

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

marsolim    110

marsolim
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

gabrieldarezzo    255

gabrieldarezzo
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

marsolim    110

marsolim
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript

  • Conteúdo Similar

    • Sapinn
      Como mudar a cor de um campo quando clicar nele
      Por Sapinn
      Eu tenho um form e toda vez que alguém clicar no input eu quero que a borda de baixo mude a cor e quando ele clicar fora quero que volte ao normal quero isso para todos os campo de todos os foms que eu tiver
    • fnatan
      PHP - Ler atributo da classe
      Por fnatan
      Olá galera, novato em PHP aqui.
       
      Fiz uma classe e gostaria de ler o valor de uma determinada variável, porém essa variável será alterada por alguns métodos enquanto ela estiver instanciada, mas quando leio o valor dela essas alterações não são visualizadas.
       
      segue exemplo:
       
      <?php $test = new classeTeste; echo "valor inicial de myVar: ".$test->myVar."</br>"; $test->alterar_myVar(); echo "myVar após chamada do método: ".$test->myVar."</br>"; class classeTeste { public $myVar = 1000; public function alterar_myVar(){ $myVar = 20000; echo "Valor myVar foi alterado para: ".$myVar." pelo método alterar_myVar</br>"; } } ?> Valeu e Abraço!
    • kleberaugus
      Input file de uma img, como colocar o src na tag img
      Por 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...
    • Cesar Melo
      Atributo de um objeto recebendo uma classe
      Por 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();  
    • AlexandreHenrique
      Alterar valor de atributo data-*
      Por 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'); 
       
       
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito