nicht angemeldet
Hallo!
ich hätte eine frage, ich hab bei diesem Quelltext die tabelle unten bei den hauptlinks so geändertet, das die links nicht mehr neben einander stehen sondern untereinander. Jetzt hab ich aber das problem das die felder die entstehen wenn man auf einen hauptlink geht(unterlinks in diesem script link1,link2,...) nicht auf der gleichen stelle, sondern wieder nebeneinander angezeigt werden, leider bin ich kein programmiergenie..und weiß jetzt nicht genau wie ich das umändern soll...
es wäre echt nett von euch wenn mir jemand helfen könnte viele liebe grüße und danke im voraus daniel
<HTML> <HEAD> <TITLE>dropdowns_html</TITLE> <META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <SCRIPT language="JavaScript"><!--
/* The ultimate DHTML drop-down code Nick Nettleton www.computerarts.co.uk || www.fluid7.co.uk
This must be the single most requested bit of code in the history of Computer Arts, so we've decided to make it user-friendly and adaptable for everyone. Stacks more goodies to come too - head to one of the above sites for regular infoa nd updates. Works with v4 and v5 browsers - both IE and NS. Update for NS6 coming. Also, be aware there's no way to automatically centre layers in the window - a JS for this coming soon. In the meantime, stick with left-aligned. Keep an eye out for update for NS6.
You can adapt, use and distribute this code under GNU public licence, as long as: (1) You leave all the comment and credit lines in, including these ones (2) You don't sell it for profit
If you want to tweak the code yourself, use the f7_droplayer to set the names of the dropdowns, and just call f7_showdrop(n) and f7_hdidedrop from onmouseover, onmouseout and other events. Swap n for the number of the layer as in the array.
Enjoy!!! */
//names of dropdowns stored here f7_droplayer=new Array() f7_droplayer[0]="drop1" f7_droplayer[1]="drop2" f7_droplayer[2]="drop3" f7_droplayer[3]="drop4" f7_droplayer[4]="drop5" f7_droplayer[5]="drop6" f7_droplayer[6]="drop7"
//simple browser check f7_v4=(parseInt(navigator.appVersion)>=4 && parseInt(navigator.appVersion)<=5)?1:0 f7_ie=(document.all && f7_v4)?1:0 f7_ns=(document.layers && f7_v4)?1:0
//code for drops
function f7_showdrop(thelayer){ f7_keep=thelayer; f7_hideall(); f7_showitnow=1 f7_showit(thelayer) }
function f7_showit(thelayer){ if(f7_ie){ eval(f7_droplayer[thelayer]+'.style.visibility="visible"') } if(f7_ns){ eval('document.'+f7_droplayer[thelayer]+'.visibility="show"');} }
function f7_hidedrop(){ f7_keep=-1; setTimeout('f7_hideall()',500) }
f7_keep=-1
function f7_hideall(){ for(i=0;i<f7_droplayer.length;i++){ f7_hideit=0; f7_checkmousepos(i) if(f7_ie && f7_keep!=i){ if(f7_hideit){ eval(f7_droplayer[i]+'.style.visibility="hidden"') } } if(f7_ns && f7_keep!=i){ if(f7_hideit){ eval('document.'+f7_droplayer[i]+'.visibility="hide"') } } } }
//deal with cursor over layer document.onmousemove = f7_getmousepos if (f7_ns) document.captureEvents(Event.MOUSEMOVE)
function f7_getmousepos(e){ if(f7_ns){f7_mousex=e.pageX; f7_mousey=e.pageY} if(f7_ie){f7_mousex=event.clientX; f7_mousey=event.clientY;} }
function f7_checkmousepos(i){ if(f7_ns){ f7_x_min=eval('document.'+f7_droplayer[i]+'.left') f7_x_max=f7_x_min+eval('document.'+f7_droplayer[i]+'.clip.width') f7_y_min=eval('document.'+f7_droplayer[i]+'.top') f7_y_max=f7_y_min+eval('document.'+f7_droplayer[i]+'.clip.height') } if(f7_ie){ f7_x_min=eval(f7_droplayer[i]+'.style.pixelLeft') f7_x_max=f7_x_min+eval(f7_droplayer[i]+'.scrollWidth') f7_y_min=eval(f7_droplayer[i]+'.style.pixelTop') f7_y_max=f7_y_min+eval(f7_droplayer[i]+'.scrollHeight') } if (f7_mousex>=f7_x_min && f7_mousex<=f7_x_max && f7_mousey>=f7_y_min && f7_mousey<=f7_y_max){ f7_hideit=0; setTimeout('f7_hideall()',500) } else { f7_hideit=1 } return f7_hideit }
//--></SCRIPT> <SCRIPT language="JavaScript"><!--
//browser stylesheets
if(f7_ie){ document.write('<style type="text/css"><!--')
document.write('.dropdown {height:1px; width:1px; padding-left:10px; padding-top:10px; padding-right:10px; padding-bottom:10px;}') document.write('p { margin-top:0px; margin-bottom:6px }') document.write('a { text-decoration: none }') document.write('a:hover { color: white; text-decoration: underline }') document.write('--></style>') }
//--></SCRIPT> <STYLE type="text/css"> <!--
p { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 15px; line-height:17px} td { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 15px;}
.header { font: bold 24px Arial, Verdana, Helvetica, sans-serif } .subhead { font-weight: bold; font-size: 12px } .list { font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 12px; text-decoration: none } .forms { font-size: 12px; font-family: Arial, Verdana, Helvetica, sans-serif }
.dropdown { position: absolute; color:black; width:140px; border: #000000; border-style: solid; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; background-color: #EFEFEF; layer-background-color: #EFEFEF; top:110px; z-index:1; visibility: hidden ;} .drophead { color:#333333; font: bold 12px Verdana, Arial, Helvetica, sans-serif; text-decoration:none } .dropitem { text-decoration:none; color:black; font: 12px Arial, Verdana, Helvetica, sans-serif;} .drophead:hover { color:black; text-decoration:none } .dropitem:hover { color:black; font: bold }
--> </STYLE> </HEAD>
<BODY bgcolor="#000000" text="#FFFFFF" link="#FFFFFF" vlink="#FFFFFF" alink="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<DIV id="drop1" class="dropdown" style="left:1px;" onmouseover="f7_showdrop(0)" onmouseout="f7_hidedrop()"> <P>• <A href="#" class="dropitem">Link 1 xxxxxxx</A><BR> • <A href="#" class="dropitem">Link 1</A><BR> • <A href="#" class="dropitem">Link 1</A><BR> • <A href="#" class="dropitem">Link 1</A></P> </DIV> <DIV id="drop2" class="dropdown" style="left:61px;" onmouseover="f7_showdrop(1)" onmouseout="f7_hidedrop()"> <P>• <A href="#" class="dropitem">Link 1</A><BR> • <A href="#" class="dropitem">Link 1</A><BR> • <A href="#" class="dropitem">Link 1</A><BR> • <A href="#" class="dropitem">Link 1</A></P> </DIV> <DIV id="drop3" class="dropdown" style="left" onmouseover="f7_showdrop(2)" onmouseout="f7_hidedrop()"> <P>• <A href="#" class="dropitem">Link 1</A><BR> • <A href="#" class="dropitem">Link 1</A><BR> • <A href="#" class="dropitem">Link 1</A><BR> • <A href="#" class="dropitem">Link 1</A></P> </DIV> <DIV id="drop4" class="dropdown" style="left" onmouseover="f7_showdrop(3)" onmouseout="f7_hidedrop()"> <P>• <A href="#" class="dropitem">Link 1</A><BR> • <A href="#" class="dropitem">Link 1</A><BR> • <A href="#" class="dropitem">Link 1</A><BR> • <A href="#" class="dropitem">Link 1</A></P> </DIV> <DIV id="drop5" class="dropdown" style="left" onmouseover="f7_showdrop(4)" onmouseout="f7_hidedrop()"> <P>• <A href="#" class="dropitem">Link 1</A><BR> • <A href="#" class="dropitem">Link 1</A><BR> • <A href="#" class="dropitem">Link 1</A><BR> • <A href="#" class="dropitem">Link 1</A></P> </DIV> <DIV id="drop6" class="dropdown" style="left" onmouseover="f7_showdrop(5)" onmouseout="f7_hidedrop()"> <P>• <A href="#" class="dropitem">Link 1</A><BR> • <A href="#" class="dropitem">Link 1</A><BR> • <A href="#" class="dropitem">Link 1</A><BR> • <A href="#" class="dropitem">Link 1</A></P> </DIV> <DIV id="drop7" class="dropdown" style="left" onmouseover="f7_showdrop(6)" onmouseout="f7_hidedrop()"> <P>• <A href="#" class="dropitem">Link 1</A><BR> • <A href="#" class="dropitem">Link 1</A><BR> • <A href="#" class="dropitem">Link 1</A><BR> • <A href="#" class="dropitem">Link 1</A></P> </DIV>
<TABLE width="150" height="400"border="0" cellspacing="0" cellpadding="0">
<TR> <TD bgcolor="#efc562"> <TABLE width="150" height="300"border="0" cellspacing="0" cellpadding="0"> <TR><TD bgcolor="#000000" width="1"><IMG src="/_artwork/shim.gif" width="1" height="1"></TD> <TD width="150" align="left"><A href="#" class="drophead" onmouseover="f7_showdrop(0)" onmouseout="f7_hidedrop()"><B>Home</B></A> </TD> <TR> <TD bgcolor="#000000" width="1"><IMG src="/_artwork/shim.gif" width="1" height="1"></TD> <TD width="150" align="left"> <A href="#" class="drophead" onmouseover="f7_showdrop(1)" onmouseout="f7_hidedrop()"><B>AvW Index</B></A></TR> </TD> <TR><TD bgcolor="#000000" width="1"><IMG src="/_artwork/shim.gif" width="1" height="1"></TD> <TD width="150" align="left"> <A href="#" class="drophead" onmouseover="f7_showdrop(2)" onmouseout="f7_hidedrop()"><B>Das Unternehmen</B></A> </TD></TR> <TR><TD bgcolor="#000000" width="1"><IMG src="/_artwork/shim.gif" width="1" height="1"></TD> <TD width="150" align="left"> <A href="#" class="drophead" onmouseover="f7_showdrop(3)" onmouseout="f7_hidedrop()"><B>Investor Relations</B></A> </TD></TR> <TR><TD bgcolor="#000000" width="1"><IMG src="/_artwork/shim.gif" width="1" height="1"></TD> <TD width="150" align="left"> <A href="#" class="drophead" onmouseover="f7_showdrop(4)" onmouseout="f7_hidedrop()"><B>News</B></A> </TD></TR> <TR><TD bgcolor="#000000" width="1"><IMG src="/_artwork/shim.gif" width="1" height="1"></TD> <TD width="150" align="left"><A href="#" class="drophead" onMouseOver="f7_showdrop(5)" onMouseOut="f7_hidedrop()"><B>Presse</B></A> </TD></TR> <TR><TD bgcolor="#000000" width="1"><IMG src="/_artwork/shim.gif" width="1" height="1"></TD> <TD width="150" align="left"><A href="#" class="drophead" onMouseOver="f7_showdrop(6)" onMouseOut="f7_hidedrop()"><B>Schulungen</B></A> </TD></TR> <TR><TD width="1" bgcolor="#000000"><IMG src="/_artwork/shim.gif" width="1" height="1"> <TD width="150" align="left"><A href="#" class="drophead" onMouseOver="f7_showdrop(6)" onMouseOut="f7_hidedrop()"><B>Kontakt</B></A></TD> </TR><TR><TD width="1" bgcolor="#000000"><IMG src="/_artwork/shim.gif" width="1" height="1"> <TD width="150" align="left"><A href="#" class="drophead" onMouseOver="f7_showdrop(6)" onMouseOut="f7_hidedrop()"><B>Links</B></A></TD></TR> </TR> </TABLE> </TD> </TR> <TR> <TD colspan="3"><IMG src="/_artwork/shim.gif" width="1" height="1"></TD> </TR> </TABLE> </BODY> </HTML>