Mon DOM ressemble à ceci :
<div id="d1">
<div class="c1">
<a href="#"><img src="img1_on.gif"></a>
<a href="#"><img src="img2_on.gif"></a>
</div>
</div>Lorsque quelqu'un clique sur une image, je veux que le src de l'image soit changé en <img src="imgx_off.gif"> donde x représente le numéro de l'image 1 ou 2.
Est-ce possible ou dois-je utiliser le CSS pour modifier les images ?
Vous pouvez utiliser l'outil de jQuery attr() fonction. Par exemple, si votre img a une balise id de "mon_image", vous feriez ceci :
<img id="my_image" src="first.jpg"/>Ensuite, vous pouvez modifier le src de votre image avec jQuery comme ceci :
$("#my_image").attr("src","second.jpg");Pour l'attacher à un click événement, vous pourriez écrire :
$('#my_image').on({
'click': function(){
$('#my_image').attr('src','second.jpg');
}
});Pour faire pivoter l'image, vous pouvez procéder comme suit :
$('img').on({
'click': function() {
var src = ($(this).attr('src') === 'img1_on.jpg')
? 'img2_on.jpg'
: 'img1_on.jpg';
$(this).attr('src', src);
}
});
L'une des erreurs courantes commises par les personnes qui changent la source de l'image est de ne pas attendre le chargement de l'image pour effectuer des actions ultérieures telles que la modification de la taille de l'image, etc. Vous devrez utiliser jQuery .load() pour faire des choses après le chargement de l'image.
$('yourimageselector').attr('src', 'newsrc').load(function(){
this.width; // Note: $(this).width() will not work for in memory images
});Raison de l'édition : https://stackoverflow.com/a/670433/561545
Oui. Cela a finalement fait l'affaire. .destroy() ne va pas assez loin. Effacer tout le html et recommencer l'init fonctionne en fait quand on échange des images de différentes tailles et autres.
IF il n'y a pas seulement jQuery ou d'autres frameworks tueurs de ressources - plusieurs kb à télécharger à chaque fois par chaque utilisateur juste pour une simple astuce - mais aussi du JavaScript natif( !):
<img src="img1_on.jpg"
onclick="this.src=this.src.match(/_on/)?'img1_off.jpg':'img1_on.jpg';">
<img src="img2_on.jpg"
onclick="this.src=this.src.match(/_on/)?'img2_off.jpg':'img2_on.jpg';">Cela peut être écrit de manière générale et plus élégante :
<html>
<head>
<script>
function switchImg(img){
img.src = img.src.match(/_on/) ?
img.src.replace(/_on/, "_off") :
img.src.replace(/_off/, "_on");
}
</script>
</head>
<body>
<img src="img1_on.jpg" onclick="switchImg(this)">
<img src="img2_on.jpg" onclick="switchImg(this)">
</body>
</html>
Je suis toujours surpris de voir combien de personnes sont incapables de lire une question et de donner la réponse demandée. Il me semblait évident (et vous aussi) que la question cherchait une solution générique, c'est pourquoi le PO a donné deux exemples. Et pourtant, tous les autres semblent non seulement ne pas avoir compris, mais ont donné une réponse qui ne répondait même pas à la question.
Je vais vous montrer comment changer l'image src de sorte que, lorsque vous cliquez sur une image, celle-ci effectue une rotation parmi toutes les images présentes dans votre code HTML (dans votre page d'accueil). d1 id et c1 spécifiquement)... que vous ayez 2 ou plus d'images dans votre HTML.
Je vous montrerai également comment nettoyer la page une fois le document prêt, afin qu'une seule image soit affichée initialement.
Le code complet
$(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();
});
});La répartition
Créez une copie des liens contenant les images (remarque : vous pouvez également utiliser l'attribut href des liens pour une fonctionnalité supplémentaire... par exemple afficher le lien de travail sous chaque image ) :
var $images = $("#d1 > .c1 > a").clone(); ;Vérifiez le nombre d'images dans le HTML et créez une variable pour savoir quelle image est affichée :
var $length = $images.length;
var $imgShow = 0;Modifiez le HTML du document de façon à ce que uniquement la première image est affichée. Supprimez toutes les autres images.
$("#d1 > .c1").html( $("#d1 > .c1 > a:first") ); Liez une fonction à gérer lorsque le lien de l'image est cliqué.
$("#d1 > .c1 > a").click(function(event) {
$(this).children().attr("src", $("img", $images).eq(++$imgShow % $length).attr("src") );
event.preventDefault();
});Le cœur du code ci-dessus est l'utilisation de ++$imgShow % $length pour parcourir l'objet jQuery contenant les images. ++$imgShow % $length augmente d'abord notre compteur de un, puis il module ce nombre avec le nombre d'images existantes. Cela permet d'éviter que le cycle de l'index résultant soit 0 a length-1 qui sont les indices de la $images objet. Cela signifie que ce code fonctionnera avec 2, 3, 5, 10 ou 100 images... en parcourant chaque image dans l'ordre et en recommençant à la première image lorsque la dernière est atteinte.
En outre, .attr() est utilisé pour obtenir et définir l'attribut "src" des images. Pour choisir des éléments parmi les $images j'ai mis $images comme le Contexte de jQuery en utilisant le formulaire $(selector, context) . Ensuite, j'utilise .eq() pour choisir seulement l'élément avec l'index spécifique qui m'intéresse.
Vous pouvez également enregistrer le src dans un tableau.
Exemple de jsFiddle avec 3 images
Et voici comment incorporer les hrefs des balises d'ancrage autour des images :
Exemple de jsFiddle
Si vous voulez quelque chose qui utilise jQuery, vous pouvez vous tourner vers l'application Plugin jQuery Cycle, démo scrollRight (exemple en bas à droite)
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
0 votes
Si vous voulez quelque chose qui utilise jQuery, vous pouvez vous tourner vers l'application Plugin jQuery Cycle, démo scrollRight (exemple en bas à droite)
57 votes
JQuery("#my_image").attr("src", "first.jpg")
10 votes
Vous devriez vraiment accepter la réponse de jonstjohn :) Le nombre de votes positifs à la fois sur la question et la réponse indique que beaucoup de personnes ont rencontré ce problème. Cela améliorerait la question si une réponse était acceptée.
4 votes
Jusqu'à ce jour, c'est-à-dire
19th July, 2016 15:39 PMQuestion Upvotes Count 369 Et @jonstjohn Réponse Les Upvotes comptent 931 . Mais, quelle malchance, @OP ne s'est pas connecté après.Feb 17 '09 at 2:57.:(Et, @jonstjohn Répondez Remain Non marqué .0 votes
@Xcelled, le seul problème est que la réponse de jonstjohn ne répond pas à la question. C'est un point mineur mais qui mérite d'être souligné. Jetez un coup d'œil à la réponse d'inco, car c'est la seule ici qui répond correctement à la question.