Changer image lors du clique sur un bouton
Résolu
dragazor
-
dragazor Messages postés 49 Date d'inscription Statut Membre Dernière intervention -
dragazor Messages postés 49 Date d'inscription Statut Membre Dernière intervention -
Bonjour à tous,
j'aimerais savoir comment il serait possible de changer l'image contenu dans un div en cliquant sur un bouton contenu par un autre div. Biensur cela pour eviter d'avoir à recharger la page à chaque fois.
Je ne sais pas trop quel langage utiliser pour faire cela car je suis novice.
j'espère que vous pourrez m'aider en me donnant des explications pour que je comprennes, je vous remercie par avance.
j'aimerais savoir comment il serait possible de changer l'image contenu dans un div en cliquant sur un bouton contenu par un autre div. Biensur cela pour eviter d'avoir à recharger la page à chaque fois.
Je ne sais pas trop quel langage utiliser pour faire cela car je suis novice.
j'espère que vous pourrez m'aider en me donnant des explications pour que je comprennes, je vous remercie par avance.
A voir également:
- Changer image lors du clique sur un bouton
- Changer dns - Guide
- Changer carte graphique - Guide
- Image iso - Guide
- Changer wifi chromecast - Guide
- Changer extension fichier - Guide
6 réponses
Pense a lire les cours sur le CSS
https://www.google.fr/?gws_rd=ssl#hl=fr&q=tutoriel+css+&meta=&fp=1&cad=b
https://www.google.fr/?gws_rd=ssl#hl=fr&q=tutoriel+css+&meta=&fp=1&cad=b
Voilà un petit script fait rapidement.
Dans ton head :
Ajoute id="galerie" sur ta balise img.
Et ajoute onclick="imageSuivante();" sur le bouton "Suivant", onclick="imagePrecedente();" sur le bouton "Precedent" :
Dans ton head :
<script type="text/javascript"><!--
image = 1;
images = Array('|',
'image1.png',
'image2.png',
'image3.png',
'|');
function imageSuivante() {
new_image = images[image + 1]
if(new_image != '|') {
document.getElementById('galerie').src = new_image;
image = image + 1;
}
}
function imagePrecedente() {
new_image = images[image - 1]
if(new_image != '|') {
document.getElementById('galerie').src = new_image;
image = image - 1;
}
}
// --></script>
Ajoute id="galerie" sur ta balise img.
<img src="image1.png" alt="" id="galerie" />
Et ajoute onclick="imageSuivante();" sur le bouton "Suivant", onclick="imagePrecedente();" sur le bouton "Precedent" :
<input type="button" onclick="imagePrecedente();" value="Précédent" /> <input type="button" value="Suivant" onclick="imageSuivante();" />
merci pour ta reponse,
a partir de ta réponse j'ai un peu compris le fonctionnement de javascript et j'ai donc esssayer de faire mon propre script adapté à ce que je cherche mais il ne fonctionne pas. l'image ne change pas.
<script type="text/javascript">
function contenu(num)
{
switch (num){
case a: document.getElementById("test").src="images/menu/1.png";
break;
default alert(message derreur);
break;
}
}
</script>
<a href="JAVASCRIPT:contenu('a');"><img src="images/menu/coupe1.png" style="margin-left:12px; border:none;"/></a>
//j'ai remplacé JAVASCRIPT:contenu('a'); par contenu('a') mais ca ne donne rien non plus.
<img src="images/menu/coupe14.png" id="test"/>
a partir de ta réponse j'ai un peu compris le fonctionnement de javascript et j'ai donc esssayer de faire mon propre script adapté à ce que je cherche mais il ne fonctionne pas. l'image ne change pas.
<script type="text/javascript">
function contenu(num)
{
switch (num){
case a: document.getElementById("test").src="images/menu/1.png";
break;
default alert(message derreur);
break;
}
}
</script>
<a href="JAVASCRIPT:contenu('a');"><img src="images/menu/coupe1.png" style="margin-left:12px; border:none;"/></a>
//j'ai remplacé JAVASCRIPT:contenu('a'); par contenu('a') mais ca ne donne rien non plus.
<img src="images/menu/coupe14.png" id="test"/>
<a onclick="contenu('a');">
Il te manque aussi un : après ton mot clef default
default: alert(message derreur);
Il te manque aussi un : après ton mot clef default
default: alert(message derreur);
Merci pour ta reponse Jeangilles mais cela ne résoud pas mon problème, mon image ne change toujours pas.
voici a koi ressemble le code maintenant:
<script type="text/javascript">
function contenu(num)
{
switch (num){
case a: document.getElementById("test").src="images/menu/1.png";
break;
default: alert(message derreur);
break;
}
}
</script>
<a onclick="contenu('a')";><img src="images/menu/coupe1.png" style="margin-left:12px; border:none;"/></a>
<div id="image">
<img src="images/menu/coupe14.png" id="test"/>
</div>
voici a koi ressemble le code maintenant:
<script type="text/javascript">
function contenu(num)
{
switch (num){
case a: document.getElementById("test").src="images/menu/1.png";
break;
default: alert(message derreur);
break;
}
}
</script>
<a onclick="contenu('a')";><img src="images/menu/coupe1.png" style="margin-left:12px; border:none;"/></a>
<div id="image">
<img src="images/menu/coupe14.png" id="test"/>
</div>
<head>
<script type="text/javascript">
function contenu(num)
{
switch (num){
case 'a': document.getElementById("test").src="images/menu/1.png";
break;
default: alert('message derreur');
break;
}
}
</script>
<a onclick="contenu('a')";><img src="images/menu/1.png" style="margin-left:12px; border:none;"/></a>
<div id="image">
<img src="images/menu/coupe14.png" id="test"/>
</div>
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question