salut à toi
je viens de te faire un exemple qui est largement simplifiable
explications :
- lors d'un double-click sur une image on ajoute cette image dans la liste si elle ne s'y trouve pas déja
---- On ajoute un style de type "border = 1px solid #000" a l'image qui vient d'etre ajouté
- lors d'un simple click on supprime cette image de la liste
---- On supprime le style appliqué a l'image
le code :
<!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=iso-8859-1" />
<title>Document sans nom</title>
<script type="text/javascript">
function ajout(nomimg, idimg){
var existe = 0;
if(nomimg == 0){
}
else{
for(i=1;i< document.getElementById('arrive').length ;i++){
if(document.getElementById('arrive').options[i].text ==
nomimg){
existe = 1;
}
else{
if(existe == 1){
existe = 1;
}
else{
existe = 0;
}
}
}
if(existe == 0){
var option = new Option(nomimg);
document.getElementById('arrive').options[0].text =
"-- Liste des clients séléctionnés --";
document.getElementById('arrive').options[0].value = 0;
document.getElementById('arrive').options[(document.
getElementById('arrive').length)] = option;
// on ajoute un bord a l'image pour indiquer qu'elle est sélectionnée
document.getElementById(idimg).style.border = "2px solid #000";
}
else{
alert('Cette option est déjà séléctionnée !!!');
}
}
}
function enleve(monimg,idimg){
var listeImg = document.getElementById('arrive');
if(document.getElementById('arrive').length == 0){
}
else{
for(i=1;i< document.getElementById('arrive').length ;i++){
if(document.getElementById('arrive').options[i].text == monimg){
listeImg.options[i] = null;
}
}
//listeArr.options[listeArr.selectedIndex] = null;
document.getElementById(idimg).style.border = "0px";
}
}
</script>
</head>
<body>
<select name='arrive' id='arrive' size='5'
style="scrollbar-3dlight-color:red; border: red 1px solid; BACKGROUND-COLOR: #f2f2f2">
<option value='0'>
Aucune option n'est séléctionnée !!!
</option>
</select>
<img src="images/dossier-consulter.jpg" width="50px" height="50px" ondblclick='ajout("mon image","img32")' onclick="enleve('mon image','img32')" id="img32" />
<img src="images/dossier-consulter.jpg" width="50px" height="50px" ondblclick='ajout("mon image2","img322")' onclick="enleve('mon image2','img322')" id="img322" />
<img src="images/dossier-consulter.jpg" width="50px" height="50px" ondblclick='ajout("mon image3","img323")' onclick="enleve('mon image3','img323')" id="img323" />
<img src="images/dossier-consulter.jpg" width="50px" height="50px" ondblclick='ajout("mon image4","img324")' onclick="enleve('mon image4','img324')" id="img324" />
</body>
</html>
Testé sous IE et firefox , aucun problème a ma connaissance...
Amélioration à apporter :
- fusionner les 2 fonctions en une seule , lors d'un click si l'image se trouve dans la liste , on ne l'ajoute pas sinon , hop hop hop.
Coordialement[/i][/i][/i]
