Bonjour,

J'ai trouvé un bout de script sur le web et n'étant pas un pro du javascript je voudrais l'adapter à mon cas : je souhaiterai que lorsqu'on sélectionne un produit dans une liste déroulante le produit s'affiche en dessous de cette liste, j'utilise donc un peu de javascript + des div (visibility:hidden) mais le souci c'est que les produits qui sont cachés lors du chargement de la page occupe quand même la place sous ma liste déroulante (même s'ils ne sont pas visibles), je ne sais si je suis bien clair mais bon, voici mon code :
<html>
<head>
<script type="text/javascript">
<!--
var encours="";
function AffLayer(produit) {
var nomlayer=produit.options[produit.selectedIndex].value;
if (document.all) {
if (encours!="") {document.all[encours].style.visibility="hidden";}
encours=nomlayer;
if (nomlayer!="") {document.all[encours].style.visibility="visible";}
}
if (document.layers) {
if (encours!="") {document.layers[encours].visibility="hide";}
encours=nomlayer;
if (nomlayer!="") {document.layers[encours].visibility="show";}
}
if (document.getElementById) {
if (encours!="") {document.getElementById(encours).style.visibility="hidden";}
encours=nomlayer;
if (nomlayer!="") {document.getElementById(encours).style.visibility="visible";}
}
}
//-->
</script>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Exemple</title>
</head>
<body>
<table border="0" align="center" cellpadding="2" cellspacing="1" width="98%">
<tr>
<td align="center"><select name="produit" class="listederoulante" onChange="AffLayer(this)">
<option value="nul" selected>--- Sélectionnez un produit ---</option>
<option value="nul">---------------------------------------------</option>
<option value="produit1">Produit 1</option>
<option value="produit2">Produit 2</option>
<option value="produit3">Produit 3</option>
</select></td>
</tr>
</table><br><br>
<div id="produit1" style="position:relative; top:0px; left:0px; visibility:hidden;">
<table border="0" align="center" cellpadding="2" cellspacing="1" width="98%">
<tr>
<td align="center">Le texte et les images du produit n°1...</td>
</tr>
<tr>
<td align="left">avec photos</td>
</tr>
<tr>
<td align="left">avec légendes</td>
</tr>
<tr>
<td align="left">avec descriptif</td>
</tr>
<tr>
<td align="left">avec prix</td>
</tr>
<tr>
<td align="left">etc...</td>
</tr>
</table><br><br>
</div>
<div id="produit2" style="position:relative; top:-175px; left:0px; visibility:hidden;">
<table border="0" align="center" cellpadding="2" cellspacing="1" width="98%">
<tr>
<td align="center">Le texte et les images du produit n°2...</td>
</tr>
<tr>
<td align="left">avec photos</td>
</tr>
<tr>
<td align="left">avec légendes</td>
</tr>
<tr>
<td align="left">avec descriptif</td>
</tr>
<tr>
<td align="left">avec prix</td>
</tr>
<tr>
<td align="left">etc...</td>
</tr>
</table><br><br>
</div>
<div id="produit3" style="position:relative; top:-350px; left:0px; visibility:hidden;">
<table border="0" align="center" cellpadding="2" cellspacing="1" width="98%">
<tr>
<td align="center">Le texte et les images du produit n°3...</td>
</tr>
<tr>
<td align="left">avec photos</td>
</tr>
<tr>
<td align="left">avec légendes</td>
</tr>
<tr>
<td align="left">avec descriptif</td>
</tr>
<tr>
<td align="left">avec prix</td>
</tr>
<tr>
<td align="left">etc...</td>
</tr>
</table><br><br>
</div>
<table border="0" align="center" cellpadding="2" cellspacing="1" width="98%">
<tr>
<td align="center">Le texte de la page continue ici...</td>
</tr>
</table><br><br>
</body>
</html>
Lorsq'on clique dans la liste ça marche bien le seul souci est qu'il a un grand espace blanc (vide) entre la liste déroulante et le dernier de mes div, j'aimerai donc supprimer (ou réduire) cette espace blanc (vide), quelqu'un peut-il m'aider ?

Merci pour vos réponses.