11544 sujets

JavaScript, DOM et API Web HTML5

[jQuery] Changer src d'une image

Bonjour,

J'utilise ce petit script pour changer la source d'une image à l'aide de jQuery :

<img src="images/down_arrow.gif" width="18" height="18" onclick="$('#show_3').fadeToggle();$(this).attr('src','images/square_arrow.gif');" />


Comment faire pour remettre l'attribut src de l'image à son état d'origine si je click une 2me fois dessus ?

Merci
N'utilises pas le JS direct dans ton code déjà.

Rajoute un id à ton élément cliquable.

Puis enregistre le src avant de le remplacer, ou tu peux le placer dans une balise (style data-ex-src="" en HTML5).


var saveSrc = $('#tonid').attr('src'); // on sauvegarde le SRC par défaut

$('#tonid').click(function(e) { // on clic sur ton élément

var obj = $(this);

// ton code de changement
// tu y rajoutes une condition du genre
if (saveSrc != obj.attr('src')) {
// tu remets le saveSrc
} else {
// tu mets l'image qui change
}

});


Et ce onclick="" tu le vires Smiley smile non mais
Merci pour ta réponse, j'essai ça ce soir Smiley smile

Juste une "petite" précision, j'ai plusieurs images sur la même page avec le même src qui doivent changer.
Bonjour,

n’oublie pas le alt dans tes images.
sépare bien le contenu, la mise en forme et le script donc dans ta balise img pas de height et pas de onclick.
Pense à ceux qui naviguent au clavier en doublant la fonctionnalité du onclick avec un onkeyup.

Tu pourrais avoir un code html du genre :

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Changer au clic</title>
  <style>
    #show_3 {
      background-color:red;
      height:100px;
      width:100px
    }
    .changerAuClic img {
      height:18px;
      width:18px
    }
  </style>
</head>
<body>
    <div id="show_3"></div>
    <ul class="changerAuClic">
      <li><img id="changerAuClic0" src="images/down_arrow.gif"   alt="image0 qui change au clic"/></li>
      <li><img id="changerAuClic1" src="images/square_arrow.gif" alt="image1 qui change au clic"/></li>
      <li><img id="changerAuClic2" src="http://www.alsacreations.com/css/img/logo-alsacreations-com.png" alt="image2 qui change au clic"/></li>
    </ul>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script type="text/javascript"><!--
    var tabChangerAuClic = [
      [0, ["images/down_arrow.gif", "images/square_arrow.gif"]],
      [0, ["images/square_arrow.gif", "images/square_arrow.gif"]],
      [0, ["http://www.alsacreations.com/css/img/logo-alsacreations-com.png", "http://www.alsacreations.com/css/img/menu-a-apprendre.png", "http://www.alsacreations.com/css/img/menu-a-forum.png"]]
    ];
    window.onload = function () {
      "use strict";
      function changerAuClic(num) {
        "use strict";
        var obj = document.getElementById("changerAuClic" + num);
        $('#show_3').fadeToggle();
        tabChangerAuClic[ num ][0] += 1;
        obj.src = tabChangerAuClic[ num ][1][tabChangerAuClic[ num ][0] % tabChangerAuClic[ num ][1].length];
      }
      document.getElementById("changerAuClic0").onclick = function () {
        changerAuClic(0);
      };
      document.getElementById("changerAuClic0").onkeyup = function () {
        changerAuClic(0);
      };
      document.getElementById("changerAuClic1").onclick = function () {
        changerAuClic(1);
      };
      document.getElementById("changerAuClic1").onkeyup = function () {
        changerAuClic(1);
      };
      document.getElementById("changerAuClic2").onclick = function () {
        changerAuClic(2);
      };
      document.getElementById("changerAuClic2").onkeyup = function () {
        changerAuClic(2);
      };
    };
    // -->
  </script>
</body>
</html>

Modifié par adrien881 (21 Dec 2011 - 11:08)
Hayreon a écrit :
Merci pour ta réponse, j'essai ça ce soir Smiley smile

Juste une &quot;petite&quot; précision, j'ai plusieurs images sur la même page avec le même src qui doivent changer.

Dans ce cas, remplace l'id par une class
Bonsoir,

J'ai finalement opté pour la solution d'adrien881 mais, comment faire pour plusieurs images/div ?

Voilà ce que j'ai fait (à noter que j'utilise smarty):

{literal}
<script type="text/javascript">
<!--
var tabChangerAuClic = [[0, ["images/down_arrow.gif", "images/square_arrow.gif"]]];

window.onload = function () {
	"use strict";
	function changerAuClic(num) {
		"use strict";
		var obj = document.getElementById("changerAuClic" + num);
		$("#show_1").fadeToggle();
		tabChangerAuClic[ num ][0] += 1;
		obj.src = tabChangerAuClic[ num ][1][tabChangerAuClic[ num ][0] % tabChangerAuClic[ num ][1].length];
	}

	document.getElementById("changerAuClic0").onclick = function () {changerAuClic(0);};
	document.getElementById("changerAuClic0").onkeyup = function () {changerAuClic(0);};
};
// -->
</script>
{/literal}

{if $showpoll eq 'Y'}
<h1><img id="changerAuClic0" src="images/down_arrow.gif" width="18" height="18" alt="" /> {$sondage.question}</h1>
<div id="show_1">
	<form method="post" action="sondages.html">
		<p class="align-justify">
			{foreach from=$sondage.reponses item=rep}
				{if $sondage.canvote eq 'Y'}<input type="radio" name="choix" value="{$rep.reponse_id}" />{/if} ({$rep.nb_votes} | {$rep.pourcent}%) {if $rep.own eq 'Y'}<span style="color: darkgreen; font-weight: bold;">{/if}{$rep.reponse}{if $rep.own eq 'Y'}</span>{/if}<br />
			{/foreach}
			<br />
			{if $sondage.canvote eq 'Y'}
				<input type="hidden" name="sondage" value="{$sondage.sondage_id}" />
				<input type="hidden" name="action" value="vote" />
				<input type="submit" value="Vote" />
			{else}
				Vous avez d&egrave;j&agrave; voter ou vous n'&ecirc;tes pas connect&egrave;.
			{/if}
			<br /><br />{$sondage.total_votes} participant{if $sondage.total_votes > 1}s{/if}.
		</p>
	</form>
</div>
{/if}


Ce code fonctionne mais je n'arrive pas à l'adapté pour ce cas :

<img id="changerAuClic0" src="images/down_arrow.gif" width="18" height="18" alt="" />
<div id="show_1">&nbsp;</div>

<img id="changerAuClic1" src="images/down_arrow.gif" width="18" height="18" alt="" />
<div id="show_2">&nbsp;</div>

<img id="changerAuClic2" src="images/down_arrow.gif" width="18" height="18" alt="" />
<div id="show_3">&nbsp;</div>


Etc ....

Merci pour votre aide à tous les deux Smiley biggrin
Sujet clos
Aller à