Diaporama : changer l'image des vignettes

[alv]

Bonjour,
j'ai un code qui fonctionne très bien mais j'ai un petit soucis.
C'est un "diaporama" qui affiche des petites vignettes et au survol, la vignette s'affiche en grand avec le texte correspondant.
Comment faire que dans les petites vignettes, l'image ne s'y affichent pas. Je voudrais mettre une autre image : une image verte pour la vignette active et une blanche pour les inactives. Comment faire dans le code ?
Merci d'avance.

[alv]

Up

[alv]

up

[alv]

Up

[alv]

[alv]

Up svp

[alv]

[alv]

Up

[alv]

Up svp

[alv]

Up

[Scoubifitz]

bonsoir,
remplacez la partie "style" par celle ci :

Code:

<style type="text/css">
#view1{
/* Diapo */
width: 440px;
height: 220px;
border: solid 1px #41BB1E;
border-radius: 17px;
-moz-border-radius: 17px;
-webkit-border-radius: 17px;
padding: 0px;
}
.onglet1{
/* Vignettes et texte */
margin: 205px 0px 0px 40px;
}
.onglet-table1 img{
/* Vignettes */
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
padding: 0px 0px;
width: 0px;
height: 18px;
}
.onglet-table1 td.active, .onglet-table1 td:hover{
/* Vignette active */
opacity: 1;
background:#41BB1E;
border: solid 2px #41BB1E;
border-radius: 7px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
}
.onglet-table1 td{
/* Vignettes non actives */
opacity: 0.8;
background:#ffffff;
border: solid 2px #339966;
border-radius: 7px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
width: 18px;
height: 18px;
}
.onglet-content1 > div{
/* Texte */
display: none;
font-size: 13px;
color: white;
line-height: 1.8;
text-align: justify;
border: solid 0px;
padding: 5px;
width: 160px;
height: 210px;
margin: -233px 0px 0px 230px;
border-radius: 0px 17px 17px 0px;
-moz-border-radius: 0px 17px 17px 0px;
-webkit-border-radius: 0px 17px 17px 0px;
background-image: url('XXX.png');
background-repeat:no-repeat;
}
.onglet-content1 > div.active{
display: block;
}
.onglet-table1{
border-spacing: 2px;
}
</style>

[alv]

Merci, nickel.