O meu DOM tem este aspecto:
<div id="d1">
<div class="c1">
<a href="#"><img src="img1_on.gif"></a>
<a href="#"><img src="img2_on.gif"></a>
</div>
</div>
Quando alguém clica numa imagem, eu quero que a imagem src mude para <img src="imgx_off.gif">
onde x
representa a imagem número 1 ou 2.
Isto é possível ou tenho que usar o CSS para mudar as imagens?
Você pode usar a função jQuery's attr(). Por exemplo, se a sua tag img
tem um atributo id
de 'my_image', você faria isso:
<img id="my_image" src="first.jpg"/>
Então você pode mudar o src
da sua imagem com jQuery como este:
$("#my_image").attr("src","second.jpg");
Para anexar isto a um evento click
, você poderia escrever:
$('#my_image').on({
'click': function(){
$('#my_image').attr('src','second.jpg');
}
});
Para girar a imagem, você poderia fazer isso:
$('img').on({
'click': function() {
var src = ($(this).attr('src') === 'img1_on.jpg')
? 'img2_on.jpg'
: 'img1_on.jpg';
$(this).attr('src', src);
}
});
I'irá mostrar-lhe como alterar a imagem src
, para que ao clicar numa imagem ela gire através de todas as imagens que estão no seu HTML (na sua classe d1
id e c1
especificamente)... se você tem 2 **ou mais imagens*** no seu HTML.
I'irá também mostrar-lhe como limpar a página após o documento estar pronto, para que apenas uma imagem seja exibida inicialmente.
**O código completo***
$(function() {
var $images = $("#d1 > .c1 > a").clone();
var $length = $images.length;
var $imgShow = 0;
$("#d1 > .c1").html( $("#d1 > .c1 > a:first") );
$("#d1 > .c1 > a").click(function(event) {
$(this).children().attr("src",
$("img", $images).eq(++$imgShow % $length).attr("src") );
event.preventDefault();
});
});
**A avaria***
Criar uma cópia dos links contendo as imagens (nota: você também poderia fazer uso do atributo href dos links para funcionalidade adicional... por exemplo [exibir o link de trabalho abaixo de cada imagem][1]):
var $images = $("#d1 > .c1 > a").clone(); ;
Verifique quantas imagens estavam no HTML e crie uma variável para rastrear qual imagem está sendo mostrada:
var $length = $images.length; var $imgShow = 0;
Modifique o documento's HTML para que somente a primeira imagem esteja sendo mostrada. Apagar todas as outras imagens.
$("#d1 > .c1").html( $("#d1 > .c1 > a:first") );
Anexe uma função para lidar quando o link da imagem é clicado.
$("#d1 > .c1 > a").click(function(event) {
$(this).children().attr("src", $("img", $images).eq(++$imgShow % $length).attr("src") );
event.preventDefault();
});
O coração do código acima está utilizando ++$imgShow % $length
para percorrer o objeto jQuery que contém as imagens. O ++$imgShow % $length
primeiro aumenta nosso contador em um, depois modifica esse número com quantas imagens existem. Isto irá manter o índice de índice resultante ciclando de 0
a length-1
, que são os índices do objeto $images
. Isto significa que este código irá funcionar com 2, 3, 5, 10, ou 100 imagens... pedalando através de cada imagem em ordem e reiniciando na primeira imagem quando a última imagem for alcançada.
Adicionalmente, .attr()
é utilizado para obter e definir o "src" atributo das imagens. Para escolher elementos entre o objeto $images', eu defino
$images' como jQuery context utilizando o formulário $(selector, contexto)
. Então eu utilizo [.eq()
] `]4 para escolher apenas o elemento com o índice específico I'm interessado.
Você também pode armazenar os src
s em um array.
[jsFiddle exemplo com 3 imagens][6]
E aqui's como incorporar os hrefs das etiquetas de ancoragem em torno das imagens:
[exemplo jsFiddle][7]
Você também pode fazer isso com jQuery desta forma:
$(".c1 img").click(function(){
$(this).attr('src','/new/image/src.jpg');
});
Você pode ter uma condição se houver vários estados para a fonte da imagem.