Affichage d'une photo à partir d'une vignette

Le premier forum francophone sur l'éditeur de pages Web multiplateforme (Linux, Mac OS X, Windows) qui monte… KompoZer, héritier de Nvu, permet de créer vos pages Web graphiquement (wysiwyg) sans aucune connaissance du langage HTML.

Modérateur : chinon37

fred07

Affichage d'une photo à partir d'une vignette

Message par fred07 »

Bonjour,

Je me casse la tête à vouloir construire une page qui affiche :
-sur la gauche un tableau de vignettes (mini photos) dans un tableau
-sur la droite la photo correspondante en plein format

présentation typique d'une gallerie de photos.

Je n'arrive pas à le faire simplement et sans frame.

La construction actuelle de ma page est basée sur un tableau de 2 colonnes, la première composée d'un tableau où chaque cellule comporte une vignette et la seconde où je souhaiterai voir s'afficher l'image

Merci de votre aide

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; Wanadoo 6.2)
Ymai
Tyrannosaurus Rex
Messages : 4220
Inscription : 12 mars 2005, 11:36

Message par Ymai »

Bonjour
Une solution avec un tableau me paraît difficile à trouver si le nombre de miniature est grand. La colonne contenant celles-ci étant donc très haute, il faudra assurément faire défiler une grande partie de la page pour atteindre les dernières d'entre-elles cependant que la photo principale elle-même ne sera dès lors plus visible. Je ne chercherais donc plus dans cette direction, d'autant que les tableaux ne devraient jamais servir à faire de la mise en page.

Une solution sans "frames" pourrait être du type suivant:

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta name="generator"
 content="HTML Tidy for Windows (vers 1st July 2004), see www.w3.org">
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title></title>
  <style type="text/css">
#gauche {
  width: 150px;
  overflow: scroll;
  float: left;
}
#droite {
  border: 1px solid blue;
  margin-left: 150px;
  width: 650px;
}
  </style>
</head>
<body>
<div id="gauche"> Miniatures </div>
<div id="droite">Photo </div>
</body>
</html>
Un bloc "gauche" contenant les miniatures. Le type "Débordement: défiler" est sélectionné dans l'onglet "Boîte" de l'éditeur CSS.
Un bloc "droite" contenant la photo sélectionnée avec une marge gauche égale à la largeur de la zone "gauche". Toujours dans l'onglet "Boîte".

Je suis toutefois un peu sceptique sur la solution si le nombre de miniature est vraiment très grand. Il me semble avoir testé cela, en son temps: le rafraîchissement de la zone des miniatures, à chaque changement de photo, était assez long.
ymai
« Un enfant de cinq ans comprendrait cela ! Allez me chercher un enfant de cinq ans ! »
Groucho Marx.
Répondre

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 5 invités