-copycat-
Goto Top

Javascript, button soll maus folgen aber z-index wirkt nicht

Tagchen

Ich habe auf meiner Seite ein kleines Javascript integriert, durch welchse ein "Button" in meiner horizontalen Menüleiste der Maus folgt. Das Problem ist allerdings, dass dieser Button über mein eigentliches Menü rollt, d.h. der Button liegt "Layermässig" über meinem Menü und somit sind meine Menüelemente nicht mehr anklickbar. Ich habe dazu schon einige Threads gelesen, wo ich überall las, dass man solche Gegebenheiten mit der z-index Definierung lösen kann, aber wenn ich meinem Menü-div den z-index 10 zuweise und dem "Button"-div den z-index 1, schwebt letzterer immer noch über dem Menü.

Hier ein paar Codeschnipsel:

css:
#buttonroll {
	position: absolute;
	left:0px;
	top:136px;
	z-index:1;
}

#menu_oben_content {
	text-align:left;
	margin:0 auto;
	padding:22px 0 0;
	height:28px;
	width:800px;
	z-index:10;
}

javascript:
<script type="text/javascript" >  

ua = navigator.userAgent.toLowerCase();
uv = parseInt(navigator.appVersion);
if(ua.indexOf('opera') != -1 && uv >= 4){browser = 'OP'}  
else if(ua.indexOf('msie') != -1 && uv >= 4){browser = 'IE'}  
else if(uv == 4){browser = 'NN4'}  
else if(uv >= 5){browser = 'NN6'}  

function startroll()
{
	onmousemove = scrolling;
}

function scrolling(e)
{
	if(browser == 'IE'){ x = window.event.x; y = window.event.y;}  
 	else if(browser == 'NN6') { x = e.clientX; y = e.clientY;}  
 	else{ x = e.x; y = e.y; }
	
 	id = 'buttonroll';  
	if(browser == 'OP'){document.getElementById(id).style.zIndex = 1;}  
 	else if(browser == 'IE'){document.all[id].style.zIndex = 1;}  
 	else if(browser == 'NN4'){document[id].zIndex = 1;}  
 	else if(browser == 'NN6'){document.getElementById(id).style.zIndex = 1;}  
	
 	if(browser == 'OP'){document.getElementById(id).style.left = x-50;}  
 	else if(browser == 'IE'){document.all[id].style.left = x-50+'px';}  
 	else if(browser == 'NN4'){document[id].left = x-50;}  
 	else if(browser == 'NN6'){document.getElementById(id).style.left = x-50+'px';}  
}

function stoproll(e)
{
	onmousemove = null;
}

</script>

hoffe jemand weiss hier ne antwort, bei fragen... einfach fragen ;)

Gruss Jinxy

Content-Key: 120476

Url: https://administrator.de/contentid/120476

Printed on: April 27, 2024 at 09:04 o'clock

Member: nxclass
nxclass Jul 15, 2009 at 06:49:47 (UTC)
Goto Top
Zitat: "... Die Schichtposition orientiert sich darüber hinaus an der des Elternelements. ..."
Quelle: http://de.selfhtml.org/css/eigenschaften/positionierung.htm#z_index

ggf. fehlt die CSS Eigenschaft: 'position' für dein Menü !?
Member: -CopyCat-
-CopyCat- Jul 15, 2009 at 13:57:45 (UTC)
Goto Top
Vielen Dank für den Link, lag tatsächlich an der position-Angabe, funktioniert jetzt bestens face-smile

Gruss Jinxy