Bonjour tout le monde. J'ai fait une petite galerie en JS, mais tout ne se passe pas comme je le veux :p
J'ai en effet a afficher 8 miniatures de photos, par groupe de 4, et lorsque l'on clique sur l'une, s'affiche l'image en taille réelle.
Ma première rangée de miniatures affiche bien les 4 premières, mais sur la seconde, je n'ai que la 8èeme, au bout à sa place, et els images 5 6 7 sur une troisième rangée au dessous.
Voici les deux codes:
Le JS
<!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" >
<head>
<title>Diaph-Images, la photographie on-line</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="author" content="Nom Prenom">
<meta name="keywords" content=""/>
<meta name="Description" content="Le site de Jean-Pierre Souchu, photographe au Mans"/>
<meta name="robots" content="index"/>
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
<link rel="icon" type="image/png" href="favicon.ico" />
<style type="text/css">
form, .pages
{
text-align:center;
}
a
{
color:white
}
</style>
<script language="JavaScript1.2">
function l_image(a,txt) {
document.images["photo"].src=a;
document.getElementById("titre_photo").innerHTML=txt;
}
</script>
</head>
<body>
<?php
include("banniere.jpg");
?>
<?php
include("menu.php");
?>
<p align="center">
Acheter le lot de 96 cartes (12x8) à 96 euros.
<form name="_xclick" target="paypal" action="" method="post">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="business" value="">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="item_name" value="lot de cartes de condoléances">
<input type="hidden" name="amount" value="80">
<input type="image" src="https://www.paypalobjects.com/fr_XC/i/btn/sc-but-01.gif " border="0" name="submit" alt="Effectuez vos paiements via PayPal : une solution rapide, gratuite et sécurisée">
<input type="hidden" name="add" value="1">
</form></p>
<div id="corps">
<div id="galerie">
<ul id="galerie_mini">
<li><a href="#" onclick="l_image('images/CONDOLEANCES001.jpg','Carte 1')" title="Carte 1">
<img src="thumbs/CONDOLEANCES001.jpg" border="0" style="margin: 5px"></a></li>
<li><a href="#" onclick="l_image('images/CONDOLEANCES002.jpg','Carte 2')" title="Carte 2">
<img src="thumbs/CONDOLEANCES002.jpg" border="0" style="margin: 5px"></a></li>
<li><a href="#" onclick="l_image('images/CONDOLEANCES003.jpg','Carte 3')" title="Carte 3">
<img src="thumbs/CONDOLEANCES003.jpg" border="0" style="margin: 5px"></a></li>
<li><a href="#" onclick="l_image('images/CONDOLEANCES004.jpg','Carte 4')" title="Carte 4">
<img src="thumbs/CONDOLEANCES004.jpg" border="0" style="margin: 5px"></a></li>
<li><a href="#" onclick="l_image('images/CONDOLEANCES005.jpg','Carte 5')" title="Carte 5">
<img src="thumbs/CONDOLEANCES005.jpg" border="0" style="margin: 5px"></a></li>
<li><a href="#" onclick="l_image('images/CONDOLEANCES006.jpg','Carte 6')" title="Carte 6">
<img src="thumbs/CONDOLEANCES006.jpg" border="0" style="margin: 5px"></a></li>
<li><a href="#" onclick="l_image('images/CONDOLEANCES007.jpg','Carte 7')" title="Carte 7">
<img src="thumbs/CONDOLEANCES007.jpg" border="0" style="margin: 5px"></a></li>
<li><a href="#" onclick="l_image('images/CONDOLEANCES008.jpg','Carte 8')" title="Carte 8">
<img src="thumbs/CONDOLEANCES008.jpg" border="0" style="margin: 5px"></a></li>
</ul>
<dl id="photo">
<div id="titre_photo" style="font: italic 2.5em/1.5em Georgia, serif ; color: #dcb ;">Cliquez sur les miniatures pour les afficher</div>
<dd><img id="big_pict" name="photo" /></dd>
</dl>
</div>
</div>
<?php
include("pied_de_page.php");
?>
</body>
</html>
Le Css correspondant:
/*design galerie */
div#galerie
{
position: relative;
left: 25%;
width: 420px ;
padding: 10px ;
margin: 15px 3px ;
text-align: center ;
font: 0.9em Georgia, serif ;
}
ul#galerie_mini
{
margin: 0 ;
padding: 0 ;
list-style-type: none ;
}
ul#galerie_mini li
{
float: left ;
}
ul#galerie_mini li a img
{
margin: 2px 1px ;
border: 1px solid #dcb ;
}
dl#photo
{
clear: both ;
margin: 0 auto ;
}
dl#photo dt
{
font: italic 2.5em/1.5em Georgia, serif ;
color: #dcb ;
}
dl#photo dd
{
margin: 0 ;
position: relative;
right: 50%;
}
(Informations personnelles supprimées, Modération CCM )
Merci d'avance!
Afficher la suite
