Augmenter une valeur contenue dans le src au click d'une image

Résolu/Fermé

pacpacpac Messages postés 2 Date d'inscription vendredi 4 janvier 2013 Statut Membre Dernière intervention 5 janvier 2013 - 4 janv. 2013 à 20:44
Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 - 5 janv. 2013 à 19:02

Bonjour,

Pour les besoins d'un site web, je cherche à modifier une image de base par une série d'images en cliquant sur une bouton '+' ou '-' (qui est une image).

Il y a 6 images successives que j'aimerais afficher à chaque fois que l'utilisateur clique sur le "+" (images/n_1.png, si l'utilisateur clique sur + images/n_2.png s'affiche, si l'utilisateur clique encore sur +, images/n_3.png s'affiche, etc. etc). Dans la même idée, il y aurait un bouton moins.

J'arrive à modifier le .src de l'image mais que pour l'image n°2, ensuite je suis bloqué:

 <img src="images/n_1.png" id="guests">
<a href="#" onclick='javascript:document.getElementById("guests").src="images/n_2.png";'>

J'ai donc cherché à simplement faire un script pour modifier le n_1 en n_2 puis n_3 etc.. mais sans succès.
Je cherche également à limiter la possibilité du click sur le bouton "+" quand la valeur de l'image est à n_6 (le bouton deviendrait inclickable).

Est-ce que quelqu'un aurait des pistes pour ce genre de pb?

Un grand merci
Pac

A voir également:

Augmenter une valeur contenue dans le src au click d'une image
Comment agrandir une image - Guide
Insérer une image dans word sans bouger le texte - Guide
Image iso - Guide
Telecharger une image disque windows 10 fichier iso - Guide
Légender une image - Guide

3 réponses

Réponse 1 / 3

Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
5 janv. 2013 à 11:35

Salut, essayes comme ça:

<script type="text/javascript">
i=1; // variable globale pour mémoriser
function changer_src_image(){
	if(i<=6){
		i++;
	}else{
		i=6; //ou i=0 si tu veux recommencer à la 1
	}	
	document.getElementById("guests").src="images/n_"+i+".png";
}
</script>



<a href="#" onclick='javascript:changer_src_image();>

Réponse 2 / 3

pacpacpac Messages postés 2 Date d'inscription vendredi 4 janvier 2013 Statut Membre Dernière intervention 5 janvier 2013
5 janv. 2013 à 16:02

Un grand merci Alain, ca fonctionne parfaitement et j'ai réussi à faire la même chose avec le bouton 'moins'

Encore merci :)

Réponse 3 / 3

Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
5 janv. 2013 à 19:02

ok, alors passes le sujet en résolu

Discussions similaires

Retrouver l'image originale après avoir fait des modifications ?

Augmentation d'un score Snapchat : comment c'est possible ?

code couleur associé a une image

Formule calcul d'un total conditionnel

Dechiffrer une image caché