Forum « Re: Pb menu dhtml dessous anim flash »

Forum « Flash et Shockwave » (archives)

Re: Pb menu dhtml dessous anim flash

Envoyé: 18 juillet 2002, 11h28 par Oznog

Salut,

Les Flash, formulaire et autre objets externe sont malheureusement toujours traités comme étant sutr le z-index supérieur. Pour régler le problème il faut utiliser les calques. Voiçi un code qui fonctionne pas mal.

Attention, l'intégration versus compatibilité sera un dur combat ;-)

<html>
<head>
<style>
.javascript { color: white; background-color: blue; }
.dhtml { color: white; background-color: blue; }
.asp { color: white; background-color: blue; }
#layer1 {
position: absolute;
z-index: 10;
left: 50px;
visibility: hidden;
}
#layer2 {
position: absolute;
z-index: 5;
left: 0px;
}
</style>
<script type="text/javascript" language="javascript">
function showLayer (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 hideLayer (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';
}
function clipSelect () {
if (document.layers) {
document.layer2.oldClipWidth = document.layer2.document.width;
document.layer2.clip.width = 50;
}
else if (document.all)
document.all.layer2.style.clip = 'rect(auto 50px auto auto)';
}
function unclipSelect () {
if (document.layers)
document.layer2.clip.width = document.layer2.oldClipWidth;
else if (document.all)
document.all.layer2.style.clip = 'rect(auto auto auto auto)';
}
function init () {
if (document.layers)
document.layer1.onmouseout = function () {
hideLayer(this.id);
unclipSelect();
};
}
</script>
</head>

<body onload="init()">

<a href="javascript: void 0" onmouseover="showLayer('layer1'); clipSelect();">Langages de programmation</a>
<br >

<div id="layer1"
onmouseout="if (document.all) {
if (!this.contains(event.toElement)) {
hideLayer(this.id);
unclipSelect();
}
}
else if (document.getElementById) {
window.tid = setTimeout('hideLayer(\'' + this.id + '\')', 20);
}"
onmouseover="if (document.getElementById)
clearTimeout(window.tid);"
>

<table border="0">
<tr><td class="javascript">
<a href="http://www.trucsweb.com/Javascript/";; class="javascript">JavaScript</a>
</td></tr>
<tr><td class="dhtml">
<a href="http://www.trucsweb.com/DHTML";; class="dhtml">HTML dynamique</a>
</td></tr>
<tr><td class="asp">
<a href="http://www.trucsweb.com/aSP";; class="asp">Active server pages</a>
</td></tr>
</table>
</div>

<div id="layer2">
<OBJECT CLASSID="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" CODEBASE="http://active.macromedia.com/flash2/cabs/swflash.cab#version=5,0,0,0" WIDTH="100" HEIGHT="100" BORDER="0">
<PARAM NAME="SRC" VALUE="flash.swf">
<PARAM NAME="MENU" VALUE="false">
<PARAM NAME=quality VALUE=high>
<EMBED SRC="flash.swf" WIDTH="100" HEIGHT="100" QUALITY=high MENU="false" LOOP="false" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"; BORDER="0">
</EMBED>
</OBJECT>
</div>

</body>
</html>

Ciao
Oznog