Changer une image

Version imprimable

Changer une image

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

Code:

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:

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

Merci de votre aide.

02/12/2012, 19h22
NoSmoking
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:

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(); }); });
03/12/2012, 09h50
esperal

ça marche, merci ! :ccool:

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().
03/12/2012, 10h00
Bovino

Ben... le nom est pourtant assez explicite et la doc relativement claire et compréhensible :koi:

.css() sert à modifier les CSS appliqués à un élément ! Bien entendu, la source d'une image n'étant pas définie en CSS, ça ne peut pas fonctionner !