- · Niveau : INTERMÉDIAIRE
- · Compatibilité : IE4+ / IE6 / NS4+ / NS6 / Mozilla 0.9
À part Netscape 6, toutes les versions de navigateurs ont un problème de "z-index" avec les formulaires, les modules externes (plug-in) comme un Flash, et les applets. Toujours placé au-dessus des autres "layer", un objet comme un menu déroulant cachera vos menus DHTML. Les navigateurs sont en fait incapable de mettre ce type d’objet dans un "z-index".
La solution
Il suffit de mettre votre menu déroulant dans un "layer" (div) et de spécifier un "z-index". Ensuite il faut jouer avec la visibilité de l’objet afin de cacher le menu déroulant lorsqu’un autre "layer" vient à passer au-dessus, et au lieu de faire "visible/hidden" il faut "tronquer" le "layer". Dans mon exemple j’ai fait un menu DHTML standard avec affichage d’un sous-menu lors du passage de la souris. Je vais donc profiter de ces deux événements "onmouseover" et "onmouseout" pour cacher puis rétablir le menu déroulant.
Exemple
J’ai ici deux "layers", le premier sera utilisé pour un menu DHTML et l’autre pour mettre le menu déroulant du formulaire. La technique consiste à capturer l’événement "onmouseover" et "onmouseout" pour changer les dimensions du "layer" du menu déroulant. De cette façon il n’est plus visible et donc le menu DHTML peut être vu sans problème. Noter le petit détail pour Netscape 4+ qui construit sa propre fonction seulement si le navigateur est Netscape 4+, dans l’événement "onload".
Code complet
<html>
<head>
<style>
.menu { color: white; background-color: black; }
#menuDhtml {
position: absolute;
z-index: 10;
left: 10px;
visibility: hidden;
}
#menuForm {
position: absolute;
z-index: 5;
left: 10px;
}
</style>
<script type="text/javascript" language="javascript">
// Fonction normal pour afficher et
// effacer un "layer" DHTML
function Aff_layer (id) {
if (document.layers)
document[id].visibility = ’show’;
else if (document.all)
document.all[id].style.visibility = ’visible’;
else if (document.getElementById)
document.getElementById(id).style.visibility = ’visible’;
}
function Cache_layer (id) {
if (document.layers)
document[id].visibility = ’hide’;
else if (document.all)
document.all[id].style.visibility = ’hidden’;
else if (document.getElementById)
document.getElementById(id).style.visibility = ’hidden’;
}
// Fonction spécial pour effacer et
// réafficher un "layer" avec la technique
// du "tronquage" de "layer"
function Trunc_select () {
if (document.layers) {
document.menuForm.vieuxClipWidth = document.menuForm.document.width;
document.menuForm.clip.width = 0;
}
else if (document.all)
document.all.menuForm.style.clip = ’rect(auto 0px auto auto)’;
}
function Replace_select () {
if (document.layers)
document.menuForm.clip.width = document.menuForm.vieuxClipWidth;
else if (document.all)
document.all.menuForm.style.clip = ’rect(auto auto auto auto)’;
}
// Spécifique à Netscape 4+
// pour ça propre capture du "onmouseout"
function init () {
if (document.layers)
document.menuDhtml.onmouseout = function () {
Cache_layer(this.id);
Replace_select();
};
}
</script>
</head>
<body onload="init()">
<a href="javascript: void 0" onmouseover="Aff_layer(’menuDhtml’); Trunc_select();">Langages de programmation</a>
<br />
<!-- "Layer" du menu DHTML -->
<div id="menuDhtml"
onmouseout="if (document.all) {
if (!this.contains(event.toElement)) {
Cache_layer(this.id);
Replace_select();
}
}
else if (document.getElementById) {
window.tid = setTimeout(’Cache_layer(\’’ + this.id + ’\’)’, 20);
}"
onmouseover="if (document.getElementById)
clearTimeout(window.tid);"
>
<table border="0">
<tr><td class="menu">
<a href="http://www.trucsweb.com/Javascript/" class="menu">JavaScript</a>
</td></tr><tr><td class="menu">
<a href="http://www.trucsweb.com/DHTML" class="menu">HTML dynamique</a>
</td></tr><tr><td class="menu">
<a href="http://www.trucsweb.com/aSP" class="menu">Active server pages</a>
</td></tr></table>
</div>
<!-- "Layer" du champ selection ou menu déroulant -->
<div id="menuForm">
<form name="nomForm">
<select name="Selection" width="150" style="width: 150px;">
<option>Choix 1</option>
<option>Choix 2</option>
<option>Choix 3</option>
</select>
</form>
</div>
</body>
</html>
![[Photo]](https://www.trucsweb.com/documents/images/2024/js-bs-formulaire-fetch.png)
Formulaire Bootstrap 5 Ajax avec validation.![[Photo]](https://www.trucsweb.com/documents/images/2023/elephants-Salvador_Dali_1948.jpg)
Sécuriser l’accès « bureau à distance » sous IIS![[Photo]](https://www.trucsweb.com/documents/images/2023/trou_noir_galaxie_M87.jpg)
L’AI au temps du Far-Web![[Photo]](https://www.trucsweb.com/documents/images/2023/gilles-villeneuve-montreal1978.jpg)
Sélecteurs JavaScript querySelector() et querySelectorAll()![[Photo]](http://www.trucsweb.com/documents/images/2023/evolution_de_lhomme.jpg)
CSS - Animations![[Photo]](http://www.trucsweb.com/documents/images/2023/univers-copernic.jpg)
Mode de couleurs (Color modes) Bootstrap 5![[Photo]](http://www.trucsweb.com/documents/images/2023/les_burgers_de_papa.jpg)
25 ans des Trucsweb - Bouton hamburger animé Bootstrap 5![[Photo]](http://www.trucsweb.com/documents/images/logos/l_whatwg.svg)
Living Standard pour HTML de Apple, Google, Mozilla, Microsoft ...et la W3C![[Photo]](http://www.trucsweb.com/documents/images/2022/tim-berners-lee-web-b.jpg)
Le nouveau HTML « Living Standard » et le XML![[Photo]](http://www.trucsweb.com/documents/images/2022/v_jacques_dutronc-les_cactus.jpg)
Sécuriser un formulaire de contact au Far-Web!
AbuseIPDB
Connexion