Jquery et la fonction .attr()

Bonjour,

Je suis en train de réaliser un petit script (tout simple pourtant), qui me permettra au clic sur une image d'afficher une autre image à la place, et ainsi de suite.

Image 1 --> Click --> Image2 -- > Click --> Image 3 --> Click -->Image1

L'image de départ (Image1 possède un id unique : logo1).

J'ai donc pour le passage à l'image 2 réalisé ce script :

<script type="text/javascript">
	$('#logo1').click(function() {
 	$("#logo1").attr("src", "img/logo2.png");
	});
</script>

Ce script fonctionne.

Mais je bloque pour le passage aux images suivantes, puisqu'elles sont appellées via jQuery et ne dispose donc pas d'id ...

Je me suis renseigné, et j'ai trouvé la fonction .attr().

J'essaye de l'utiliser comme cela, mais sans succès ...

$(document).ready(function() {
	$('#logo1').click(function() {
 	$("#logo1").attr("src", "img/logo2.png");
	$("#logo1").attr("id", "logo2'");
	});
	
	$('#logo2').click(function() {
 	$("#logo2").attr("src", "img/logo3.png");
	$("#logo2").attr("id", "logo3'");
	});
	
});	

Pourriez-vous me dire ou se situe mon erreur ?

Merci d'avance

J'ai réussi en faisant de la sorte :

<script type="text/javascript">
	$('#logo1').click(function() {
	$('#logo1').attr('src', 'img/logo2.png');
 	$('#logo1').attr('id', 'logo2');
		$('#logo2').click(function() {
		$('#logo2').attr('src', 'img/logo3.png');
		$('#logo2').attr('id', 'logo3');
		});
			$('#logo3').click(function() {
			$('#logo3').attr('src', 'img/logo4.png');
			$('#logo3').attr('id', 'logo4');
			});
				$('#logo4').click(function() {
				$('#logo4').attr('src', 'img/logo5.png');
				$('#logo4').attr('id', 'logo5');
				});
					$('#logo5').click(function() {
					$('#logo5').attr('src', 'img/logo.png');
					$('#logo5').attr('id', 'logo1');
					});
	});

Le soucis est que mon code est bien lourd ... (à partir de l'image 3, il faut cliquer deux fois pour que l'image suivante apparaisse ...).
Pourtant je précharge bien mes images avant, de la sorte :

<img src="img/logo2.png" style="display:none" alt=""> <!-- pré-chargement invisible de la 1er image de survol --> 
<img src="img/logo3.png" style="display:none" alt=""> <!-- pré-chargement invisible de la 1er image de survol --> 
<img src="img/logo4.png" style="display:none" alt=""> <!-- pré-chargement invisible de la 1er image de survol --> 
<img src="img/logo5.png" style="display:none" alt=""> <!-- pré-chargement invisible de la 1er image de survol -->

Est-il possible d'alléger mon script ?
Modifié par Fabien2 (02 Oct 2011 - 16:04)

Salut,

Il y a moyen d'alléger ton script. D'abord, pour déclencher l'événement onclick, je ne sélectionnerai pas l'image en me servant de son id, mais en employant un autre sélecteur (en jouant avec l'arborescence du DOM). Ensuite, dans la fonction appelée par l'événement, je récupère la valeur de l'attribut id grâce à la fonction attr () et isole le numéro avec la fonction native de JavaScript parseInt (), numéro que je stocke dans une variable. Puis, j'incrémente de 1 le nombre, tout en testant si la nouvelle valeur est 5 ou non (si c'est 5, j'affecte à la variable la valeur 1). Enfin, je modifie les attributs id et src en concaténant la nouvelle valeur numérique à la chaîne de caractère formant la nouvelle valeur de ces attributs. Soit dit en passant, puisque la fonction appelée par l'événement onclick concerne directement l'image, il est plus judicieux d'employer $(this) au sein de ladite fonction pour désigner l'image.

Quant au préchargement, je n'emploierai pas de code HTML, mais l'effectuerai purement en JavaScript, comme suit :

// Au chargement de la page
$(window).load (function ()
{
  // On définit un tableau comportant le nom des images à précharger
  var aImg = ['logo-2', 'logo-3', 'logo-4', 'logo-5'];
  
  // Pour chaque image, on va créer un nouvel objet Image
  for (var j = 0; j < aImg.length; j ++)
  {
    // On définit le chemin vers l'image
    var sSrc = 'img/' + aImg[j] + '.png';
    
    // Création de l'objet Image avec affectation du chemin vers l'image comme valeur de la propriété src dudit objet
    (aImg[j] = new Image ()).src = sSrc;
  }
});

Pourrais-tu m'expliquer comment réaliser ton script, en suivant ton raisonnement ?

Merci d'avance

Fabien2 a écrit :
Pourrais-tu m'expliquer comment réaliser ton script, en suivant ton raisonnement ?

Si tu t'attends à ce que je fasse tout le boulot à ta place, détrompe-toi. Je t'ai donné des pistes suffisantes pour qu'elles se traduisent d'elles-mêmes en code.

Je ne m'attendais pas forcément à ce que tu me fasses le boulot, mais juste quelques pistes.
Enfin ce n'est pas grave, je vais me débrouiller, merci quand même !

En fait, le soucis ne vient pas de la lourdeur de mon script je pense ...
Puisque j'ai beau bien laisser charger la page avant de faire quoique ce soit (les images ne font que 30ko) ...

A partir de l'image 3 je suis obligé de double cliquer, et non de cliquer qu'une seule fois ...