J'essaye d'utiliser un menu deroulant. Pour ne pas utiliser display:none ( accessibilité) je passe par des myDiv.style.left = '-1999em'; ou myDiv.style.left = 'auto';. Le souci, d'est que j'ai un probleme de rafraichissiment de mes images avec IE.
http://spiral.univ-lyon1.fr/8-basedonnéemedia/test5.asp
Auriez vous une idée ??
http://spiral.univ-lyon1.fr/8-basedonnéemedia/test5.asp
Auriez vous une idée ??
<style type="text/css">
li{
list-style: none;
border:1px solid #fff;
list-style-position: outside;
}
ul {
list-style:none;
border:1px solid #fff;
margin-left: 10px;
padding-left : 10px;
/*border : 1px solid #FF0000;*/
}
.tools_on{
background : #EEEEEE ;
background-image : url("../imagesV2/icones/suivant_bleu.gif");
background-repeat:no-repeat ;
background-position:right ;
/*cursor:pointer ;*/
}
.tools_out{
background : #FFFFFF ;
}
.dossier {
margin-left : 0px ;
margin-right : 0px ;
margin-top : 3px ;
border : 0px ;
}
</style>
<script type="text/javascript">
function Affiche_dossier( id_div ) {
myDiv = document.getElementById('folder'+id_div);
myssDiv = document.getElementById('div'+id_div);
myIcon = document.getElementById('icon'+id_div);
if (myDiv) {
if (myDiv.style.left == '-1999em' ) {
myIcon.src='../14-ue/images/icon_moins.gif';
myDiv.style.left = 'auto';
myDiv.style.position ="relative" ;
// myssDiv.className='tools_on';
// myssDiv.className='tools_on';
// myDiv.style.position ="relative" ;
}
else {
myDiv.style.left = '-1999em';
myDiv.style.position ="absolute" ;
myIcon.src='../14-ue/images/icon_plus.gif';
}
}
}
</script>
</head>
<body>
<div style="float:left; width:300px; border: 1px solid #000000; height:600px;overflow:auto;">
<ul ><li><a href='#' onclick='lance_affichege_fichier(0); ' ><img style='margin-left:-10px;border:0px;' src='./images/disque.gif' alt='dossier' /> Racine</a></li>
<li><div class="tools_out" onmouseover="this.className='tools_on';" onmouseout="this.className='tools_out';">
<img src="../14-ue/images/icon_plus.gif" onclick="Affiche_dossier(3)" id="icon3" alt="deplier" />
<img class="dossier" src="./images/disque.gif" alt="dossier" /> <a href="#" onclick="lance_affichege_fichier(3);" > 1</a></div></li>
<li><ul id="folder3" style="left:-1999em; position:absolute ;">
<li><div id="div3" class="tools_out" onmouseover="this.className='tools_on';" onmouseout="this.className='tools_out';">
<img src="../14-ue/images/icon_plus.gif" style ="visibility:hidden" alt="déplier" />
<img class="dossier" src="./images/disque.gif" alt="dossier" /> <a href="#" onclick="lance_affichege_fichier(4);" >1,1</a></div></li>
<li><div class="tools_out" onmouseover="this.className='tools_on';" onmouseout="this.className='tools_out';">
<img src="../14-ue/images/icon_plus.gif" style ="visibility:hidden" alt="déplier" />
<img class="dossier" src="./images/disque.gif" alt="dossier" /> <a href="#" onclick="lance_affichege_fichier(5);" > 1,2</a></div></li></ul></li>
<li><div class="tools_out" onmouseover="this.className='tools_on';" onmouseout="this.className='tools_out';" >
<img src="../14-ue/images/icon_plus.gif" onclick="Affiche_dossier(6)" id="icon6" alt="deplier" />
<img class="dossier" src="./images/disque.gif" alt="dossier" /> <a href="#" onclick="lance_affichege_fichier(6);" > 2</a></div></li>
<li><ul id="folder6" style="left:-1999em; position:absolute ;">
<li><div id="div6" class="tools_out" onmouseover="this.className='tools_on';" onmouseout="this.className='tools_out';">
<img src="../14-ue/images/icon_plus.gif" onclick="Affiche_dossier(7)" id="icon7" alt="deplier" />
<img class="dossier" src="./images/disque.gif" alt="dossier" /> <a href="#" onclick="lance_affichege_fichier(7);" >2,1</a></div></li>
<li><ul id="folder7" style="left:-1999em; position:absolute ;">
<li><div id="div7" class="tools_out" onmouseover="this.className='tools_on';" onmouseout="this.className='tools_out';">
<img src="../14-ue/images/icon_plus.gif" style ="visibility:hidden" alt="déplier" />
<img class="dossier" src="./images/disque.gif" alt="dossier" /> <a href="#" onclick="lance_affichege_fichier(8);" >2,1,1</a></div></li>
<li><div class="tools_out" onmouseover="this.className='tools_on';" onmouseout="this.className='tools_out';">
<img src="../14-ue/images/icon_plus.gif" onclick="Affiche_dossier(9)" id="icon9" alt="deplier" />
<img class="dossier" src="./images/disque.gif" alt="dossier" /> <a href="#" onclick="lance_affichege_fichier(9);" > 2,1,2</a></div></li>
<li><ul id="folder9" style="left:-1999em; position:absolute ;">
<li><div id="div9" class="tools_out" onmouseover="this.className='tools_on';" onmouseout="this.className='tools_out';">
<img src="../14-ue/images/icon_plus.gif" style ="visibility:hidden" alt="déplier" />
<img class="dossier" src="./images/disque.gif" alt="dossier" /> <a href="#" onclick="lance_affichege_fichier(10);" >2,1,2,1</a></div></li></ul></li>
<li><div class="tools_out" onmouseover="this.className='tools_on';" onmouseout="this.className='tools_out';" >
<img src="../14-ue/images/icon_plus.gif" style ="visibility:hidden" alt="déplier"/>
<img class="dossier" src="./images/disque.gif" alt="dossier" /> <a href="#" onclick="lance_affichege_fichier(11);" > 2,1,3</a></div></li></ul></li></ul></li>
<li><div class="tools_out" onmouseover="this.className='tools_on';" onmouseout="this.className='tools_out';" >
<img src="../14-ue/images/icon_plus.gif" style ="visibility:hidden" alt="déplier"/>
<img class="dossier" src="./images/disque.gif" alt="dossier" /> <a href="#" onclick="lance_affichege_fichier(12);" > 3</a></div></li></ul>
</div>