<html><head><!--Make sure your page contains a valid doctype at the very top-->
<link rel="stylesheet" type="text/css" href="haccordion.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="haccordion.js">
/***********************************************
* Horizontal Accordion script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>
<style type="text/css">
/*CSS for example Accordion #hc1*/
#hc1 li{
margin:0 3px 0 0; /*Spacing between each LI container*/
}
#hc1 li .hpanel{
padding: 5px; /*Padding inside each content*/
background: lightblue;
}
/*CSS for example Accordion #hc2*/
#hc2 li{
margin:0 0 0 0; /*Spacing between each LI container*/
border: 12px solid black;
}
#hc2 li .hpanel{
padding: 5px; /*Padding inside each content*/
background: #E2E9FF;
cursor: hand;
cursor: pointer;
}
</style>
<script type="text/javascript">
haccordion.setup({
accordionid: 'hc1', //main accordion div id
paneldimensions: {peekw:'50px', fullw:'660px', h:'158px'},
selectedli: [0, true], //[selectedli_index, persiststate_bool]
collapsecurrent: false //<- No comma following very last setting!
})
haccordion.setup({
accordionid: 'hc2', //main accordion div id
paneldimensions: {peekw:'30px', fullw:'660px', h:'150px'},
selectedli: [-1, true], //[selectedli_index, persiststate_bool]
collapsecurrent: true //<- No comma following very last setting!
})
</script>
<script type="text/javascript" src="http://pmsc.free.fr/J03/1045165647.js"></script>
<style>
.haccordion{
padding: 0;
width: 1200px; */ Grandeur total que vous dÃ
sirÃ
une fois qu'ils sont utilisÃ
*/
}
.haccordion ul{
margin: 0;
padding: 0;
list-style: none;
overflow: hidden; /*on touche pas*/
}
.haccordion li{
margin: 0;
padding: 0;
display: block; /*on touche pas*/
width: 100%; /*comme tu prÃ
fères c'est la hauteur*/
height: 20px; /*comme tu prÃ
fères c'est la longueur*/
overflow: hidden; /*on touche pas*/
float: left; /*on touche pas*/
}
#hc1 li{
margin:0 0px 0 0; /*espace entre chaque content*/
width: 800px;
}
#hc1 li .hpanel{
padding: 0px; /*espace entre chaque content*/
background: transparent;
}
.haccordion li .hpanel{
width: 20px; /*comme tu prÃ
fères c'est la hauteur*/
height: 660px; /*comme tu prÃ
fères c'est la longueur*/
}
#hc1 li{width: 118px;
height: 124px;
}
#hc1 li .hpanel{width: 205px;
height: 124px;
}
a:link {text-decoration: none;}
a:visited {text-decoration: none;}
a:hover {text-decoration: none;}
a:active {text-decoration: none;}
a { text-decoration: none; }
a img{border: none;}
img{opacity:0.5} */Un effet sur les images /*
img:hover{opacity:1}
body{ background-color:#;} */couleur du fond de page/*</style>
<script type="text/javascript">haccordion.setup({
accordionid: 'hc1', //main accordion div id
paneldimensions: {peekw:'30px', fullw:'210px', h:'100px'},
selectedli: [0, true], //[selectedli_index, persiststate_bool]
collapsecurrent: false //<- No comma following very last setting!
})</script><style type="text/css">
#hc1 li{width: 30px;
height: 100px;
}
#hc1 li .hpanel{width: 210px;
height: 100px;
}
</style></head><body><div class="gensmall">
<div id="hc1" class="haccordion"><ul>
<li style="overflow: hidden; width: 30px; display: block;"><div class="hpanel"><a href="http://creatio.forumotion.com/presentations-f1/l-imagination-n-a-pas-de-limite-uc-t225.htm" target="_blank"><img src="http://nsm04.casimages.com/img/2010/08/23//100823090919260266618412.png" alt=""></a></div></li>
<li style="overflow: hidden; width: 30px; display: block;"><div class="hpanel"><a href="http://creatio.forumotion.com/presentations-du-staff-f46/trent-mathers-t16.htm" target="_blank"><img src="http://nsm04.casimages.com/img/2010/08/23//100823090919260266618408.png" alt=""></a></div></li><li style="overflow: hidden; width: 30px; display: block;"><div class="hpanel"><a href="http://creatio.forumotion.com/presentations-du-staff-f46/trent-mathers-t16.htm" target="_blank"><img src="http://nsm04.casimages.com/img/2010/08/23//100823090919260266618411.png" alt=""></a></div></li><li style="overflow: hidden; width: 30px; display: block;"><div class="hpanel"><a href="http://creatio.forumotion.com/presentations-du-staff-f46/trent-mathers-t16.htm" target="_blank"><img src="http://nsm04.casimages.com/img/2010/08/23//100823090919260266618407.jpg" alt=""></a></div></li><li style="overflow: hidden; width: 30px; display: block;"><div class="hpanel"><a href="http://creatio.forumotion.com/presentations-du-staff-f46/trent-mathers-t16.htm" target="_blank"><img src="http://nsm04.casimages.com/img/2010/08/23//100823090920260266618413.jpg" alt=""></a></div></li><li style="overflow: hidden; width: 30px; display: block;"><div class="hpanel"><a href="http://creatio.forumotion.com/presentations-du-staff-f46/trent-mathers-t16.htm" target="_blank"><img src="http://nsm04.casimages.com/img/2010/08/23//100823090919260266618409.jpg" alt=""></a></div></li><li style="overflow: hidden; width: 30px; display: block;"><div class="hpanel"><a href="http://creatio.forumotion.com/presentations-du-staff-f46/trent-mathers-t16.htm" target="_blank"><img src="http://nsm04.casimages.com/img/2010/08/23//100823090920260266618414.png" alt=""></a></div></li></ul></div></div></body></html>