8792 sujets

Développement web côté serveur, CMS

Bonjour à toutes et à tous,

J'ai un petit soucis avec une page que je suis en train de créer. Elle se présente de la manière suivante

- Une colonne à gauche (en vert) avec un menu
- Une ligne (en gris) ou apparaissent des miniatures de photos
- Une autre partie (en violet "lavande") où apparaissent les photos selon qu'on a cliqué sur une miniature.

Le code de la page est le suivant :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<title>Deux zones avec scroll en CSS</title>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<style type="text/css">
/* CSS issu des tutoriels css.alsacreations.com */
html, body {
height: 100%;
width: 100%;
overflow: auto;
}
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
}
img {
border: none;
margin: 0;
padding: 0;
}
#droite {
height: 100%;
margin-left: 200px;
overflow: auto;
background-color:#FFFF66;
}
#contenuhaut {
height: 50px;
background-color: #999999;
}
#contenubas {
padding: 20px;
overflow: auto;
background-color: #CCCCFF;
}
#menu {
position: absolute;
left:0;
background-color: #99CCCC;
width: 200px;
height: 100%;
}
#head li {
display: inline;
}
p {
text-decoration: none;
vertical-align: middle;
color: #000000;
}
a:link {
text-decoration: none;
color: #000000;
}
a:visited {
text-decoration: none;
color: #000000;
}
</style>
</head>
<body>
<div id="menu">
</div>
<div id="droite">
<?php
if (!isset($_GET['page'])) $page= '01'; else $page= $_GET['page']; 
 switch($page)
{
case '01':include ('txt/01.php');break;
case '02':include ('txt/02.php');break;
case '03':include ('txt/03.php');break;
case '04':include ('txt/04.php');break;
case '05':include ('txt/05.php');break;
case '11':include ('txt/11.html');break;
}
?>
</div>
</body>
</html>


Pour tester, j'ai crée la page 01.php dont voici le code :


<div id="contenuhaut">
<ul id="head">
<li></li>
</ul>
</div>
<div id="contenubas">
<?php
if (!isset($_GET['page'])) $page= '11'; else $page= $_GET['page']; 
 switch($page)
{
case '11':include ('txt/11.html');break;
}
?>
</div>


Et cette page, la page 11.html supposée contenir la grande image. Voici la code :


<p><b>Installation du stand</b></p><br/>
<br/>


Je souhaite donc faire en sorte que, quand l'internaute clique à gauche par exemple sur "Installation du Stand", apparaissent dans la partie grise de droite, les miniatures relatives à la partie "Installation du Stand", puis lorsqu'il clique sur une de ces miniatures, que la photo agrandie apparaisse dans la partie violette en dessous de la partie grise. Sur la page principale , la miniature et la photo apparaissent correctement. En cliquant sur "Installation du Stand" , la miniature apparaît également correctement. Mais, en cliquant sur cette miniature , la miniature disparaît, la grande photo s'affiche à la place, je perds donc le contenu de la partie grise.
Et c'est là mon problème. Je souhaite que les photos agrandies s'affichent, et que les miniatures soient toujours visibles.
Je pédale dans la choucroute sans savoir où je me dirige Smiley decu
Quelqu'un verrait-il le problème qui se pose dans ma page? Je suis à l'écoute de toute aide Smiley cligne
En espérant avoir été assez explicite sur le problème en question, n'hésitez pas à me corriger Smiley biggrin

Merci d'avance pour votre aide!

Fred
Modifié par drf_ (15 Feb 2006 - 08:54)
Je me permets d'ajouter des éléments.
J'ai modifié l'architecture de la page.

J'ai également ajouté une photo dans "Notre Stand" pour tester. En cliquant sur la miniature dans la rubrique "Notre Stand", l'image agrandie s'affiche, mais la miniature de l'autre rubrique s'affiche à la place. Il y a du mieux, maintenant les miniatures et les grandes images s'affichent Smiley biggrin . Mais il me reste encore à faire en sorte que la bonne série de miniatures s'affiche au bon moment. En d'autres termes, que la page 21.html s'affiche quand la page 02.php est incluse, et non pas la page 01.php.
Auriez-vous une petite idée pour se faire?
Modifié par drf_ (15 Feb 2006 - 08:54)