JavaScript: Ha en egen högermusknapp-meny

HA EN EGEN HÖGERMUSKNAPP-MENY

Detta script fungerar på NN 4 och IE 4 och bättre av respektive webbläsare.
Fast i IE 4 samt NN 6 kommer förutom den egna högerknapp-menyn även den riktiga menyn fram. Denna kan man inte bli av med i IE 4 och NN 6.
Scriptet fungerar dock ändå utan problem i alla NN 4 och IE 4 och bättre.
I NN 4 visas dock inte menyn om man högerklickar på en bild eller på text, då visas webbläsarens vanliga menyn.

Detta sätter du direkt efter din BODY-tagg (direkt efter <BODY>):

<STYLE TYPE="text/css">
<!--
/* Don't remove this line: Script by Omid Rouhani from JavaScript.nu */

/* Här anger du länkarnas färg, typsnitt, storlek etc. */
.musMenyLankarMusAv	{color: black; font-family: "ms sans serif"; font-size: 8px; text-decoration:none}
.musMenyLankarMusPa	{color: white; font-family: "ms sans serif"; font-size: 8px; text-decoration:none}

#musMeny			{position:absolute; visibility:hidden;}

/* *************************************************
Nedan skapar du en rad för varje länk som ska finnas i menyn.
Du kan ha för många rader nedan, men inte för få.
Ska du exempelvis ha två länkar och ett "streck" i din meny
ska du ha 3 (=2+1) rader nedan, dvs:

#musMenyAv0			{position:absolute; visibility:hidden;}
#musMenyAv1			{position:absolute; visibility:hidden;}
#musMenyAv2			{position:absolute; visibility:hidden;}

...och sedan tre till...
#musMenyPa0			{position:absolute; visibility:hidden;}
#musMenyPa1			{position:absolute; visibility:hidden;}
#musMenyPa2			{position:absolute; visibility:hidden;}

Märker du att ditt script inte fungerar kanske felet
är att du måste lägga till fler rader nedan.
Kom ihåg: Du kan ha fler rader än länkar i menyn, inte tvärt om.
Det är alltså bättre med för många rader än för få.
************************************************* */

#musMenyAv0			{position:absolute; visibility:hidden;}
#musMenyAv1			{position:absolute; visibility:hidden;}
#musMenyAv2			{position:absolute; visibility:hidden;}
#musMenyAv3			{position:absolute; visibility:hidden;}
#musMenyAv4			{position:absolute; visibility:hidden;}
#musMenyAv5			{position:absolute; visibility:hidden;}
#musMenyAv6			{position:absolute; visibility:hidden;}
#musMenyAv7			{position:absolute; visibility:hidden;}
#musMenyAv8			{position:absolute; visibility:hidden;}
#musMenyAv9			{position:absolute; visibility:hidden;}
#musMenyAv10		{position:absolute; visibility:hidden;}
#musMenyAv11		{position:absolute; visibility:hidden;}

#musMenyPa0			{position:absolute; visibility:hidden;}
#musMenyPa1			{position:absolute; visibility:hidden;}
#musMenyPa2			{position:absolute; visibility:hidden;}
#musMenyPa3			{position:absolute; visibility:hidden;}
#musMenyPa4			{position:absolute; visibility:hidden;}
#musMenyPa5			{position:absolute; visibility:hidden;}
#musMenyPa6			{position:absolute; visibility:hidden;}
#musMenyPa7			{position:absolute; visibility:hidden;}
#musMenyPa8			{position:absolute; visibility:hidden;}
#musMenyPa9			{position:absolute; visibility:hidden;}
#musMenyPa10		{position:absolute; visibility:hidden;}
#musMenyPa11		{position:absolute; visibility:hidden;}
//-->
</STYLE>

<SCRIPT LANGUAGE="javascript">
<!--This is one of many scripts which are available at:     *---
//--http://www.JavaScript.nu/javascript                     *---
//--This script is FREE, but you MUST let these lines       *---
//--remain if you use this script.                          *---

// ###########################################################################
// ################# HÄR ÄNDRAR DU HUR DITT SCRIPT SKA SE UT #################
// ###########################################################################

//***---Här anger du färgen som menyn ska ha
tabellBakgrundsfarg="#C0C0C0";

//***---Här anger du färgen på det alternativ som musen är på
bakgrundsfargMusPa="#000080";

//***---Här anger du marginalens färg (marginalen längst upp och till vänster)
marginalFargUppVanster="white";

//***---Här anger du marginalens färg (marginalen längst ner och till höger)
marginalFargNerHoger="black";

//***---Länkarnas bredd och höjd
lankBredd=150;
lankHojd=14;

//***---Marginalen mellan menyns text och menyns vänstra kant
marginalVanster=3;

//***---Marginalen mellan länkarna och menyns yttre kant
menynsSidorStorlek=1;

//***---Du kan här ändra om menyn ska dyka upp exakt där musen är eller lite vid sidan om, ändra som det behagar
flyttaLagretX=0;
flyttaLagretY=0;

//***---Dessa värden ska du INTE ändra om du inte vet vad du gör. Detta är namnen på de olika lagren.
musLagretsNamn="musMeny";
lagernamnAv="musMenyAv";
lagernamnPa="musMenyPa";

function laggTillMenyer()
{

// ###########################################################################
// ############ HÄR ÄNDRAR DU VILKA LÄNKAR SOM SKA FINNAS I MENYN ############
// ###########################################################################
// 
// Vill du inte lägga till fler länkar i menyn och inte vill ta bort några ändrar du inget nedan!
// 
// Lägg till en meny genom att lägga till en rad som denna nedan:
// /* X */	laggTillIMenyn("Sidans namn", "http://www.adress.se/sida.html", "_self");
// 
// (X = ett nummer	"_self" = det som ska stå inom TARGET-attributen.)
// 
// Vill du ha med ett streck skriver du bara:
// /* X */	laggTillIMenyn();
// 
// Ett exempel kan alltså vara:
// /* 1 */	laggTillIMenyn("Länkar", "lankar.html", "_self");
// /* 2 */	laggTillIMenyn();
// /* 3 */	laggTillIMenyn("Bilder", "http://www.adress.se/bilder.html", "_top");
// 
// Vill du bara ta bort något från menyn gör du det simpelt genom att helt enkelt radera den rad du vill bli av med.
// 
// Tänk på: Egentligen behöver du inte ha med  /* 1 */,   /* 2 */,  /* 3 */ etc (du kan ta bort detta om du vill).
// Anledningen till att jag har med detta är för att skapa lite struktur nedan så att du bättre ska se hur många länkar du har.
// Länkarna kommer visas i menyn i den ordning du skriver dem här, INTE efter det nummer du ger dem.

/* 1 */	laggTillIMenyn("Bakåt", goBack, "_self");
/* 2 */	laggTillIMenyn("Framåt", goForward, "_self");
/* 3 */	laggTillIMenyn("Ladda om", reloadSite, "_self");
/* 4 */	laggTillIMenyn();
/* 5 */	laggTillIMenyn("Lägg till bland favoriter", bookmarkSite, "_self");
/* 5 */	laggTillIMenyn("Se sidans källa", viewPageSource, "_self");
/* 6 */		if (top.location!=self.location)laggTillIMenyn("Se framens källa", viewFrameSource, "_self");
/* 7 */	laggTillIMenyn();
/* 8 */		if (top.location!=self.location)laggTillIMenyn("Detta fönster i helskärm", frameIHelskarm, "_self");
/* 9 */	laggTillIMenyn("Denna sida i ett nytt fönster", thisSiteInANewWindow, "_self");
/* 10 */	laggTillIMenyn();
/* 11 */	laggTillIMenyn("Maila mig", "mailto:my@mail.com", "_self");
/* 12 */	laggTillIMenyn("Startsidan", "startsida.html", "_top");

antalLankar=rubrikerArray.length;
}

// ###########################################################################
// ################ÄNDRA INGET NEDAN OM DU INTE VET VAD DU GÖR################
// ###########################################################################

rubrikerArray=new Array();
lankarArray=new Array();
targetArray=new Array();

viewSource="view-source:";
goBack="javascript:history.go(-1)";
goForward="javascript:history.go(1)";
reloadSite="javascript:location.reload()";
bookmarkSite="javascript:bookmark(self.location.href,document.title);";
viewPageSource="javascript:self.location.href=viewSource+self.location.href";
viewFrameSource="javascript:top.location.href=viewSource+top.location.href";
frameIHelskarm="javascript:top.location.href=self.location.href";
thisSiteInANewWindow="javascript:function a(){open(self.location.href)}a()";

function bookmark(url, description)
{
//***---Denna text visas om man har Netscape.
netscape="Tryck först på OK och sedan på CTRL+D för att bookmarka sidan."

if (navigator.appName=='Microsoft Internet Explorer')
{
window.external.AddFavorite(url, description);
}
else if (navigator.appName=='Netscape')
{
alert(netscape);
}
}

function visaDettaLager(lager)
{
geLagerstart(lager).visibility="visible"
}

function doljDettaLager(lager)
{
geLagerstart(lager).visibility="hidden"
}

function lysLager(lagerIndex)
{
slackAllaLager();
visaDettaLager(lagernamnPa+lagerIndex)
}

function slackAllaLager()
{
	for (i=0; i<antalLankar; i++)
	{
	doljDettaLager(lagernamnPa+i);
	}
}

function visaMenyn()
{
	geLagerstart(musLagretsNamn).visibility="visible";

for (i=0; i<antalLankar; i++)
	{
		geLagerstart(lagernamnAv+i).visibility="visible";
	}
}

function doljMenyn()
{
	geLagerstart(musLagretsNamn).visibility="hidden";

for (i=0; i<antalLankar; i++)
	{
		geLagerstart(lagernamnAv+i).visibility="hidden";
		geLagerstart(lagernamnPa+i).visibility="hidden";
	}
}

function initieraLager()
{
	geLagerstart(musLagretsNamn).zIndex=15;
	geLagerstart(musLagretsNamn).visibility="hidden";
	geLagerstart(musLagretsNamn).width=menynsSidorStorlek*2+lankBredd;
	geLagerstart(musLagretsNamn).height=menynsSidorStorlek*2+lankHojd*antalLankar;

for (i=0; i<antalLankar; i++)
	{
		geLagerstart(lagernamnAv+i).zIndex=5;
		geLagerstart(lagernamnAv+i).visibility="hidden";
		geLagerstart(lagernamnAv+i).width=lankBredd;
		geLagerstart(lagernamnAv+i).height=lankHojd;
		geLagerstart(lagernamnAv+i).top=menynsSidorStorlek+i*lankHojd;
		geLagerstart(lagernamnAv+i).left=menynsSidorStorlek;

geLagerstart(lagernamnPa+i).zIndex=10;
		geLagerstart(lagernamnPa+i).visibility="hidden";
		geLagerstart(lagernamnPa+i).width=lankBredd;
		geLagerstart(lagernamnPa+i).height=lankHojd;
		geLagerstart(lagernamnPa+i).top=menynsSidorStorlek+i*lankHojd;
		geLagerstart(lagernamnPa+i).left=menynsSidorStorlek;
	}
}

function skrivUtLager()
{
	skrivUt="";
	skrivUt+="<DIV ID='"+musLagretsNamn+"'>\n";
	skrivUt+="<TABLE BGCOLOR=\""+tabellBakgrundsfarg+"\" BORDERCOLORDARK="+marginalFargNerHoger+" BORDERCOLORLIGHT="+marginalFargUppVanster+" BORDER=1 CELLPADDING=0 CELLSPACING=0 HEIGHT="+(antalLankar*lankHojd+menynsSidorStorlek*2)+" WIDTH="+(lankBredd+menynsSidorStorlek*2)+"><TR><TD> ";
	skrivUt+="</TD></TR></TABLE>";

document.write(skrivUt);
	skrivUt="";

for (i=0; i<antalLankar; i++)
	{
		if (rubrikerArray[i]!="")
		{
			andraTabellFarg=" onMouseOver=\"lysLager("+i+")\" onMouseOut=\"slackAllaLager("+i+")\" onClick=\"doljMenyn();"+geJavaScriptLank(lankarArray[i], targetArray[i])+"\"";

skrivUt+="<DIV "+andraTabellFarg+" ID=\""+lagernamnAv+i+"\"><TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 HEIGHT="+lankHojd+" WIDTH="+lankBredd+" BGCOLOR=\""+tabellBakgrundsfarg+"\"><TR><TD WIDTH='"+marginalVanster+"'><FONT SIZE='-2'> </FONT></TD><TD><A "+andraTabellFarg+" onCLick=\"doljMenyn();\" HREF=\'"+lankarArray[i]+"\' TARGET=\'"+targetArray[i]+"\' CLASS=\'musMenyLankarMusAv\'>"+rubrikerArray[i]+"</A></TD></TR></TABLE></DIV>\n";
			skrivUt+="<DIV "+andraTabellFarg+" ID=\""+lagernamnPa+i+"\"><TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 HEIGHT="+lankHojd+" WIDTH="+lankBredd+" BGCOLOR=\""+bakgrundsfargMusPa+"\"><TR><TD WIDTH='"+marginalVanster+"'><FONT SIZE='-2'> </FONT></TD><TD><A "+andraTabellFarg+" onCLick=\"doljMenyn();\" HREF=\'"+lankarArray[i]+"\' TARGET=\'"+targetArray[i]+"\' CLASS=\'musMenyLankarMusPa\'>"+rubrikerArray[i]+"</A></TD></TR></TABLE></DIV>\n";
		}
		else
		{
			andraTabellFarg=" onMouseOut=\"slackAllaLager("+i+")\"";

document.write(skrivUt);
	skrivUt="";
	}

skrivUt+="</DIV>";
	document.write(skrivUt);
}

function klickArPaMenyn(musX, musY)
{
	if (geLagerstart(musLagretsNamn).visibility == "hidden")
		return false;

x1=parseInt(geLagerstart(musLagretsNamn).left);
x2=x1+parseInt(geLagerstart(musLagretsNamn).width);
y1=parseInt(geLagerstart(musLagretsNamn).top);
y2=y1+parseInt(geLagerstart(musLagretsNamn).height);

if (x1<=musX && musX<=x2 && y1<=musY && musY<=y2)
		return true;

return false;
}

function nomenu() 
{
event.cancelBubble = true 
event.returnValue = false;

return false; 
}

function clickdown(e)
{
	if (!klickArPaMenyn(Xmusposition, Ymusposition))
	{
	doljMenyn();

flytta_lager(musLagretsNamn,Xmusposition,Ymusposition);

if (document.all)
		{
 			if (event.button==2)
			{
				visaMenyn();
				return true;
			}
		}
		else if (document.layers || document.getElementById)
		{
			if (e.which == 3)
			{
				visaMenyn();
				return false;
			}
		}
	}
return false;
}

document.oncontextmenu=nomenu;
document.onmousedown=clickdown;

laggTillMenyer();
skrivUtLager();
initieraLager();
slackAllaLager();

if (document.all || document.getElementById)	//Explorer, Netscape 6
{
	document.onmousemove = musen_flyttar;	//musen_flyttar anropas då musen flyttas
}
else if (document.layers)			//Netscape
{
	window.captureEvents(Event.MOUSEMOVE);
	window.onMouseMove = musen_flyttar;	//musen_flyttar anropas då musen flyttas
}

var Xmusposition, Ymusposition;			//Variabler som innehåller musens position

Om du inte vet hur du ska spara JavaScriptet till din hemsida, tryck då här.