dhtml meny

Hej,

Jag är i behov av en meny som funkar som följer.

En länk som när man gör "onmouseover" på, öppnas ett lager med "onmouseover"-bilder". när man för musen bort från lagret försvinner lagret med bilderna.
Det skall inte vara några "undermenyer".

detta är ju ett klassiskt problemscript och jag har sett många liknande. Har kollat på Bratta, dynamic duo och diverse andra ställen. Men antingen är scripten bristfälliga (funkar inte i NS6 bl.a) eller så har dom inte rätt funktioner. Någon som har något liknande script eller så att dela med sig av?

------------------
>>> Jonspion
http://www.jonspion.com

Ett litet exempel som fungerar i Netscape 4+, IE4+, och DOM-kompatibla webbläsare (som Netscape 6);

<script language="JavaScript" type="text/javascript">
function showLayer(Id){
	if (document.all) {
		document.all[Id].style.visibility = "visible";
	} else if (document.layers){
		document.layers[Id].visibility = "show";
	} else if (document.getElementById){
		document.getElementById(Id).style.visibility = "visible";
	}
}
function hideLayer(Id){
	if (document.all) {
		document.all[Id].style.visibility = "hidden";
	} else if (document.layers){
		document.layers[Id].visibility = "hide";
	} else if (document.getElementById){
		document.getElementById(Id).style.visibility = "hidden";
	}
}
</script>

<div id="myLayer" style="position:absolute;left:100px;top:100px;">...här ligger det bilder...</div>

<a href="sida.html" onMouseover="showLayer('myLayer');" onMouseout="hideLayer('myLayer');">...en bild...</a>

------------------

/ J

Tack!!

Fast lagret försvinner när man tar "onmouseout" på länken. Det skall vara som en meny att man kan klicka på bilderna i lagret.

Alltså; lagret skall försvinna på "onmouseout" på lagret som visas "onmouseover". Oj lät krångligt.. hoppas du förstår principen. Går det att göra?

------------------
>>> Jonspion
http://www.jonspion.com

Alltså; lagret skall försvinna på "onmouseout" på lagret som visas "onmouseover". Oj lät krångligt.. hoppas du förstår principen. Går det att göra?

Det är klurigare om det skall fungera även i Netscape 4.x som inte har stöd för dessa events på lager. En liten variant kan vara detta, som gömmer föregående meny när man väljer en annan.

<script language="JavaScript" type="text/javascript">
curr="";
function showLayer(Id){
if (document.all) {
document.all[Id].style.visibility = "visible";
} else if (document.layers){
document.layers[Id].visibility = "show";
} else if (document.getElementById){
document.getElementById(Id).style.visibility = "visible";
}
}
function hideLayer(Id){
if (document.all) {
document.all[Id].style.visibility = "hidden";
} else if (document.layers){
document.layers[Id].visibility = "hide";
} else if (document.getElementById){
document.getElementById(Id).style.visibility = "hidden";
}
}
</script>
<div id="myLayerA" style="position:absolute;visibility:hidden;left:100px;top:100px;">...här ligger det bilder...</div>
<div id="myLayerB" style="position:absolute;visibility:hidden;left:100px;top:120px;">...här ligger det bilder...</div>
<div id="myLayerC" style="position:absolute;visibility:hidden;left:100px;top:140px;">...här ligger det bilder...</div>

<a href="#" onMouseover="if(curr){ hideLayer(curr); } showLayer('myLayerA');curr='myLayerA';">...en bild...</a>
<a href="#" onMouseover="if(curr){ hideLayer(curr); } showLayer('myLayerB');curr='myLayerB';">...en bild...</a>
<a href="#" onMouseover="if(curr){ hideLayer(curr); } showLayer('myLayerC');curr='myLayerC';">...en bild...</a>

------------------

/ J

Oj, Tackar tackar för dina snabba svar!!

Den menyn var mycket bättre. fast tyvärr kan jag inte ha det så att en meny försvinner när man klickar på en annan.... jag kommer bara ha en enda meny. hmm..

Har sett att vissa använder sig av ett stort lager över hela sidan för att få bort menyerna, när man för över det lagret går menyerna bort. kan det vara en lösning? eller är det kört att fixa så att det funkar i Netscape?

------------------
>>> Jonspion
http://www.jonspion.com

Eller kan man göra så att när man klickar på länken för att öppna menyn så stänger man den aktiva menyn? Menyn öppnas ju onMouseover, kan man stänga den med onMouseClick då kanske?

------------------
>>> Jonspion
http://www.jonspion.com

Jovisst, använd onClick="if(curr){ hideLayer(curr); }". Detta lägger du alltså antingen in på länkarna i menyn, eller på meny-bilderna om du har fler menyer. Tänk på att om du vill att det skall fungera i Netscape 4 så bör du lägga dessa events (onClick, onMouseover, onMouseout, etc.) på länkar (<a...> ).

Har sett att vissa använder sig av ett stort lager över hela sidan för att få bort menyerna, när man för över det lagret går menyerna bort.

Du kan alltså inte använda onMouseover/out direkt på lager i Netscape 4.x. Den reagerar inte på det.

------------------

/ J

Om man vill ha onmouseover på lager i NN4.x kan man lägga till <layer>

Ex:

<head>
<script language="JavaScript" type="text/javascript">

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

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

</script>
</head>

<div id="lagret" style="position:absolute;visibility:hidden;left:100px;top:100px;" onMouseOver="showLayer('lagret');" onMouseOut="hideLayer('lagret');">
<layer onMouseOver="showLayer('lagret');" onMouseOut="hideLayer('lagret');">
<a href="">bild</a><br>
<a href="">bild</a><br>
<a href="">bild</a><br>
</layer>
</div>
 
<a href="#" onMouseover="showLayer('lagret');">Visa lagret</a>

------------------
- J-O-H-N-S-E-N -
------------------

Har inte detta varit uppe förut.

Eller finns det inte på bratta.com?

------------------
Buuuu för signatur! :)

Tack för alla svar!

Ska laborera lite o se om jag kan få igång menyn på ett bra sätt!

------------------
>>> Jonspion
http://www.jonspion.com