changement image suivant clic

**chartoire** · 06/11/2007, 18h57

Bonjour

Je souhaite afficher une image
la faire remplacer par une autre suivant le clic que l'on utilise

le nombre d'image est limit� � 22

clic gauche on avance d'une image
clic gauche on recule � l'image pr�c�dente

en boucle, lorsque les 22 sont pass�es on recommence au d�but

lorsque le choix est fait on a un bouton OK qui doit m�moriser
le choix effectu�

Merci pour votre aide

chartoire

**mael94420** · 07/11/2007, 12h07

lorsque le choix est fait on a un bouton OK qui doit m�moriser
le choix effectu�

A partir de la, je ne comprend plus.

Pour ton soucis, il faut que tu regarde du cot� de javascript pour savoir comment s'accaparer des clic de souris.
Une fois que tu as ca, il te faut sur l'�v�nement en cours appeller une fonction AJAX qui va cherche l'image suivante ou pr�c�dente et qui remplace l'actuel par la nouvelle.

J'ai �t� tr�s g�n�rale, je t'ai donn� la marche � suivre. N'h�site pas si tu as des questions mais avec tout ca, google pourra bien t'aider.

**chartoire** · 07/11/2007, 17h51

lorsque le choix est fait on a un bouton OK qui doit m�moriser
le choix effectu�

J'explique

l'utilisateur a choisi l'image qui l'interesse avec des clic avant arriere
lorsqu'il est positionn� sur l'image qui lui convient il doit pouvoir
transmettre son choix au reste du programme afin de visualiser le texte qui est en correspondance avec l'image

merci

Chartoire

**fAdoua123** · 09/11/2007, 11h39

j espere que ca va t aider:

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<html>
<head>
<title>Galerie</title>
<script type='text/javascript'>
var num=1;    // numéro du fichier courant
var min=1;   // nombre minimum de fichiers
var max=11;  // nombre maximum de fichiers
var extension = '.png';
 
/* fonction qui permet d'afficher les images */
function Affich() {
var file;
 
// on ajoute des '0' afin de créer le nom du fichier
if(num<10) file = '00'+num+extension;
if(num<100 && num>=10) file = '0'+num+extension;
 
// on affiche l'image correspondante
document.getElementById('affich').innerHTML="<img src='"+file+"' alt='"+file+"' />";
}
 
/* fonction qui permet de revenir à l'image précédente */
function Prev() {
// si num>min car il ne faudrait pas descendre en dessous
if(num>min) {
num--;    // on décrémente num
Affich();  // et on fait appel à la fonction Affich()
}
}
 
/* fonction qui permet d'aller à l'image suivante */
function Next() {
// si num<min car il ne faudrait pas allerr au dessus
if(num<max) {
num++;    // on décrémente num
Affich();    // et on fait appel à la fonction Affich()
}
}
</script>
</head>
    <body onload="Affich()">
        <div id="body">
            <div id="affich">
                <!-- //-->
            </div>
 
            <hr />
 
            <div id="nav">
                <p>
                    <a href="#" title="Précédant" onclick="Prev()"> <span><-</span> Précédant</a>
                    <span> | </span>
                    <a href="#" title="Suivant" onclick="Next()">Suivant <span>-></span></a>
                </p>
            </div>
        </div>
    </body>
</html>

**chartoire** · 10/11/2007, 17h52

merci pour votre aide

l'id�e est de faire avancer ou reculer d'une image suivant le clic de souris sur l'image
on clic sur l'image avec le bouton gauche on avance � l'image suivante
on clic avec le bouton droit on recule d'une image

le tout en boucle
si on est � la derni�re image et que l'on avance d'une avec la souris on affiche l'image 1
si on est a la premiere que l'on recule d'une image avec la souris on affiche la derni�re

Merci encore

**sachav** · 10/11/2007, 18h51

J'esp�re que le code que j'ai conffectionn� vous convient.
Je l'ai test�.
Il vous suffit de nommer vos images 0.jpg, 1.jpg, 2.jpg, ainsi de suite.
Changer les variables suivies de commentaires.

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div id="galerie"></div>
<script language="javascript">
<!--
var ext=".jpg" // EXTENSION DES IMAGES
var imgnb=0 // NE PAS TOUCHER A CA
var maximgs=10 // NOMBRE TOTAL D'IMAGES
function loadGalery() {
 
document.getElementById("galerie").innerHTML="<img src=\""+imgnb+ext+"\" onClick=\"nextImage()\" onContextMenu=\"prevImage()\" alt=\""+imgnb+"\"></img>"
}
function nextImage() {
(imgnb==maximgs)?(imgnb=0):(imgnb++)
document.getElementById("galerie").innerHTML="<img src=\""+imgnb+ext+"\" onClick=\"nextImage()\" onContextMenu=\"prevImage()\" alt=\""+imgnb+"\"></img>"
}
function prevImage() {
(imgnb==0)?(imgnb=0):(imgnb--)
document.getElementById("galerie").innerHTML="<img src=\""+imgnb+ext+"\" onClick=\"nextImage()\" onContextMenu=\"prevImage()\" alt=\""+imgnb+"\"></img>"
 
}
window.onload=loadGalery
//-->
</script>

**Auteur** · 10/11/2007, 19h35

Envoy� par chartoire

merci pour votre aide

l'id�e est de faire avancer ou reculer d'une image suivant le clic de souris sur l'image
on clic sur l'image avec le bouton gauche on avance � l'image suivante
on clic avec le bouton droit on recule d'une image

le tout en boucle
si on est � la derni�re image et que l'on avance d'une avec la souris on affiche l'image 1
si on est a la premiere que l'on recule d'une image avec la souris on affiche la derni�re

Merci encore

- Place le nom de tes images dans un tableau
- Utilise un compteur, que tu incr�mentes ou d�cr�mente selon qu tu avances ou recule dans ton diaporama.
- Teste la valeur du compteur pour v�rifier que tu ne d�passes pas les limites du tableau (comme dans le code pr�c�dent).
- Plut�t que de faire des

Code javascript :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
 
document.getElementById("galerie").innerHTML="<img src=\""+imgnb+ext+"\" onClick=\"nextImage()\" onContextMenu=\"prevImage()\" alt=\""+imgnb+"\"></img>"

qui n'est pas ce qu'il y a de mieux (en plus la balise </img> n'existe pas). Syntaxe :

Code html :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
 
<img id="Image" src="mon_image.jpg" alt="" title="tire" />

Place un id sur ta balise img et modifie le src.
- Le clic droit est r�serv� au menu contextuel. M�me avec le code ci-dessus (intercepter l'�v�nement oncontextmenu), je ne suis pas s�r que tu pourras emp�cher son apparition. Utilise des boutons (<input type="button" value="bouton" />) "suivant" et "pr�c�dent".

changement image suivant clic

JavaScript

Vue hybride

Discussions similaires

Partager

Partager