Forum de discussion
Forum « Programmation Javascript » (archives)
Re: Menu (layers) flottant HELP!!!
Envoyé: 3 juin 2004, 11h49 par fabcad
Voici le code complet (Dreamweaver):
La formule pour les 2 DIV n'est pas terminée (onClick etc.)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
<style type="text/css">
<!--
body {
background-image: url(images/bckpage_5e.jpg);
}
.leftmenu {
position: absolute;
visibility: visible;
z-index: 3;
height: 115px;
width: 87px;
left: 6px;
top: 220px;
clip: rect(220px,auto,auto,6px);
}
.rightmenu {
position: absolute;
visibility: hidden;
z-index: 2;
height: 115px;
width: 200px;
left: 93px;
top: 220px;
clip: rect(220px,auto,auto,93px);
}
-->
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function MM_showHideLayers() { //v6.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
obj.visibility=v; }
}
function MM_callJS(jsStr) { //v2.0
return eval(jsStr)
}
//-->
</script>
<!-- ImageReady Preload Script (menu-right.psd) -->
<SCRIPT TYPE="text/javascript">
<!--
function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}
function changeImages() {
if (document.images && (preloadFlag == true)) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
}
}
}
var preloadFlag = false;
function preloadImages() {
if (document.images) {
menu_right_01_over = newImage("image_menu_right/menu-right_01-over.gif");
menu_right_02_menu_right_01_over = newImage("image_menu_right/menu-right_02-menu-right_01.gif");
menu_right_02_over = newImage("image_menu_right/menu-right_02-over.gif");
menu_right_03_menu_right_02_over = newImage("image_menu_right/menu-right_03-menu-right_02.gif");
menu_right_03_over = newImage("image_menu_right/menu-right_03-over.gif");
menu_right_04_menu_right_03_over = newImage("image_menu_right/menu-right_04-menu-right_03.gif");
menu_right_04_over = newImage("image_menu_right/menu-right_04-over.gif");
menu_right_05_menu_right_04_over = newImage("image_menu_right/menu-right_05-menu-right_04.gif");
menu_right_05_over = newImage("image_menu_right/menu-right_05-over.gif");
menu_right_06_menu_right_05_over = newImage("image_menu_right/menu-right_06-menu-right_05.gif");
menu_right_06_over = newImage("image_menu_right/menu-right_06-over.gif");
menu_right_07_menu_right_06_over = newImage("image_menu_right/menu-right_07-menu-right_06.gif");
menu_right_07_over = newImage("image_menu_right/menu-right_07-over.gif");
menu_right_08_menu_right_07_over = newImage("image_menu_right/menu-right_08-menu-right_07.gif");
menu_right_08_over = newImage("image_menu_right/menu-right_08-over.gif");
menu_right_09_menu_right_08_over = newImage("image_menu_right/menu-right_09-menu-right_08.gif");
menu_right_09_over = newImage("image_menu_right/menu-right_09-over.gif");
preloadFlag = true;
}
}
// -->
</SCRIPT>
<!-- End Preload Script -->
<script type="text/javascript" language="javascript">
<!--
var ns4=document.layers
var ie4=document.all
var ns6=document.getElementById&&!document.all
function Change_objet(nObjet,nContenu,nLeft,nTop) {
// nObjet = le nom de l'objet
// nContenu = Le contenu affiché dans l'objet
// nLeft = La position x (de: haut gauche)
// nTop = La position y (de: haut gauche)
if (ns4) {
document.eval(nObjet).document.write(nContenu);
document.eval(nObjet).top =nTop;
document.eval(nObjet).left =nLeft;
document.eval(nObjet).document.close();
}
else if (ns6) {
document.getElementById(nObjet).innerHTML = nContenu;
document.getElementById(nObjet).style.left=nLeft;
document.getElementById(nObjet).style.top =nTop;
}
else if (ie4) {
eval(nObjet).innerHTML = nContenu;
eval(nObjet).style.pixelLeft=nLeft;
eval(nObjet).style.pixelTop=nTop;
}
}
// -->
</script>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" ONLOAD="preloadImages();">
<style>
BODY {SCROLLBAR-FACE-COLOR: #6AC9CD; SCROLLBAR-HIGHLIGHT-COLOR: #6AC9CD; SCROLLBAR-SHADOW-COLOR: #666666; SCROLLBAR-3DLIGHT-COLOR: #FFFFFF; SCROLLBAR-ARROW-COLOR: #FFFFFB; SCROLLBAR-TRACK-COLOR: #FFFFFF; SCROLLBAR-DARKSHADOW-COLOR: #000000; }
</style>
<TABLE WIDTH=100% BORDER=0 CELLPADDING=0 CELLSPACING=0>
<!--DWLayoutTable-->
<TR>
<TD rowspan="2" valign="top">
<div class="leftmenu" id="leftmenu" OnScroll="Change_objet()">
<TABLE WIDTH=84 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image27','','image_menu_left/menu-left_01-over.gif',1)"><img src="image_menu_left/menu-left_01.gif" name="Image27" width="83" height="28" border="0" onMouseOver="MM_showHideLayers('rightmenu','','hide')"></a></TD>
<TD ROWSPAN=7><IMG NAME="menu_left_02" SRC="image_menu_left/menu-left_02.gif" WIDTH=1 HEIGHT=256 ALT=""></TD>
</TR>
<TR>
<TD><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image28','','image_menu_left/menu-left_03-over.gif',1)"><img src="image_menu_left/menu-left_03.gif" name="Image28" width="83" height="27" border="0" onMouseOver="MM_showHideLayers('rightmenu','','show')"></a></TD>
</TR>
<TR>
<TD><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image29','','image_menu_left/menu-left_04-over.gif',1)"><img src="image_menu_left/menu-left_04.gif" name="Image29" width="83" height="27" border="0" onMouseOver="MM_showHideLayers('rightmenu','','hide')"></a></TD>
</TR>
<TR>
<TD><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image30','','image_menu_left/menu-left_05-over.gif',1)"><img src="image_menu_left/menu-left_05.gif" name="Image30" width="83" height="27" border="0" onMouseOver="MM_showHideLayers('rightmenu','','hide')"></a></TD>
</TR>
<TR>
<TD><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image31','','image_menu_left/menu-left_06-over.gif',0)"><img src="image_menu_left/menu-left_06.gif" name="Image31" width="83" height="27" border="0" onMouseOver="MM_showHideLayers('rightmenu','','hide')"></a></TD>
</TR>
<TR>
<TD><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image32','','image_menu_left/menu-left_07-over.gif',1)"><img src="image_menu_left/menu-left_07.gif" name="Image32" width="83" height="33" border="0" onMouseOver="MM_showHideLayers('rightmenu','','hide')"></a></TD>
</TR>
<TR>
<TD><IMG SRC="image_menu_left/menu-left_08.gif" WIDTH=83 HEIGHT=87 ALT=""></TD>
</TR>
</TABLE>
</div></TD>
<TD COLSPAN=2 rowspan="2" valign="top"><p class="textblocktop"> </p>
<div class="rightmenu" id="rightmenu" onMouseOut="MM_showHideLayers('rightmenu','','hide')" onMouseMove="MM_showHideLayers('rightmenu','','show')">
<TABLE WIDTH=142 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD><A HREF="#"
ONMOUSEOVER="changeImages('menu_right_01', 'image_menu_right/menu-right_01-over.gif', 'menu_right_02', 'image_menu_right/menu-right_02-menu-right_01.gif'); return true;"
ONMOUSEOUT="changeImages('menu_right_01', 'image_menu_right/menu-right_01.gif', 'menu_right_02', 'image_menu_right/menu-right_02.gif'); return true;"> <IMG SRC="image_menu_right/menu-right_01.gif" ALT="" NAME="menu_right_01" WIDTH=142 HEIGHT=28 BORDER=0 onMouseOut="MM_showHideLayers('rightmenu','','show')"></A></TD>
</TR>
<TR>
<TD><A HREF="#"
ONMOUSEOVER="changeImages('menu_right_02', 'image_menu_right/menu-right_02-over.gif', 'menu_right_03', 'image_menu_right/menu-right_03-menu-right_02.gif'); return true;"
ONMOUSEOUT="changeImages('menu_right_02', 'image_menu_right/menu-right_02.gif', 'menu_right_03', 'image_menu_right/menu-right_03.gif'); return true;"> <IMG SRC="image_menu_right/menu-right_02.gif" ALT="" NAME="menu_right_02" WIDTH=142 HEIGHT=27 BORDER=0 onMouseOut="MM_showHideLayers('rightmenu','','show')"></A></TD>
</TR>
<TR>
<TD><A HREF="#"
ONMOUSEOVER="changeImages('menu_right_03', 'image_menu_right/menu-right_03-over.gif', 'menu_right_04', 'image_menu_right/menu-right_04-menu-right_03.gif'); return true;"
ONMOUSEOUT="changeImages('menu_right_03', 'image_menu_right/menu-right_03.gif', 'menu_right_04', 'image_menu_right/menu-right_04.gif'); return true;"> <IMG SRC="image_menu_right/menu-right_03.gif" ALT="" NAME="menu_right_03" WIDTH=142 HEIGHT=27 BORDER=0 onMouseOut="MM_showHideLayers('rightmenu','','show')"></A></TD>
</TR>
<TR>
<TD><A HREF="#"
ONMOUSEOVER="changeImages('menu_right_04', 'image_menu_right/menu-right_04-over.gif', 'menu_right_05', 'image_menu_right/menu-right_05-menu-right_04.gif'); return true;"
ONMOUSEOUT="changeImages('menu_right_04', 'image_menu_right/menu-right_04.gif', 'menu_right_05', 'image_menu_right/menu-right_05.gif'); return true;"> <IMG SRC="image_menu_right/menu-right_04.gif" ALT="" NAME="menu_right_04" WIDTH=142 HEIGHT=27 BORDER=0 onMouseOut="MM_showHideLayers('rightmenu','','show')"></A></TD>
</TR>
<TR>
<TD><A HREF="#"
ONMOUSEOVER="changeImages('menu_right_05', 'image_menu_right/menu-right_05-over.gif', 'menu_right_06', 'image_menu_right/menu-right_06-menu-right_05.gif'); return true;"
ONMOUSEOUT="changeImages('menu_right_05', 'image_menu_right/menu-right_05.gif', 'menu_right_06', 'image_menu_right/menu-right_06.gif'); return true;"> <IMG SRC="image_menu_right/menu-right_05.gif" ALT="" NAME="menu_right_05" WIDTH=142 HEIGHT=27 BORDER=0 onMouseOut="MM_showHideLayers('rightmenu','','show')"></A></TD>
</TR>
<TR>
<TD><A HREF="#"
ONMOUSEOVER="changeImages('menu_right_06', 'image_menu_right/menu-right_06-over.gif', 'menu_right_07', 'image_menu_right/menu-right_07-menu-right_06.gif'); return true;"
ONMOUSEOUT="changeImages('menu_right_06', 'image_menu_right/menu-right_06.gif', 'menu_right_07', 'image_menu_right/menu-right_07.gif'); return true;"> <IMG SRC="image_menu_right/menu-right_06.gif" ALT="" NAME="menu_right_06" WIDTH=142 HEIGHT=27 BORDER=0 onMouseOut="MM_showHideLayers('rightmenu','','show')"></A></TD>
</TR>
<TR>
<TD><A HREF="#"
ONMOUSEOVER="changeImages('menu_right_07', 'image_menu_right/menu-right_07-over.gif', 'menu_right_08', 'image_menu_right/menu-right_08-menu-right_07.gif'); return true;"
ONMOUSEOUT="changeImages('menu_right_07', 'image_menu_right/menu-right_07.gif', 'menu_right_08', 'image_menu_right/menu-right_08.gif'); return true;"> <IMG SRC="image_menu_right/menu-right_07.gif" ALT="" NAME="menu_right_07" WIDTH=142 HEIGHT=27 BORDER=0 onMouseOut="MM_showHideLayers('rightmenu','','show')"></A></TD>
</TR>
<TR>
<TD><A HREF="#"
ONMOUSEOVER="changeImages('menu_right_08', 'image_menu_right/menu-right_08-over.gif', 'menu_right_09', 'image_menu_right/menu-right_09-menu-right_08.gif'); return true;"
ONMOUSEOUT="changeImages('menu_right_08', 'image_menu_right/menu-right_08.gif', 'menu_right_09', 'image_menu_right/menu-right_09.gif'); return true;"> <IMG SRC="image_menu_right/menu-right_08.gif" ALT="" NAME="menu_right_08" WIDTH=142 HEIGHT=27 BORDER=0 onMouseOut="MM_showHideLayers('rightmenu','','show')"></A></TD>
</TR>
<TR>
<TD><A HREF="#"
ONMOUSEOVER="changeImages('menu_right_09', 'image_menu_right/menu-right_09-over.gif'); return true;"
ONMOUSEOUT="changeImages('menu_right_09', 'image_menu_right/menu-right_09.gif'); return true;"> <IMG SRC="image_menu_right/menu-right_09.gif" ALT="" NAME="menu_right_09" WIDTH=142 HEIGHT=39 BORDER=0 onMouseOut="MM_showHideLayers('rightmenu','','show')"></A></TD>
</TR>
</TABLE>
</div>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr align="center" valign="middle">
<td align="left"> </td>
<td width="100%" align="left"><p><br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</p>
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<!--DWLayoutTable-->
<tr align="center" valign="middle">
<td><!--DWLayoutEmptyCell--> </td>
<td width="100%" align="left"><p> </p>
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<!--DWLayoutTable-->
<tr align="center" valign="middle">
<td><!--DWLayoutEmptyCell--> </td>
<td width="100%" align="left" valign="middle"><p> </p>
</td>
</tr>
<tr>
<td height="0"></td>
<td></td>
</tr>
<tr>
<td height="1"><img src="spacer.gif" alt="" width="277" height="1"></td>
<td></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr align="center" valign="middle">
<td> </td>
<td width="100%" align="left" valign="middle"><p> </p>
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr align="center" valign="middle">
<td> </td>
<td width="100%" align="left"><p> </p>
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr align="center" valign="middle">
<td> </td>
</tr>
</table>
<p> </p></TD>
<td height="9"></td>
</TR>
<TR>
<td width="1"></td>
</TR>
<TR>
<TD valign="top"><IMG SRC="images2/spacer.gif" ALT="" WIDTH=140 HEIGHT=1 galleryimg="no"></TD>
<TD width="134" valign="top"><IMG SRC="images2/spacer.gif" ALT="" WIDTH=134 HEIGHT=1 galleryimg="no"></TD>
<TD width="100%" valign="top"><IMG SRC="images2/spacer.gif" ALT="" WIDTH=1 HEIGHT=1 galleryimg="no"></TD>
<td></td>
</TR>
<tr>
<td><img src="spacer.gif" alt="" width="1" height="1"></td>
<td><img src="spacer.gif" alt="" width="134" height="1"></td>
<td></td>
<td><img src="spacer.gif" alt="" width="1" height="1"></td>
</tr><tr><td height="1"><img src="spacer.gif" alt="" width="140" height="1"></td><td><img src="spacer.gif" alt="" width="134" height="1"></td><td></td><td><img src="spacer.gif" alt="" width="1" height="1"></td></tr>
</TABLE>
</body>
</html>
Merci beaucoup pour votre aide et explications...
Fab.
Réponses
|