chargement de photos sur action d'un <select>

**bibile** · 17/12/2005, 23h09

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 ?

**Zenol** · 18/12/2005, 01h31

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

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.

**Auteur** · 18/12/2005, 01h54

bonjour,

voici un petit exemple de ce que tu peux faire :

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
 
<html>
<head>
<title></title>
<script type="text/javascript">
function AffImage()
{
  var elt = document.getElementById("MonSelect");
  var elt2 = document.getElementById("MonDiv");
 
  elt2.innerHTML = "<img src="+elt.value+">";
 
}
</script>
</head>
 
<body>
<form>
<select id="MonSelect">
<option value="img1.jpg">Image 1</option>
<option value="img2.jpg">Image 2</option>
<option value="img3.jpg">Image 3</option>
<option value="img4.jpg">Image 4</option>
</select>
 
<input type="button" value="Afficher" name="bnom" onclick="AffImage()">
</form>
 
<div id="MonDiv">&nbsp;</div>
 
</body>
 
</html>

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

**Zenol** · 18/12/2005, 01h57

Voila

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? ^^)

**Auteur** · 18/12/2005, 02h28

désolé je ne voulais pas être méchant

**bibile** · 18/12/2005, 09h43

wouah !
merci pour tout !
je vais integrer tout ca

**Zenol** · 18/12/2005, 11h10

Envoyé par Auteur

désolé je ne voulais pas être méchant

Pourquoi tu serais méchan? ^^

**Auteur** · 19/12/2005, 13h43

j'ai cru que tu avais mal pris la remarque :

Et il n'y a pas de faute de frappe

(je vais mettre ça sur le compte de l'heure (tardive) à laquelle ont été postés les messages.)

**bibile** · 19/12/2005, 21h55

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 ?

**Zenol** · 19/12/2005, 22h23

En fait c'est la faute du navigateur

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.

**javatwister** · 19/12/2005, 22h24

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 :

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
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> 
 
<title>...</title>
 
<script type="text/javascript"> 
 
function affich(val){ 
 
document.getElementById("im").src=val+".gif"; 
location.href="#pict";
} 
 
</script> 
 
</head> 
 
<body> 
 
<form id="f" action="" style="text-align:center;margin-top:500px"> 
 
<p>
<a id="init"></a>
</p>
 
<select  style="margin-top:100px" id="MonSelect" onchange="affich(this.value)"> 
<option value="sm01">Image 1</option> 
<option value="sm02">Image 2</option> 
<option value="sm03">Image 3</option> 
<option value="sm04">Image 4</option> 
</select> 
 
</form> 
 
<div style="text-align:center;margin-top:1000px;padding-bottom:500px;">
 
<a id="pict" href="#init">
<img id="im" src="sm01.gif" alt="" />
</a>
 
</div> 
 
</body> 
 
</html>

**Auteur** · 20/12/2005, 11h56

intéressant ce code. Par contre juste une remarque à propos des ancres :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
<p>
<a id="init"></a>
</p> 
 
......
 
<a id="pict" href="#init">
<img id="im" src="sm01.gif" alt="" />
</a>

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 :

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

1
2
3
4
5
6
7
8
9
10
 
<p>
<a name="init"></a>
</p> 
 
......
 
<a id="pict" href="#init">
<img id="im" src="sm01.gif" alt="" />
</a>

même remarque pour l'ancre "pict" :

Code :

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

<a name="pict" href="#init">......</a>

**javatwister** · 20/12/2005, 11h58

tu remarqueras que l'ancre fonctionne; id est valide w3c et remplace exactement name;

**siddh** · 20/12/2005, 11h59

les attributs name tendent a etre remplacés par des attributs id

EDIT
grilled

**javatwister** · 20/12/2005, 12h01

**Auteur** · 20/12/2005, 19h04

Envoyé par javatwister

tu remarqueras que l'ancre fonctionne; id est valide w3c et remplace exactement name;

bon c'est vrai je n'ai pas testé le code de l'ancre

. Ceci dit, j'ignorais que je pouvais remplacer pour une ancre name par id, merci pour l'info.

chargement de photos sur action d'un <select>

JavaScript

Vue hybride

Discussions similaires

Partager

Partager