Changer une image

**esperal** · 02/12/2012, 18h47

Bonjour,
Je n'arrive pas à faire quelque chose de très simple : changer une image. Voici mon code :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script type="text/javascript" src="js/libs/jquery-1.8.2.js"></script>
<script>
        $(function() {
                $("#changer").bind("click",function(event){
                        $('#image').css("src","images/02.jpg");
                });
        });
</script>
</head>
    <body>
    <div id="offre-image" class="divImages">
	 <img id="image" src="images/01.jpg" alt=""/>
     </div>
	<div id="changer"><a href="">changer l'image</a></div>
 </body>
</html>

j'ai essayé sans plus de succès avec attr :
(le lien vers l'image 2 est bon)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
$('#image').attr("src","images/02.jpg");
$('#offre-image').find('img').attr('src','images/02.jpg');

Merci de votre aide.

**NoSmoking** · 02/12/2012, 19h22

Bonjour,
il te faut annihiler le comportement par défaut les lien pour que cela puisse être pris en compte.

Il te faut passer par la méthode attr() pour accéder à la SRC de l'IMG

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
	$(function() {
		$("#changer").on("click",function(event){
			$('#image').attr("src","http://www.developpez.net/template/images/logo.png");
			event.preventDefault();
		});
	});

**esperal** · 03/12/2012, 09h50

ça marche, merci !

Cherchant à comprendre, j'ai trouvé qu'event.preventDefault() permet d'arrêter la propagation du clic.
Par contre, je ne comprends pas la différence entre css() (qui ne marche pas ici) et attr().