<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Onglets accordéon</title>
<style type="text/css">
<!--
* { margin:0; padding:0; list-style:none; }
body {
font-family: Comic sans MS;
font-size: 10px;
text-align: center;
}
#fond_principal{ /* le fond général */
padding:8px;
max-width:385px;
min-height:150px;
position:absolute;
z-index:5;
background-color: #1E619B;
border: 2px solid #36587D;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
}
.onglet{ /* l'onglet non sélectionné */
padding:5px 1px 5px 1px;
color:#FFF;
cursor:pointer;
font-weight:bold;
margin-right: 3px;
font-size: 10px;
background-color: #2E77AA;
border: 1px solid #053250;
-moz-border-radius:15px 15px 0px 0px;
-webkit-border-radius: 15px 15px 0px 0px;
border-radius: 15px 15px 0px 0px;
-moz-box-shadow: 0px 0px 6px #053250;
-webkit-box-shadow: 0px 0px 1px #053250;
box-shadow: 0px 0px 6px #053250;
}
.onglet:hover{ /* l'onglet survolé */
background:#36587D;
}
.onglet_actif{
background:#36587D; /* l'onglet sélectionné */
}
.contenu_accordeon { /* le fond accordéon où s'affiche le texte */
width:329px;
min-height:100px;
max-height:100px;
padding:10px;
background-color: #2E77AA;
border: 1px solid #053250;
-moz-border-radius:0px 0px 12px 12px;
-webkit-border-radius: 0px 0px 12px 12px;
border-radius: 12px 0px 12px 12px;
}
.onglet_container *{ /* est la position et largeur de l'onglet */
float:left;
width:52px;
}
-->
</style>
<script type="text/javascript" src="http://s3.archive-host.com/membres/up/1696114791/java/accordeon_effet.js"></script>
</head>
<body onload="new Accordian('fond_principal',8,'onglet_actif');">
<div id="fond_principal">
<div class="onglet_container">
<div id="ouvrir1-selection" class="onglet onglet_actif">Les villes</div>
<div id="ouvrir2-selection" class="onglet">Le Nord</div>
<div id="ouvrir3-selection" class="onglet">le désert</div>
<div id="ouvrir4-selection" class="onglet">Le Sud</div>
<div id="ouvrir5-selection" class="onglet">l'Est</div>
<div id="ouvrir6-selection" class="onglet">Maritime</div>
</div>
<div style="float: left;">
<div id="ouvrir1-content">
<div class="contenu_accordeon">
<table align="center" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td align="left">
<ul>
<li>Al'winak</li>
<li>Gwalihar</li>
<li>Aerith</li>
</ul>
</td>
<td>
<img src="http://i79.servimg.com/u/f79/14/59/60/98/snow10.png" height="50%" width="50%" alt="">
</td>
</tr>
<tr >
<td align="2"> La neige recouvre tout c'est la tempête!!!</td>
</tr>
</table>
</div>
</div>
<div id="ouvrir2-content">
<div class="contenu_accordeon">
<table align="center" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td align="left">
<ul>
<li>La fôret</li>
<li>Le marrais</li>
</ul>
</td>
<td>
<img src="http://i79.servimg.com/u/f79/14/59/60/98/snow10.png" height="50%" width="50%" alt="">
</td>
</tr>
<tr >
<td colspan="2"> La neige recouvre tout c'est la tempête!!!</td>
</tr>
</table>
</div>
</div>
<div id="ouvrir3-content">
<div class="contenu_accordeon">
<table align="center" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td align="left">
<ul>
<li>Le désert</li>
</ul>
</td>
<td>
<img src="#" height="50%" width="50%" alt="">
</td>
</tr>
<tr>
<td colspan="2"> La température baisse, les nuits sont glaciales</td>
</tr>
</table>
</div>
</div>
<div id="ouvrir4-content">
<div class="contenu_accordeon">
<table align="center" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td align="left">
<ul>
<li>Le bois des pains</li>
<li>Le lac de zboulf</li>
</ul>
</td>
<td>
<img src="http://i79.servimg.com/u/f79/14/59/60/98/snow10.png" height="50%" width="50%">
</td>
</tr>
<tr >
<td colspan="2">
La neige recouvre tout, le froid y est insoutenable,
<br/>
les lacs sont gelés, il y fait un froid polaire...
</td>
</tr>
</table>
</div>
</div>
<div id="ouvrir5-content">
<div class="contenu_accordeon">
<table align="center" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td align="left">
<ul>
<li>Les montagnes enneigées</li>
</ul>
</td>
<td>
<img src="http://i79.servimg.com/u/f79/14/59/60/98/snow10.png" height="50%" width="50%" alt="">
</td>
</tr>
<tr >
<td colspan="2">
La neige recouvre tout c'est la tempête!!!
</td>
</tr>
</table>
</div>
</div>
<div id="ouvrir6-content">
<div class="contenu_accordeon">
</div>
</div>
</div> <!-- FIN DIV FLOAT:LEFT; -->
</div>
</body>
</html>
Sam 30 Mar 2024, 22:07 par 
