<!--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:'400px', 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:'450px', 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>
</script>

.haccordion{
padding: 0;
width: 800px; */ 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: 20px; /*comme tu préfères c'est la longueur*/
}

#hc1 li{width: 118px;
height: 124px;
}
#hc1 li .hpanel{width: 205px;
height: 124px;
}

<div class="gensmall"><script type="text/javascript">haccordion.setup({
  accordionid: 'hc1', //main accordion div id
  paneldimensions: {peekw:'30px', fullw:'210px', h:'50px'},
  selectedli: [0, true], //[selectedli_index, persiststate_bool]
  collapsecurrent: false //<- No comma following very last setting!
})</script><div id="hc1" class="haccordion"><ul>
<li style="overflow: hidden; width:LARGEUR LORSQUE FERMÉpx; display: block;"><div class="hpanel"><a href="LIEN DÉSIRÉ" target="_blank"><img src="LIEN DE L'IMAGE" alt=""></a></div></li></ul></div>

<div class="gensmall"><script type="text/javascript">haccordion.setup({
  accordionid: 'hc1', //main accordion div id
  paneldimensions: {peekw:'30px', fullw:'210px', h:'50px'},
  selectedli: [0, true], //[selectedli_index, persiststate_bool]
  collapsecurrent: false //<- No comma following very last setting!
})</script><div id="hc1" class="haccordion"><ul>
<li style="overflow: hidden; width:LARGEUR LORSQUE FERMÉpx; display: block;"><div class="hpanel"><a href="LIEN DÉSIRÉ" target="_blank"><img src="LIEN DE L'IMAGE" alt=""></a></div></li>
<li style="overflow: hidden; width:LARGEUR LORSQUE FERMÉpx; display: block;"><div class="hpanel"><a href="LIEN DÉSIRÉ" target="_blank"><img src="LIEN DE L'IMAGE" alt=""></a></div></li>
<li style="overflow: hidden; width:LARGEUR LORSQUE FERMÉpx; display: block;"><div class="hpanel"><a href="LIEN DÉSIRÉ" target="_blank"><img src="LIEN DE L'IMAGE" alt=""></a></div></li></ul></div>