OnMouseOut når to DIVer ligger oppå hverandre

[Kenneth Dammyr]

Hei

 

Nå har jeg sittet alt for sent i flere kvelder og sprengt det lille som er av hjernekapasitet. Og nå "gir" jeg opp.

Har såvidt begynt å bruke javascript, men skal ærlig innrømme at ferdighetene ikke akkurat blomstrer. Her er casen:

 

Jeg har en side med to små menyer:

 

<div id="modeller">
	<div style="filter:alpha(opacity=0);-moz-opacity:.0;opacity:.0;" id="linker1" onmouseover="toggle('black1', 250)"><ul><li><a href="#">Link</a></li><li>Link</li><li>Link</li><ul></div>
	<div style="filter:alpha(opacity=0);-moz-opacity:.0;opacity:.0;" id="black1" onmouseout="closelink1()" ></div>
	<img src="modeller.jpg" />
</div>

<div id="miljo">
	<div style="filter:alpha(opacity=0);-moz-opacity:.0;opacity:.0;" id="linker2" onmouseover="toggle('black2', 250)"><ul><li><a href="#">Link</a></li><li>Link</li><li>LInk</li><ul></div>
	<div style="filter:alpha(opacity=0);-moz-opacity:.0;opacity:.0;" id="black2" onmouseout="closelink2()"></div>
	<img src="miljo.jpg" />
</div>

 

Slik fungerer det: linker1 ligger over bildet og er først usynlig. Når musa beveger seg over bildet, og dermed også linker1, starter "moroa". Menyen kjøres opp, teksten fades, alt fungerer som det skal. Joho.

Den essensielle javascript-koden:

 

function closelink1() {
		t1A = new Tween(document.getElementById('linker1').style,'bottom',Tween.strongEaseOut,158,8,0.5,'px');
		t1B = new Tween(document.getElementById('black1').style,'height',Tween.strongEaseOut,300,150,0.5,'px');
		t1C = new Tween(document.getElementById('black1').style,'bottom',Tween.strongEaseOut,8,8,0.5,'px');
		t1D = new Tween(document.getElementById('linker1').style,'opacity',Tween.strongEaseOut,100,0,0.5,'px');
		t1A.start();
		t1B.start();
		t1C.start();
		t1D.start();
		fade("linker1", 250, 100, 0);
		fade("black1", 250, 50, 0);	
}

function closelink2() {
		t2A = new Tween(document.getElementById('linker2').style,'bottom',Tween.strongEaseOut,158,8,0.5,'px');
		t2B = new Tween(document.getElementById('black2').style,'height',Tween.strongEaseOut,300,150,0.5,'px');
		t2C = new Tween(document.getElementById('black2').style,'bottom',Tween.strongEaseOut,8,8,0.5,'px');
		t2D = new Tween(document.getElementById('linker2').style,'opacity',Tween.strongEaseOut,100,0,0.5,'px');
		t2A.start();
		t2B.start();
		t2C.start();
		t2D.start();
		fade("linker2", 250, 100, 0);
		fade("black2", 250, 50, 0);	
}


/* toggle() checks to see if the images has already been faded
   or not and sends the appropriate variables to opacity(); */
function toggle(el,milli) {
	// Get the opacity style parameter from the image
	var currOpacity = document.getElementById(el).style.opacity;
	if(currOpacity != 0 && linkon == true) { // if not faded
		fade(el, milli, 50, 0);
	} else { // else the images is already faded
		if(el == "black1") {
		fade("linker1", 1000, 0, 100);	
		fade(el, milli, 0, 50);	
		t1A = new Tween(document.getElementById('linker1').style,'bottom',Tween.strongEaseOut,0,158,0.5,'px');
		t1B = new Tween(document.getElementById('black1').style,'height',Tween.strongEaseOut,150,300,0.5,'px');
		t1C = new Tween(document.getElementById('black1').style,'bottom',Tween.strongEaseOut,0,8,0.5,'px');
		t1D = new Tween(document.getElementById('linker1').style,'opacity',Tween.strongEaseOut,0,100,0.5,'px');
		t1A.start();
		t1B.start();
		t1C.start();
		t1D.start();
		}
		if(el == "black2") {
		fade("linker2", 1000, 0, 100);	
		fade(el, milli, 0, 50);	
		t2A = new Tween(document.getElementById('linker2').style,'bottom',Tween.strongEaseOut,0,158,0.5,'px');
		t2B = new Tween(document.getElementById('black2').style,'height',Tween.strongEaseOut,150,300,0.5,'px');
		t2C = new Tween(document.getElementById('black2').style,'bottom',Tween.strongEaseOut,0,8,0.5,'px');
		t2D = new Tween(document.getElementById('linker2').style,'opacity',Tween.strongEaseOut,0,100,0.5,'px');
		t2A.start();
		t2B.start();
		t2C.start();
		t2D.start();
		}
	}
}

 

 

 

Jeg har også klart å lage en funksjon(closelink1/2) som lukker menyen. Den er sikkert 3 ganger så komplisert som den behøver og sikkert helt på jordet, men den funker og det holder for meg.

 

Problemet:

Som dere ser ligger det flere div-elementer oppå hverandre. Det fører til at en enkel onmouseout på en eller flere av dem bare fører til kaos. Menyen spretter som Snurre Sprett på steroider og vil definitivt ikke passere i kategorien "brukervennlig design". Jeg har funnet ut at det har sammenheng med hvilket element som ligger øverst og nederst. Og denne karen skriver mye | lurt, uten at jeg forstår noe av det. Så spørsmålet er enkelt:

 

Kan dere hjelpe meg?

Endret 23. april 2008 av Kenneth Dammyr