Aller au contenu

probleme placement calques / resolution

S-Factory

Par S-Factory
dans (X)HTML et CSS

 Partager

Sujets conseillés

S-Factory

S-Factory

Posté
Posté

Bonjour,

J'ai réalisé un menu en html. Il est constitué avec des boutons et des calques qui s'affichent au passage sur le bouton.

Mais j'ai un probleme de placement de mes calques selon la resolution.

En effet, selon les resolutions, le placement des calques diffères et mes calques ne se retrouvent plus devant mes boutons.

Y aurai-t-il une soluce a mon pb car c vraiment tres embetant et aussi tres urgent.

Voici le code :

<head>

<title>Menu Essai</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script language="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_findObj(n, d) { //v4.0

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[n];

for(i=0;!x&&d.layers&&i<d.layers.length;i++)

x=MM_findObj(n,d.layers.document);

if(!x && document.getElementById) x=document.getElementById(n); return x;

}

function MM_showHideLayers() { //v3.0

var i,p,v,obj,args=MM_showHideLayers.arguments;

for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args))!=null) {

v=args[i+2];

if (obj.style) { obj=obj.style;

v=(v=='show')?'visible':(v='hide')?'hidden':v; }

obj.visibility=v; }

}

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.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}}

}

function MM_swapImgRestore() { //v3.0

var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a)&&x.oSrc;i++)

x.src=x.oSrc;

}

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))!=null){document.MM_sr[j++]=x; if(!x.oSrc)

x.oSrc=x.src; x.src=a[i+2];}

}

//-->

</script>

</head>

onClick="MM_showHideLayers('cdc','','hide','decocad','','hide','piercing','','hide','smoke','','hide','vetement','','hide')"

onLoad="MM_preloadImages('images/COUPCMENU2.jpg','images/DECOMENU2.jpg')">

onMouseOver="MM_showHideLayers('cdc','','show','decocad','','hide','piercing','','hide','smoke','','hide','vetement','','hide')"><img

src="images/COUPCMENU.jpg" width="150" height="25" border="0" name="icdc"

onMouseOver="MM_swapImage('icdc','','images/COUPCMENU2.jpg',1)">

onMouseOver="MM_showHideLayers('vetement','','hide','cdc','','hide','decocad','','show','piercing','','hide','smoke','','hide')"><img

src="images/DECOMENU1.jpg" width="150" height="25" border="0" name="ideco"

onMouseOver="MM_swapImgRestore();MM_swapImage('ideco','','images/DECOMENU2.jpg',1)">

onMouseOver="MM_showHideLayers('vetement','','hide','cdc','','hide','decocad','','hide','piercing','','show','smoke','','hide')"><img

src="images/PIERCINGMENU.jpg" width="150" height="25" border="0" name="ipier"

onMouseOver="MM_swapImgRestore();MM_swapImgRestore()">

onMouseOver="MM_showHideLayers('vetement','','hide','cdc','','hide','decocad','','hide','piercing','','hide','smoke','','show')"><img

src="images/SMOKEMENU.jpg" width="150" height="25" name="ismoke" border="0"

onMouseOver="MM_swapImgRestore();MM_swapImgRestore()">

onMouseOver="MM_showHideLayers('vetement','','show','cdc','','hide','decocad','','hide','piercing','','hide','smoke','','hide')"><img

src="images/VETEMENTMENU.jpg" width="150" height="25" border="0" name="ivet"

onMouseOver="MM_swapImgRestore();MM_swapImgRestore()">

<div id="cdc" style="position:absolute; width:200px; height:115px; z-index:1;

left: 160px; top: 16px; visibility: hidden; background-color: #000000;

layer-background-color: #000000; border: 1px none #000000"

onMouseOut="MM_showHideLayers('cdc','','hide','decocad','','hide','piercing','','hide','smoke','','hide','vetement','','hide');MM_swapImgRestore()"></div>

<div id="decocad" style="position:absolute; width:200px; height:115px;

z-index:2; left: 160px; top: 40px; visibility: hidden; background-color:

#000000; layer-background-color: #000000; border: 1px none #000000"

onMouseOut="MM_showHideLayers('cdc','','hide','decocad','','hide','piercing','','hide','smoke','','hide','vetement','','hide')"></div>

<div id="piercing" style="position:absolute; width:200px; height:115px;

z-index:3; left: 160px; top: 65px; visibility: hidden; background-color:

#000000; layer-background-color: #000000; border: 1px none #000000"

onMouseOut="MM_showHideLayers('cdc','','hide','decocad','','hide','piercing','','hide','smoke','','hide','vetement','','hide')"></div>

<div id="smoke" style="position:absolute; width:200px; height:115px; z-index:4;

left: 160px; top: 90px; visibility: hidden; background-color: #000000;

layer-background-color: #000000; border: 1px none #000000"

onMouseOut="MM_showHideLayers('cdc','','hide','decocad','','hide','piercing','','hide','smoke','','hide','vetement','','hide')"></div>

<div id="vetement" style="position:absolute; width:200px; height:115px;

z-index:5; left: 160px; top: 115px; visibility: hidden; background-color:

#000000; layer-background-color: #000000; border: 1px none #000000"

onMouseOut="MM_showHideLayers('cdc','','hide','decocad','','hide','piercing','','hide','smoke','','hide','vetement','','hide')"></div>

merci d'avance

Dagnan

Dagnan

Posté
Posté (modifié)

Tu n'aurais pas une page où on pourrait tester ton menu ? J'ai la flemme de mettre quelque chose en ligne ;)

Autre chose : Ton menu marche-t-il sans Javascript d'activé ?

Sinon, sans vouloir te vexer, ton code c'est un peu le bordel, que ça soit les css ou le javascript. Regarde donc :

http://pompage.net/pompe/separation/

Bonne lecture ;)

edit :

Niveau menu, je te conseille aussi d'aller jeter un coup d'oeil sur ce site :

http://www.udm4.com/

Le menu est accessible et compatible xhtml/css :)

Modifié par Dagnan
S-Factory

S-Factory

Posté
  • Auteur
Posté

voici l'adresse du site www.sfactorynet.com, il est biensur en construction, la page d'acceuil deviendra une petite intro. Tu pourras tester le menu et voir le rendu sur le site.

par contre tu n'aurrai pas d'autre liens un peu mieux que udm4.com (et gratuit).

Dagnan

Dagnan

Posté
Posté

A ce que j'ai vu et compris, udm4 est gratuit (pour une utilisation non commerciale), mais il a aussi l'avantage d'être entièrement paramétrable ! (voir les exemple dans le menu lui-même, de ce qui est possible).

Et pour ton menu, c'est bien ce que je pensais : si on désactive javascript ou les images, on peut plus naviguer :(

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...