Version imprimable
Bonjour,
J'ai 100 photos a afficher, une par une, sur une demande dans un <select>.
la photo n'est pas en haut de la page (il faut scroller vers le bas un peu).
Je voudrais que sur une demande de changement de photo dans le <select>, la nvlle photo s'affiche, sans avoir a recharger toute la page et sans avoir a re-scroller vers les bas. Il faudrait que la page soit restée au meme endroit et juste changer la photo.
comment est-ce que je peux faire ca ?
La ou tu veut aficher ta photo, tu fait un div :
<div id="PhotoShow"><img src="photopardéfault"/></div>
En suite dans ton select tu fait un : onchange ou onclic = "show(this.value);"
this.value est le contenu du select :D
Et ta fonction javascript show :
function show(Val)
{
Pict = getelementbyif("PhotoShow");
Pict.innerhtml = "<img src=\""+PVal+".png\"/>";
}
Nb: Code non tester, avec surement des fautes de frape/orthographe.
Tu peut aussi faire un teste avec l'id sur la balise img et voir si tu a un memebre url, se qui simplifirais la fonction.
bonjour,
voici un petit exemple de ce que tu peux faire :
Grâce à la fonction innerHTML appliquée sur "MonDiv", tu ne modifies que le contenu de "MonDiv" en fonction de l'image sélectionnée dans la liste. L'attribut value de la liste contient le nom de l'image à afficher.Code:
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
La fonction AffImage(), permet :
1- de récupérer l'id du select (elt)
2- de récupérer l'id du div contenant l'image (elt2)
3- de modifier le code du div "MonDiv" grâce à innerHTML. Le chemin de l'image à afficher est récupéré grâce à elt.value.
testé sous IE et FF. Et il n'y a pas de faute de frappe :wink:
Voila :D
Sinon, si tu veut un changement automatique dès que l'utilisateur clic, tu fait un onclick="AffImage(this.value)"
Et tu remplace la fonction par
function AffImage(Val)
{
var elt2 = document.getElementById("MonDiv");
elt2.innerHTML = "<img src="+Val+">";
}
Voila(Jespère qu'il n'y a pas de faute de frappe? ^^)
désolé je ne voulais pas être méchant :oops:
wouah !
merci pour tout !
je vais integrer tout ca :D
Pourquoi tu serais méchan? ^^Citation:
Envoyé par Auteur
j'ai cru que tu avais mal pris la remarque :
(je vais mettre ça sur le compte de l'heure (tardive) à laquelle ont été postés les messages.)Citation:
Et il n'y a pas de faute de frappe :wink:
salut !
apres implementation, ca marche pas mal. il faut que je trouve comment faire un pre-load des images.
mais surtout, lorsque je change d'image, la page se repositionne en haut.
evidement, je peux jouer sur le scroll, mais y a-t-il mieux ?
En fait c'est la faute du navigateur :D
Sinon voit si c'est possible de modifier la propriétée url des images, je pensse que sa ne devrais plus remonter.
Et si sa remonte toujours, esseille de fixer la taille de l'image.
ptit essai (les marges sont excessives juste pour tester que le scroll fonctionne quels que soient l'espacement entre formulaire et image et la longueur de la page);
quand tu veux rejoindre le select, clique sur l'image;
http://javatwist.imingo.net/test2.htm
Code:
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
intéressant ce code. Par contre juste une remarque à propos des ancres :
si je clique sur l'image, la page doit remonter vers l'ancre "init" (href="#init"). Normalement l'ancre ne doit-elle pas être désignée par l'attribut "name" pour que le "href" soit valide ?Code:
2
3
4
5
6
7
8
9
10
même remarque pour l'ancre "pict" :Code:
2
3
4
5
6
7
8
9
10
Code:<a name="pict" href="#init">......</a>
tu remarqueras que l'ancre fonctionne; id est valide w3c et remplace exactement name;
les attributs name tendent a etre remplacés par des attributs id ;)
EDIT
grilled
:mrgreen:
bon c'est vrai je n'ai pas testé le code de l'ancre :oops: . Ceci dit, j'ignorais que je pouvais remplacer pour une ancre name par id, merci pour l'info.Citation:
Envoyé par javatwister