bpdu92 a écrit :

 Deuxième conseil : bannir la pop-up en dehors d'un usage applicatif.

et comment on fait des listes deroulantes sans popup ?

1) Normalement, ça doit fonctionner sans JS
2) normalement (avec ou sans JS) ça doit passer à l'autre page
3) éventuellement (JS ou pas) ça peut ouvrir dans une autre fenêtre
4) ... ça peut !  ce n'est pas forcé que ça le fasse ...
    (suivant le réglage du navigateur du visiteur il est possible que la
     nouvelle fenêtre ne soit pas autorisée, ou que le fichier s'ouvre
     dans un onglet)


cas 2 :

<form action="suivant.php" onsubmit="return suivante(this);">
Menu : <select name=page>
   <option value="../pages/p_1.htm">menu 1</option>
   <option value="../pages/p_2.htm">menu 2</option>
   <option value="../photos/p_1.jpg">vue 1</option>
</select>
<input type=submit>
</form>
<script type="text/javascript">
function suivante(monform) {
var k = document.monform.page.selectedIndex;
location = document.monform.page.options[k].value;
return false;
}
</script>

cas 3 :

<form action="suivant.php" onsubmit="return suivante(this);" target="autre">
Menu : <select name=page>
   <option value="../pages/p_1.htm">menu 1</option>
   <option value="../pages/p_2.htm">menu 2</option>
   <option value="../photos/p_1.jpg">vue 1</option>
</select>
<input type=submit>
</form>
<script type="text/javascript">
function suivante(monform) {
var p = document.monform.page.value;
document.monform.action = p;
if(typeof autre == 'undefined || autre.closed)
autre = window.open('','autre','width=500,height=500,resizable=1');
autre.focus();
return true;
}
</script>

Dans les 2 cas le fichier 'suivant.php' devra récupérer le contenu de 'page' pour faire suivre vers le bon fichier (au cas où le JS serait désactivé).

Dans le cas 3, il est possible que le fichier appelé s'affiche dans un onglet au lieu d'un popup. Le visiteur va pas apprécier de voir sa fenêtre principale de navigateur se redimensionner !!!!


Le mieux est encore de ne pas popupper et de travailler avec de bêtes liens :

<dl id="menu">
   <dt>Menu</dt>
   <dd><a href="p1.htm">menu 1</a></dd>
   <dd><a href="p2.htm">menu 2</a></dd>
   <dd><a href="p3.htm">menu 3</a></dd>
</dl>
<style type="text/css">
#menu.menu dd { display: none }
#menu.menu dt { cursor: pointer; _cursor: hand }
#menu.menu:hover dd { display: block }
#menu { width: 9em }
#menu a { display: block; text-decoration: none; text-align: center; background: #ff5 }
#menu a:hover { background: gold }
</style>
<script type="text/javascript">
window.onload = function() {
   var M = document.getElementById('menu');
   M.className = 'menu';
   var IE=false; /*@cc_on IE=true; @*/
   if(IE) {
      M.onmouseover = function() { this.className=''; };
      M.onmouseout = function() { this.className='menu'; };
      }
}
</script>


--
sm