changement image suivant clic

Version imprimable

06/11/2007, 18h57
chartoire

changement image suivant clic

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
07/11/2007, 12h07
mael94420

Citation:

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.
07/11/2007, 17h51
chartoire

changement image suivant clic

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

j espere que ca va t aider:

Code:

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>

10/11/2007, 17h52
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

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:

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>

10/11/2007, 19h35
Auteur
Citation:

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:

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:

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".
10/11/2007, 20h13
sachav

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.
10/11/2007, 21h59
Auteur
Citation:

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.

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

1 2 var tabImg=newArray("img1.jpg", "img2.jpg", "img3.jpg", "img4.jpg");
et le compteur est l'indice du tableau.