[HTML] problème avec ScrollBarre

**bchristo** · 06/12/2005, 16h30

Bonjour,

J'ai réalisé une petite galerie photo: un <div></div> avec une scrollBarre et toutes les miniatures ... et un <div></div> avec l'affichage de la photo en taille réelle.

Vous allez dire que je suis tatillon ... mais voici mon petit soucis:

Lorsque j'utilise la scrollBarre de mon <div></div> avec les miniatures pour sélectionner une photo à afficher, la photo s'affiche très bien mais la scrollBarre de mon <div></div> avec les miniatures remonte tout en haut de ce <div></div> ... et quand y a une petite centaine de photo ... ben c'est vraiment pas pratique et pas très navigable.

Existe-t-il une solution pour bloquer la scrollBarre ou elle se trouve ?

Merci
@++

**Auteur** · 06/12/2005, 23h12

bonjour,

je pense que si ta barre de défilement revient au point de départ c'est que lors du clic sur l'image tu recharges toute la page. Si tu ne chargeais que le contenu du <div> contenant ta photo en taille réelle ?

voici un petit script :

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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
 
<html>
<head>
<title></title>
 
<style type="text/css">
/*styles pour la photo en taille réelle*/
/* div conteneur */
.photo{
float: left;
width: 300px;
height: 300px;
}
 
/* image placée dans le div (plus petite que le div) */
/* seul width est fixé pour éviter les déformations de l'image affichée*/
.image{
width: 280px;
border-style: ridge;
border-width: 4px;
border-color: #AADDFF;
}
 
/* style de la liste des vignettes */
.liste{
float: left;
overflow: auto;
width: 160px;
height: 300px;
border-style: solid;
border-width: 1px;
border-color: #000000;
margin-left: 20px;
}
 
 
.vignette{
width: 140px;
}
 
/* les vignettes sont encadrées par des balises <p> pour une meilleure présentation */
p{
margin-top: 2px;
margin-bottom: 2px;
}
</style>
 
<script type="text/javascript">
function Clic(Image){
var elt = document.getElementById("idPhoto");
elt.innerHTML="<img class=\"Image\" src=\""+Image.src+"\">";
 
//alert(Image.src);
}
</script>
</head>
 
<body>
<div id="idPhoto" class="photo">
&nbsp;
</div>
 
<div class="liste">
<p><img class="vignette" onclick="Clic(this)" src="photo1.JPG"></p>
<p><img class="vignette" onclick="Clic(this)" src="photo2.JPG"></p>
<p><img class="vignette" onclick="Clic(this)" src="photo3.JPG"></p>
 
<!--liste des photos-->
 
<p><img class="vignette" onclick="Clic(this)" src="photoN.JPG"></p>
</div>
</body>
 
</html>

j'utilise la fonction innerHTML pour ne changer que le contenu du <div> "idPhoto".
Ce script fonctionne sous IE et FireFox. Et la barre de défilement de ta liste ne revient pas au point de départ.

**bchristo** · 07/12/2005, 09h52

oula ... oui tu dois surement avoir raison.

Le problème est que je gère le système de miniature + affichage des photos taille réelle ... à l'aide de PHP et de variables passé en paramètre en rechargeant la page

...

**Auteur** · 07/12/2005, 10h15

quant à moi je ne connais pas du tout php.

Peut-être peux tu reprendre le code ci-dessus et le transcrire en php ?

génère ta page et ta liste avec le php, puis gère le clic en JS. Possible ça ?

**bchristo** · 07/12/2005, 11h32

hm disons que je suis un peu rétissant à l'utilisation de JS ... de un je suis pas très bon et de deux ... faut que l'utilisateur l'est activé ...

merci pour ton aide,
@++

**Auteur** · 10/12/2005, 18h17

Envoyé par bchristo

hm disons que je suis un peu rétissant à l'utilisation de JS ... de un je suis pas très bon

Une bonne partie de ce code est du CSS (pour la mise en page) et HTML. Quant au script JS, il est tout simple et fait 2 lignes (function clic() ) .

Code :

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

1
2
3
4
5
6
7
<script type="text/javascript">
function Clic(Image){
var elt = document.getElementById("idPhoto");
elt.innerHTML="<img class=\"Image\" src=\""+Image.src+"\">";
 
}
</script>

Avec la focntion innnerHTML, tu remplaces tout ce qui est entre les balises div nommées "idPhoto" par ton nouveau code.

En plus, il n'y a pas de problème de compatibilité avec d'autres navigateurs.

Envoyé par bchristo

deux ... faut que l'utilisateur l'est activé ...

mouais... en toute franchise, je ne pense pas que tu rencontreras beaucoup de personnes l'ayant désactivé.

[HTML] problème avec ScrollBarre

HTML

Discussions similaires

Partager

Partager