Changer image lors du clique sur un bouton
Résolu/Fermé
dragazor
-
21 août 2009 à 01:16
dragazor Messages postés 49 Date d'inscription mercredi 29 juillet 2009 Statut Membre Dernière intervention 23 juillet 2013 - 4 nov. 2009 à 22:55
dragazor Messages postés 49 Date d'inscription mercredi 29 juillet 2009 Statut Membre Dernière intervention 23 juillet 2013 - 4 nov. 2009 à 22:55
A voir également:
- Changer image lors du clique sur un bouton
- Changer dns - Guide
- Piratage facebook changer mot de passe - Guide
- Changer clavier qwerty en azerty - Guide
- Image iso - Guide
- Acronis true image - Télécharger - Sauvegarde
6 réponses
glodybiss
Messages postés
440
Date d'inscription
vendredi 6 juin 2008
Statut
Membre
Dernière intervention
29 juillet 2015
9
21 août 2009 à 01:51
21 août 2009 à 01:51
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
avion-f16
Messages postés
19243
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
8 avril 2024
4 496
21 août 2009 à 01:58
21 août 2009 à 01:58
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"/>
jeangilles
Messages postés
816
Date d'inscription
samedi 21 juin 2008
Statut
Membre
Dernière intervention
17 juillet 2012
185
21 août 2009 à 10:09
21 août 2009 à 10:09
<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>
jeangilles
Messages postés
816
Date d'inscription
samedi 21 juin 2008
Statut
Membre
Dernière intervention
17 juillet 2012
185
21 août 2009 à 16:28
21 août 2009 à 16:28
<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
jeangilles
Messages postés
816
Date d'inscription
samedi 21 juin 2008
Statut
Membre
Dernière intervention
17 juillet 2012
185
21 août 2009 à 16:46
21 août 2009 à 16:46
Ben chez moi ce code là marche ...
dragazor
Messages postés
49
Date d'inscription
mercredi 29 juillet 2009
Statut
Membre
Dernière intervention
23 juillet 2013
5
4 nov. 2009 à 22:55
4 nov. 2009 à 22:55
j'avais oublié de répondre, mais en tt cas ca m'a aidé, fallait juste redémarrer firefox. Merci
