---
title: "javascript och layers"
type: "forum-thread"
url: "https://www.webforum.nu/amne/javascript/17350-javascript-och-layers"
topic: "JavaScript"
topic_url: "https://www.webforum.nu/amne/javascript"
author: "esra"
published: "2001-01-22T14:01:00.000Z"
updated: "2001-01-22T14:05:00.000Z"
replies: 1
views: 221
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/javascript/17350-javascript-och-layers"
---

# javascript och layers

## #1 — esra, 2001-01-22T14:01Z

Hej javascript gurus!
Jag har ett Netscape/IE problem med en meny jag gjort.
Det hela går ut på att knapparna skall behålla grön färg när man klickar på dem. Allt funkar fint men en undermeny som visas i ett layer (Layer03) krånglar i Netscape. Efter att man tryckt på denna knapp så brakar hela mitt menysystem... Jag skickar med all kod för den intresserade:

\---------------------
\<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"\>

\<html\>
\<head\>

\<!--- the sticky part in the navigation... ---\>
\<script type="text/javascript"\>
\<!--

if (document.images) {
	button_1_on=new Image;
	button_1_on.src="bilder/meny/gra_roll_01-over.gif";
	button_1_off=new Image;
	button_1_off.src="bilder/meny/gra_roll_01.gif";

	button_2_on=new Image;
	button_2_on.src="bilder/meny/gra_roll_02-over.gif";
	button_2_off=new Image;
	button_2_off.src="bilder/meny/gra_roll_02.gif";

	button_3_on=new Image;
	button_3_on.src="bilder/meny/gra_roll_03-over.gif";
	button_3_off=new Image;
	button_3_off.src="bilder/meny/gra_roll_03.gif";

	button_4_on=new Image;
	button_4_on.src="bilder/meny/gra_roll_04-over.gif";
	button_4_off=new Image;
	button_4_off.src="bilder/meny/gra_roll_04.gif";
	
	button_5_on=new Image;
	button_5_on.src="bilder/meny/gra_roll_05-over.gif";
	button_5_off=new Image;
	button_5_off.src="bilder/meny/gra_roll_05.gif";
	
	button_6_on=new Image;
	button_6_on.src="bilder/meny/gra_roll_06-over.gif";
	button_6_off=new Image;
	button_6_off.src="bilder/meny/gra_roll_06.gif";
	
	//sticky buttons for the subnavigation
	
	button_7_on=new Image;
	button_7_on.src="bilder/undermeny/u_meny_kont_roll_01-over.gif";
	button_7_off=new Image;
	button_7_off.src="bilder/undermeny/u_meny_kont_roll_01.gif";
	
	button_8_on=new Image;
	button_8_on.src="bilder/undermeny/u_meny_fs_s_s_roll_02-over.gif";
	button_8_off=new Image;
	button_8_off.src="bilder/undermeny/u_meny_fs_s_s_roll_02.gif";
	
	button_9_on=new Image;
	button_9_on.src="bilder/undermeny/u_meny_fs_s_s_roll_03-over.gif";
	button_9_off=new Image;
	button_9_off.src="bilder/undermeny/u_meny_fs_s_s_roll_03.gif";

	button_10_on=new Image;
	button_10_on.src="bilder/undermeny/u_meny_wp_roll_01-over.gif";
	button_10_off=new Image;
	button_10_off.src="bilder/undermeny/u_meny_wp_roll_01.gif";
	
	var re;
}

function rollIn(imgName){
	if (document.images) document\[imgName\].src=eval(imgName + "on.src");
}
function rollOut(imgName){
	if (document.images && re!=imgName) document\[imgName\].src=eval(imgName + "off.src");
}
function selectLink(imgName){
	if(re) document\[re\].src=eval(re + "off.src");
	re = imgName;
}

//funktioner för att gömma och visa lager

function showLayer(Id){
	if (document.all) {
		document.all\[Id\].style.visibility = "visible";
	} else if (document.layers){
		document.layers\[Id\].visibility = "show";
	}
}

function hideLayer(Id){
	if (document.all) {
		document.all\[Id\].style.visibility = "hidden";
	} else if (document.layers){
		document.layers\[Id\].visibility = "hide";
	}
}

\<!--
function MM_findObj(n, d) { //v3.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); return x;
}

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\>

\<title\>Navigation for the Nayana site\</title\>

 \</head\>
 
\<body bgcolor="#666666" background="bakgrunder/bg_topp.gif" leftmargin=0 topmargin=0 onLoad="MM_preloadImages('bilder/undermeny/u_meny_kont_roll_01.gif','bilder/undermeny/u_meny_fs_s_s_roll_02-u_men.gif','bilder/undermeny/u_meny_fs_s_s_roll_03.gif','bilder/undermen y/u_meny_wp_roll_01.gif','bilder/meny/gra_roll_03-over.gif','bilder/meny/gra_roll_03.gif')"\>
\<span id="Layer03" style="position:absolute; left:383px; top:38px; width:99px; height:25px; z-index:2; visibility:hidden"\> 
\<table border="0" cellspacing="0" cellpadding="0" align="right"\>
	\<tr\>	
    	\<td\> 
			\<a href="#" target="" onfocus="blur()" onClick="selectLink('button_1\_');hideLayer('Layer03');MM_swapImage('button_9\_','','bilder/undermeny/u_meny_fs_s_s_roll_03.gif',1)" onMouseover="rollIn('button_1\_')" onMouseout="rollOut('button_1\_')"\>\<img src="bilder/undermeny/u_meny_wp_roll_01.gif" border="0" name="button_10\_" width="86" height="17" \> \</a\>
    	\</td\>
  	\</tr\>
\</table\>
\</span\>

\<table width="780" border="0" cellspacing="0" cellpadding="0" align="center"\>
  \<tr\> 
    \<td height="2"\>\</td\>
  \</tr\>
  \<tr\> 
    \<td height="29" width="780"\> 
		\<!-- Main menu --\> 
		\<a href="#" target="" onfocus="blur()" onClick="selectLink('button_1\_');hideLayer('Layer03');MM_swapImage('button_9\_','','bilder/undermeny/u_meny_fs_s_s_roll_03.gif',1)" onMouseover="rollIn('button_1\_')" onMouseout="rollOut('button_1\_')"\>\<img src="bilder/meny/gra_roll_01.gif" width="179" height="29" border="0" name="button_1\_"\>\</a\>
		\<a href="#" target="" onfocus="blur()" onClick="selectLink('button_2\_');hideLayer('Layer03');MM_swapImage('button_9\_','','bilder/undermeny/u_meny_fs_s_s_roll_03.gif',1)" onMouseover="rollIn('button_2\_')" onMouseout="rollOut('button_2\_')"\>\<img src="bilder/meny/gra_roll_02.gif" width="153" height="29" border="0" name="button_2\_"\>\</a\>
		\<a href="#" target="" onfocus="blur()" onClick="selectLink('button_3\_');showLayer('Layer03');MM_swapImage('button_9\_','','bilder/undermeny/u_meny_fs_s_s_roll_03.gif',1)" onMouseover="rollIn('button_3\_')" onMouseout="rollOut('button_3\_')"\>\<img src="bilder/meny/gra_roll_03.gif" width="147" height="29" border="0" name="button_3\_"\>\</a\>
		\<a href="#" target="" onfocus="blur()" onClick="selectLink('button_4\_');hideLayer('Layer03');MM_swapImage('button_9\_','','bilder/undermeny/u_meny_fs_s_s_roll_03.gif',1)" onMouseover="rollIn('button_4\_')" onMouseout="rollOut('button_4\_')"\>\<img src="bilder/meny/gra_roll_04.gif" width="89" height="29" border="0" name="button_4\_"\>\</a\>
		\<a href="#" target="" onfocus="blur()" onClick="selectLink('button_5\_');hideLayer('Layer03');MM_swapImage('button_9\_','','bilder/undermeny/u_meny_fs_s_s_roll_03.gif',1)" onMouseover="rollIn('button_5\_')" onMouseout="rollOut('button_5\_')"\>\<img src="bilder/meny/gra_roll_05.gif" width="71" height="29" border="0" name="button_5\_"\>\</a\>
		\<a href="#" target="" onfocus="blur()" onClick="selectLink('button_6\_');hideLayer('Layer03');MM_swapImage('button_9\_','','bilder/undermeny/u_meny_fs_s_s_roll_03.gif',1)" onMouseover="rollIn('button_6\_')" onMouseout="rollOut('button_6\_')"\>\<img src="bilder/meny/gra_roll_06.gif" width="141" height="29" border="0" name="button_6\_"\>\</a\>
	\</td\>
  \</tr\>
  \<tr align="right" valign="top"\> 
    \<td width="780"\> 
      \<table border="0" cellspacing="0" cellpadding="0" align="right"\>
        \<tr\> 
          \<td height="7"\>\</td\>
          \<td width="170" height="7"\>\</td\>
        \</tr\>
        \<tr\>
          \<td\>
		   \<!-- sub menu --\>
			\<a href="#" target="" onClick="selectLink('button_7\_');MM_swapImage('button_9\_','','bilder/undermeny/u_meny_fs_s_s_roll_03.gif',1)" onMouseOver="rollIn('button_7\_')" onMouseOut="rollOut('button_7\_')"\>\<img src="bilder/undermeny/u_meny_kont_roll_01.gif" name="button_7\_" width="60" height="17" border="0"\>\</a\>
			\<a href="#" target="" onClick="selectLink('button_8\_');MM_swapImage('button_9\_','','bilder/undermeny/u_meny_fs_s_s_roll_03.gif',1)" onMouseOver="rollIn('button_8\_')" onMouseOut="rollOut('button_8\_')"\>\<img src="bilder/undermeny/u_meny_fs_s_s_roll_02.gif" name="button_8\_" width="60" height="17" border="0"\>\</a\>
			\<a href="#" target="" onClick="selectLink('button_9\_')" onMouseOver="rollIn('button_9\_')" onMouseOut="rollOut('button_9\_')"\>\<img src="bilder/undermeny/u_meny_fs_s_s_roll_03-over.gif" name="button_9\_" width="48" height="17" border="0"\>\</a\>
		  \</td\>
          \<td width="170"\>\</td\>
        \</tr\>
      \</table\>
    \</td\>
  \</tr\>
\</table\>

\</body\>
\</html\>
\---------------------

Frågan är alltså: Hur får jag Layer03 att funka i Netscape??
(där fick ni nått att bita i :-) )

MVH / esra

Permalänk: https://www.webforum.nu/p/17350

## #2 — esra, 2001-01-22T14:05Z

Eh...

blev lite fel kod i just Layer03. Här är det rätta:
\--------------------------
\<span id="Layer03" style="position:absolute; left:383px; top:38px; width:99px; height:25px; z-index:2; visibility:hidden"\> 
\<table border="0" cellspacing="0" cellpadding="0" align="right"\>
	\<tr\>	
    	\<td\> 
			\<a href="#" target="" onfocus="blur()" onClick="selectLink('button_10\_')" onMouseover="rollIn('button_10\_')" onMouseout="rollOut('button_10\_')"\>\<img src="bilder/undermeny/u_meny_wp_roll_01.gif" border="0" name="button_10\_" width="86" height="17" \> \</a\>
    	\</td\>
  	\</tr\>
\</table\>
\</span\>
\---------------------
Felet kvarstår alltjämt...

MVH /esra

Permalänk: https://www.webforum.nu/p/328238

---

Tråden på webben: https://www.webforum.nu/amne/javascript/17350-javascript-och-layers
