Bonjour à tous!
Je débute sous jQuery, et j'ai donc un problème de débutant:
J'utilise un script qui me permet de faire apparaitre puis disparaitre une image a l'aide d'un bouton.
Jusque là tout va bien, mais je dois appliquer cet effet à plusieurs images dans a même page.
L'effet ne fonctionne que sur la première.
voici la démo: http://novaefactory.fr/test/test.html
En fait j'ai besoin d'appliquer cet effet au moins une vingtaine de fois dans la même page, et je souhaiterai donc attribuer un id variable a l'image a faire disparaitre puis apparaitre
Est-ce la bonne méthode?
Si oui, comment faire?
Merci d'avance
Paco
Je débute sous jQuery, et j'ai donc un problème de débutant:
J'utilise un script qui me permet de faire apparaitre puis disparaitre une image a l'aide d'un bouton.
Jusque là tout va bien, mais je dois appliquer cet effet à plusieurs images dans a même page.
L'effet ne fonctionne que sur la première.
voici la démo: http://novaefactory.fr/test/test.html
En fait j'ai besoin d'appliquer cet effet au moins une vingtaine de fois dans la même page, et je souhaiterai donc attribuer un id variable a l'image a faire disparaitre puis apparaitre
Est-ce la bonne méthode?
Si oui, comment faire?
Merci d'avance
Paco
<html>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#bouton").click(function () {
if ($("#contenu").is(":hidden")) {
$("#contenu").fadeIn();
}else {
$("#contenu").fadeOut();
return false;
}
});
});
</script>
<style>
body{
font-size: 14px;
}
input{
width: 125px;
background: red;
color: #FFF;
border: 1px solid #000;
cursor: pointer;
font-size: 13px;
}
.mesBouttons{
width: 130px;
border: 1px solid #000;
padding: 5px;
margin: 10px;
}
.contenu{
width: 450px;
height: 100px;
border: 1px solid #000;
padding: 5px;
margin: 5px;
}
</style>
</head>
<body>
<!---------------------Ce bouton fait un fadeIn puis un fadeeOut--------------->
<div class="mesBouttons"><input type="button" id="bouton" value="Fade image 01" /></div>
<img id="contenu" src="images/aquila01.jpg" width="200" height="200"/ >
<!---------------------Ce bouton ne fait rien... --------------->
<div class="mesBouttons"><input type="button" id="bouton" value="Fade image 02" /></div>
<img id="contenu" src="images/aquila02.jpg" width="200" height="200"/ >
</body>
</html>