webForumDet fria alternativet

dropdownmeny försvinner inte

5 svar · 369 visningar · startad av roady

roadyMedlem sedan jan. 2002473 inlägg
#1

Jag har hittat ett javascript där man har en dropdown meny med bilder o så, precis som jag vill ha det.
Så efter en hel del omarbetning så funkar det ungefär som jag vill ha det.. men..

mitt problem är bara att när jag tar musen utanför det som "trillar ner" så skall den ju försvinna, hur löser jag detta ?

någon med tips eller ideér ???

Web-TorMedlem sedan nov. 200013 890 inlägg
#2

Det kan nog hjälpa om du visar lite kod. ;)

roadyMedlem sedan jan. 2002473 inlägg
#3

hihi.. a det är möjligt,, tänkte bara att många blir nog irreterade om man slänger in allt bara.

Så här ser huvudfilen ut iallafall. den där länkarna ligger o så, div lagrena har jag ett stylesheat som positionerar ut dem.

scriptet är kanske lite stort, men det behöver funka i alla läsare...

<A onmouseover="imgOn('1');layer_hideAll();" onmouseout="imgOff('1')" href="#">	
<IMG src="images/menu_sv_1_off.gif" alt="" name="topnav_1" width="89" height="18" border=0></A> 
<A onmouseover="imgOn('2');layer_Show('2');" onmouseout="imgOff('2')" href="#">	
<IMG src="images/menu_sv_2_off.gif" alt="" name="topnav_2" width="58" height="18" border=0></A> 
<A onmouseover="imgOn('3');layer_Show('3');" onmouseout="imgOff('3')" href="#">	
<IMG src="images/menu_sv_3_off.gif" alt="" name="topnav_3" width="92" height="18" border=0></A> 
<A onmouseover="imgOn('4');layer_Show('4');" onmouseout="imgOff('4')" href="#">	
<IMG src="images/menu_sv_4_off.gif" alt="" name="topnav_4" width="95" height="18" border=0></A> 

	
<div id="subnav_2" class="subnav_2"> <a onmouseover="mImgOn_D2('2','1');" onmouseout="mImgOff_D2('2','1')" href="#"><IMG src="images/menu_sv_2_1_off.gif" alt="" name="subnav_2_1" width="156" height="21" border=0></A><br>
	<a onmouseover="mImgOn_D2('2','2');" onmouseout="mImgOff_D2('2','2')" href="#"><IMG src="images/menu_sv_2_2_off.gif" alt="" name="subnav_2_2" width="156" height="21" border=0></A><br>
	<a onmouseover="mImgOn_D2('2','3');" onmouseout="mImgOff_D2('2','3')" href="#"><IMG src="images/menu_sv_2_3_off.gif" alt="" name="subnav_2_3" width="156" height="21" border=0></A> 
</div>
		
	
<div id="subnav_3" class="subnav_3"> <a onmouseover="mImgOn_D3('3','1');" onmouseout="mImgOff_D3('3','1')" href="#"><IMG src="images/menu_sv_3_1_off.gif" alt="" name="subnav_3_1" width="90" height="21" border=0></A><br>
  <a onmouseover="mImgOn_D3('3','2');" onmouseout="mImgOff_D3('3','2')" href="#"><IMG src="images/menu_sv_3_2_off.gif" alt="" name="subnav_3_2" width="90" height="22" border=0></A><br>
  <a onmouseover="mImgOn_D3('3','3');" onmouseout="mImgOff_D3('3','3')" href="#"><IMG src="images/menu_sv_3_3_off.gif" alt="" name="subnav_3_3" width="90" height="20" border=0></A> 
</div>

	
<div id="subnav_4" class="subnav_4"> <a onmouseover="mImgOn_D4('4','1');" onmouseout="mImgOff_D4('4','1')" href="#"><IMG src="images/menu_sv_4_1_off.gif" alt="" name="subnav_4_1" width="112" height="21" border=0></A><br>
  <a onmouseover="mImgOn_D4('4','2');" onmouseout="mImgOff_D4('4','2')" href="#"><IMG src="images/menu_sv_4_2_off.gif" alt="" name="subnav_4_2" width="112" height="22" border=0></A><br>
  <a onmouseover="mImgOn_D4('4','3');" onmouseout="mImgOff_D4('4','3')" href="#"><IMG src="images/menu_sv_4_3_off.gif" alt="" name="subnav_4_3" width="112" height="20" border=0></A> 
</div>

Sedan kommer här min javascript fil som jag inkluderar.


// kolla webbläsaren
var NS = (document.layers) ? 1 : 0;
var IE = (document.all && document.getElementById) ? 1 : 0;
var N6 = (!document.all && document.getElementById) ? 1 : 0;
var hideMenu = null;

// fixa bilderna
if(document.images){
	for (i=1; i<=5; i++){
		eval("topnav_"+i+"_off = new Image()");eval("topnav_"+i+"_off.src = 'images/menu_sv_"+i+"_off.gif'");
		eval("topnav_"+i+"_on = new Image()");eval("topnav_"+i+"_on.src = 'images/menu_sv_"+i+"_on.gif'");
	}

	for (i=1; i<=3; i++){
		eval("subnav_2_"+i+"_off=new Image()");eval("subnav_2_"+i+"_off.src='images/menu_sv_2_"+i+"_off.gif'");
		eval("subnav_2_"+i+"_on=new Image()");eval("subnav_2_"+i+"_on.src='images/menu_sv_2_"+i+"_on.gif'");
	}
	for (i=1; i<=3; i++){
		eval("subnav_3_"+i+"_off=new Image()");eval("subnav_3_"+i+"_off.src='images/menu_sv_3_"+i+"_off.gif'");
		eval("subnav_3_"+i+"_on=new Image()");eval("subnav_3_"+i+"_on.src='images/menu_sv_3_"+i+"_on.gif'");
	}	
	for (i=1; i<=4; i++){
		eval("subnav_4_"+i+"_off=new Image()");eval("subnav_4_"+i+"_off.src='images/menu_sv_4_"+i+"_off.gif'");
		eval("subnav_4_"+i+"_on=new Image()");eval("subnav_4_"+i+"_on.src='images/menu_sv_4_"+i+"_on.gif'");
	}
}

// rollover för bilden
function imgOn(Num) {
	layer_hideAll();
	if (document.images) {
		document.images["topnav_" +Num].src = eval("topnav_" +Num+ "_on.src")
	}
}

function imgOff(Num) {
	if (document.images) {
		document.images["topnav_" +Num].src = eval("topnav_" +Num+ "_off.src")
	}
}

function layer_hideAll(){
	layer_Hide('2');
	layer_Hide('3');
	layer_Hide('4');
}

// göm lager
function layer_Hide(div){
	if(IE)eval('document.all.subnav_'+div+'.style.visibility="hidden"');
	if(NS)eval('document.subnav_'+div+'.visibility="hidden"');
	if(N6) {
		switch (div){
			case "2": 
				layer_elm = document.getElementById('subnav_2');
				break;
			case "4": 
				layer_elm = document.getElementById('subnav_4');
				break;
		}
	layer_elm.style.visibility = "hidden";
	}
}

// visa lager
function layer_Show(div){
	if(IE)eval('document.all.subnav_'+div+'.style.visibility="visible"');
	if(NS)eval('document.subnav_'+div+'.visibility="visible"');
	if(N6) {
		switch (div){
		case "2": 
			layer_elm = document.getElementById('subnav_2');
			break;
		case "4":
			layer_elm = document.getElementById('subnav_4');
			break;
		}
	layer_elm.style.visibility = "visible";
	}
}

//MenuMouseOver for div2
function mImgOn_D2(divNum,Num) {
clearTimeout(hideMenu);
if (document.images) {
	if(IE){
		document.images["subnav_" +divNum+ "_" +Num].src = eval("subnav_" +divNum+ "_" +Num+ "_on.src")
	}
	if(NS){
		document.subnav_2.document.images["subnav_" +divNum+ "_" +Num].src = eval("subnav_" +divNum+ "_" +Num+ "_on.src")
	}
	if(N6){
		img2 = document.getElementById("subnav_2").getElementsByTagName("IMG");
		img2[Num].src = eval("subnav_" +divNum+ "_" +Num+ "_on.src")
	}
}
}

function mImgOff_D2(divNum,Num) {
if (document.images) {
	if(IE){
		document.images["subnav_" +divNum+ "_" +Num].src = eval("subnav_" +divNum+ "_" +Num+ "_off.src")
	}
	if(NS){
		document.subnav_2.document.images["subnav_" +divNum+ "_" +Num].src = eval("subnav_" +divNum+ "_" +Num+ "_off.src")
	}
	if(N6){
		img2 = document.getElementById("subnav_2").getElementsByTagName("IMG");
		img2[Num].src = eval("subnav_" +divNum+ "_" +Num+ "_off.src")
	}
}
}

//MenuMouseOver for div3
function mImgOn_D3(divNum,Num) {
clearTimeout(hideMenu);
if (document.images) {
	if(IE){
		document.images["subnav_" +divNum+ "_" +Num].src = eval("subnav_" +divNum+ "_" +Num+ "_on.src")
	}
	if(NS){
		document.subnav_3.document.images["subnav_" +divNum+ "_" +Num].src = eval("subnav_" +divNum+ "_" +Num+ "_on.src")
	}
	if(N6){
		img3 = document.getElementById("subnav_3").getElementsByTagName("IMG");
		img3[Num].src = eval("subnav_" +divNum+ "_" +Num+ "_on.src")
	}
}
}

function mImgOff_D3(divNum,Num) {
if (document.images) {
	if(IE){
		document.images["subnav_" +divNum+ "_" +Num].src = eval("subnav_" +divNum+ "_" +Num+ "_off.src")
	}
	if(NS){
		document.subnav_3.document.images["subnav_" +divNum+ "_" +Num].src = eval("subnav_" +divNum+ "_" +Num+ "_off.src")
	}
	if(N6){
		img3 = document.getElementById("subnav_3").getElementsByTagName("IMG");
		img3[Num].src = eval("subnav_" +divNum+ "_" +Num+ "_off.src")
	}
}
}
//MenuMouseOver for div4
function mImgOn_D4(divNum,Num) {
clearTimeout(hideMenu);
if (document.images) {
	if(IE){
		document.images["subnav_" +divNum+ "_" +Num].src = eval("subnav_" +divNum+ "_" +Num+ "_on.src")
	}
	if(NS){
		document.subnav_4.document.images["subnav_" +divNum+ "_" +Num].src = eval("subnav_" +divNum+ "_" +Num+ "_on.src")
	}
	if(N6){
		img4 = document.getElementById("subnav_4").getElementsByTagName("IMG");
		img4[Num].src = eval("subnav_" +divNum+ "_" +Num+ "_on.src")
	}
}
}

function mImgOff_D4(divNum,Num) {
if (document.images) {
	if(IE){
		document.images["subnav_" +divNum+ "_" +Num].src = eval("subnav_" +divNum+ "_" +Num+ "_off.src")
	}
	if(NS){
		document.subnav_4.document.images["subnav_" +divNum+ "_" +Num].src = eval("subnav_" +divNum+ "_" +Num+ "_off.src")
	}
	if(N6){
		img4 = document.getElementById("subnav_4").getElementsByTagName("IMG");
		img4[Num].src = eval("subnav_" +divNum+ "_" +Num+ "_off.src")
	}
}
}
roadyMedlem sedan jan. 2002473 inlägg
#4

som sagt va så blir det lite mycket :(

ingen som kan hjälpa en med tanke gångar o sådant då,
hur skall jag tänka osv... måste få detta o funka ju x(

Web-TorMedlem sedan nov. 200013 890 inlägg
#5

Du kanske kan titta hur dom gjort här:
http://www.dhtmlcentral.com/projects/coolmenus/examples/menu1.html

roadyMedlem sedan jan. 2002473 inlägg
#6

löste det efter mycket om o men...
en länk blir såhär

<a onmouseover="mImgOn_D4('4','3');" onmouseout="mImgOff_D4('4','3');timeMeny()" onclick="layer_hideAll()" href="arrangemang.asp" target="bodyMain">länk</a>

sedan i min inkluderade javascript fil lade jag till

// göm lager efter musen försvinner
function timeMeny(){
	hideMenu = setTimeout('layer_hideAll()',50)
}

vet inte hur säkert det är, men det funkar på de flesta browsers tror jag.

139 ms totalt · 3 externa anrop · v20260731065814-full.30151723
0 ms — hämta forumlista (cache)
0 ms — hämta statistik (cache)
136 ms — hämta tråd, inlägg och bilagor (db)