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
Image iso - Guide
Copiez l'image dans un logiciel d'édition d'images ou un outil en ligne comme js paint ou pixlr e. remplissez les cases en suivant le code couleur. des cases supplémentaires vont se remplir automatiquement. que représente le dessin ? ✓ - Forum Windows
Frédéric cherche à faire le buzz sur les réseaux sociaux. il a ajouté une image de manchots sur une image de plage. retrouvez l'image originale de la plage. que cachent les manchots ? - Forum Graphisme
Recherche à partir d'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 ?

Site de confiance ou non ?

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

formule de calcule

Sur la plage...

Discussions similaires

Newsletters