changer la selection html

salut..

j'ai une liste de vignettes (30x30) qui me permettent d'afficher une
image choisie dans une zone de la page.

Pour pimenter le sujet, j'utilise les possibilités du :hover, (image
de hauteur double, 30x60, en haut une image plus claire, en bas la même
image plus nette ) . Lorsque le curseur passe sur la vignette, le
:hover permet de voir la partie nette.

lorsque l'utilisateur clique sur la vignette choisie, un script affiche
l'image correspondante dans une autre zone de la page. Tout fonctionne
correctement SAUF ...

après avoir cliqué, la vignette ne reste pas 'selected', ce qui semble
évident dans mon code, puisque j'ai hard-codé la classe 'selected' , ne
sachant pas comment la faire évoluer dynamiquement avec le script
d'affichage.... une aide me serait très précieuse...


code html ---------------------------
<div id="navillus">
<ul>
<li id="vig1"><a class="selected" href="#"
onClick="modifyimage('dynloadarea', 0)">vi1</a></li>
<li id="vig2"><a href="#" onClick="modifyimage('dynloadarea', 1)" >vi2</a></li>
<li id="vig3"><a href="#" onClick="modifyimage('dynloadarea', 2)">vi3</a></li>
<li id="vig4"><a href="#" onClick="modifyimage('dynloadarea', 3)">vi4</a></li>
<li id="vig5"><a href="#" onClick="modifyimage('dynloadarea', 4)">vi5</a></li>
</ul>
</div>


code javascript -----------------------------
var dynimages=new Array()
dynimages[0]=["images/illustrations/small1.jpg", ""]
dynimages[1]=["images/illustrations/small2.jpg", ""]
dynimages[2]=["images/illustrations/small3.jpg", ""]
dynimages[3]=["images/illustrations/small4.jpg", ""]
dynimages[4]=["images/illustrations/small5.jpg", ""]

...
function modifyimage(loadarea, imgindex){
if (document.getElementById){
var imgobj=document.getElementById(loadarea)
if (imgobj.filters && window.createPopup){
imgobj.style.filter=filterstring
imgobj.filters[0].Apply()
}
imgobj.innerHTML=returnimgcode(dynimages[imgindex])
if (imgobj.filters && window.createPopup)
imgobj.filters[0].Play()
return false
}
}
...

code CSS ----------------------------
#navillus a { oat: left; padding: 30px 0px 0px 0px; overflow: hidden;
height: 0px !important; height /**/:30px; /* for IE5/Win */ }

#navillus a:hover { background-position: 0 -30px; }

#navillus a:active { background-position: 0 -60px; }

#navillus a.selected { background-position: 0 -30px; }