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".

**sachav** · 10/11/2007, 20h13

Il est vrai que la solution proposée par Auteur est plus sophistiquée que la mienne.
Elle consisterai à créer un Array imgs et d'insérer le nom de chaque image à l'intérieur de la base de données. Ensuite, il suffirai d'avancer d'une ligne quand on exécute onClick, et de reculer d'une ligne quand on exécute onContextMenu.

**Auteur** · 10/11/2007, 21h59

Envoyé par sachav

Elle consisterai à créer un Array imgs et d'insérer le nom de chaque image à l'intérieur de la base de données.

je n'ai jamais parlé de base données. Il s'agit d'un simple tableau javascript :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
var tabImg=newArray("img1.jpg", "img2.jpg", "img3.jpg", "img4.jpg");

et le compteur est l'indice du tableau.

changement image suivant clic

JavaScript

Discussions similaires

Partager

Partager