H: hide/show funktion til en dropdownmenu

har du prøvet med en onMouseOut

ja men koden i javascriptes skal ændres

Bortset fra at du laver for meget skal javascript-koden ikke ændres ...

function DropDown (id,antal) {
    for(i=0;antal>i;i++){
        idx = id + i;
        if (document.getElementById) {   
            menu = document.getElementById(idx).style;
        } else {    // !IE5 && !NS6
            return false;
        }
        if (menu.visibility == 'hidden') {
            menu.display = '';
            menu.visibility = 'visible';
        } else {
            menu.display = 'none';
            menu.visibility = 'hidden';
        }
    }
}

Og så:

      <img src="menu/Untitled-1_02.gif" OnMouseOver="DropDown('udd',2);" OnMouseOut="DropDown('udd',2);" width="124" height="15">

den kan jeg godt se.. men hvad så når man trækker musen væk fra billedet (uddannelsen) så bliver menuen der ikke når man trækker den over de andre små pics.!

mangler en form for forsinkelse på det hele..

http://www.gregorian.dk/htx/index5.php

prøv lige at se hvordan den opfører sig.. mangler det at den skal forblive synlig når man tager musen over den nye menu som jo bliver vist.

Okay, jeg ville personligt skille funktionerne ad:

function DropDown (id,antal,action) {
    for(i=0;antal>i;i++){
        idx = id + i;
        if (document.getElementById) {   
            menu = document.getElementById(idx).style;
        } else {    // !IE5 && !NS6
            return false;
        }
        if (action == 'in') {
            menu.display = '';
            menu.visibility = 'visible';
        } else {
            menu.display = 'none';
            menu.visibility = 'hidden';
        }
    }
}

Og så:

      <img src="menu/Untitled-1_02.gif" OnMouseOver="DropDown('udd',2,'in');" OnMouseOut="DropDown('udd',2,'out');" width="124" height="15">

meget logisk ja.. men den skal jo virke som en dropdownmenu, så den undermenu som kommer frem skal jo blive der.. ikke bare forsvinde ved onmouseout..

kig der hvordan den opfører sig: http://www.gregorian.dk/htx/index5.php

siden er nede kan jeg se ;(

RoenVing.. kan du hjælpe med at putte en form for tids forsinkelse på, hvor der skal være en chance for ½ sek til at trække musen over den menu som kommer frem, til at den skjuler den igen?

var timeoutId=0;
var active=0;
var activeId="";
function DropDown (id,antal,action) {
    if (!document.getElementById)return false;
    if(!timeoutId==0)
        clearTimeout(timeoutId);
    timeoutId=0;
    if (action != 'in') {
        timeoutId = setTimeOut('hideDropDown',500);
        active = antal;
        activeId = id;
    } else {
        for(i=0;antal>i;i++){
            idx = id + i;
            menu = document.getElementById(idx).style;
            menu.display = '';
            menu.visibility = 'visible';
        }
    }
}

function hideDropDown() {
    timeoutId=0;
    for(i=0;antal>i;i++){
        idx = id + i;
        menu = document.getElementById(idx).style;
        menu.display = 'none';
        menu.visibility = 'hidden';
    }
}

function delayHide(){
    if(!timeoutId==0)
        clearTimeout(timeoutId);
    timeoutId=0;
}

-- så skal du på undermenuerne også kalde DropDown('udd',2,'in');

-- jeg droppede at bruge delayHide, men nu stod den der, og jeg kunne ikke lige overskue, om du måske fik brug for den !-)

fejl i linie 11.

timeoutId = setTimeOut('hideDropDown',500);

Hov:

function hideDropDown() {
    timeoutId=0;
    for(i=0;active>i;i++){
        idx = activeId + i;
        menu = document.getElementById(idx).style;
        menu.display = 'none';
        menu.visibility = 'hidden';
    }
}

Talte lige anderledes, men der er ofte linjetællingsforskelle, så jeg fandt jo en anden fejl ...
Der mangler funktionsparanteser:
timeoutId = setTimeOut('hideDropDown()',500);

http://www.gregorian.dk/htx/index5.php

skal de rikke være klammer her?

    if(!timeoutId==0)
        clearTimeout(timeoutId);
        timeoutId=0;

Den havde jeg ikke lige overvejet ...

Prøv en gang med:

var timeoutId = new Array();
for(i=0;4>i;i++)timeoutId[i]=0;

og så:
    if(!timeoutId[antal]==0)
        clearTimeout(timeoutId[antal]);

    if (action != 'in') {
        timeoutId[antal] = setTimeOut('hideDropDown()',500);

og

function hideDropDown() {
    timeoutId[active]=0;

-- du skal lige checke, at der ikke kommer konflikter andre steder, måske må du finde et andet navngivningsskema for at få det til at virke !-)

Nej, ingen klammer behøves, da den under alle omstændigheder skal være 0, så er det ligegyldigt om den er det i forvejen !-)


Men en lille fejl:
    if(!timeoutId[antal]==0)
        clearTimeout(timeoutId[antal]);
    timeoutId[antal]=0;

hvad skal erstattes? kan ikke lige s det

er det:
    if(!timeoutId==0)
        clearTimeout(timeoutId);
      timeoutId=0;

den laver stadigvæk fejl ved onmouseout fra hovedmenuen

var timeoutId = new Array();
for(i=0;4>i;i++)timeoutId[i]=0;
var active=0;
var activeId="";
function DropDown (id,antal,action) {
    if (!document.getElementById)return false;
    if(!timeoutId[antal]==0)
        clearTimeout(timeoutId[antal]);
    timeoutId[antal]=0;
    if (action != 'in') {
        timeoutId[antal] = setTimeOut('hideDropDown()',500);
        active = antal;
        activeId = id;
    } else {
        for(i=0;antal>i;i++){
            idx = id + i;
            menu = document.getElementById(idx).style;
            menu.display = '';
            menu.visibility = 'visible';
        }
    }
}

function hideDropDown() {
    timeoutId[active]=0;
    for(i=0;active>i;i++){
        idx = activeId + i;
        menu = document.getElementById(idx).style;
        menu.display = 'none';
        menu.visibility = 'hidden';
    }
}

heller ikke.

roenving - skal på arb nu, så kan ikke svare her før om 9 timer , desværre.
skriver lige i aften i den her tråd...
;) tak indtil videre.. tror ikke selv jeg havde fundet ud af den her delay function,

Jeg vil lige prøve at kigge lidt, men jeg har ikke villet hente billederne, så ...

Men du har en alvorlig fejl, som hedder å

Danske bogstaver må _ikke_ bruges i javascript-identifikatorer !-)

<HTML>
<HEAD>
<TITLE>ide1</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
var timeoutId = new Array();
for(i=0;4>i;i++)timeoutId[i]=0;
var active=0;
var activeId="";
function DropDown (id,antal,action) {
    if (!document.getElementById)return false;
    if(!timeoutId[antal]==0)
        clearTimeout(timeoutId[antal]);
    timeoutId[antal]=0;
    if (action != 'in') {
        timeoutId[antal] = setTimeout('hideDropDown()',100);
        active = antal;
        activeId = id;
    } else {
        for(i=0;antal>i;i++){
            idx = id + i;
            menu = document.getElementById(idx).style;
            menu.display = '';
            menu.visibility = 'visible';
        }
    }
}

function hideDropDown() {
    timeoutId[active]=0;
    for(i=0;active>i;i++){
        idx = activeId + i;
        menu = document.getElementById(idx).style;
        menu.display = 'none';
        menu.visibility = 'hidden';
    }
}
</script>
</HEAD>
<BODY background="gif/bg2.gif" LEFTMARGIN=50 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
<TABLE WIDTH=762 height=""  background="gif/bg.gif" BORDER=0 CELLPADDING=0 CELLSPACING=0 style="border=1px #7F99B2 solid;">
    <TR>
      <TD width="762" height="16" valign="top">
      <img src="menu/Untitled-1_01.gif" width="83" height="15" border="0" OnMouseOver="DropDown('aargange',3,'in')" OnMouseOut="DropDown('aargange',3,'out');">
      <img src="menu/Untitled-1_02.gif" OnMouseOver="DropDown('udd',2,'in');" OnMouseOut="DropDown('udd',2,'out');" width="124" height="15">
      <img src="menu/Untitled-1_03.gif" width="171" height="15">
      <img src="menu/Untitled-1_04.gif" width="116" height="15"> 
    <TR>
        <TD height="21" valign="top">
        <img src="menu/Untitled-1_09.gif" id="udd0" OnMouseOver="DropDown('udd',2,'in');" OnMouseOut="DropDown('udd',2,'out');" style="display:none; visibility: hidden" width="83" height="13">
        <img src="menu/Untitled-1_08.gif" id="udd1" OnMouseOver="DropDown('udd',2,'in');" OnMouseOut="DropDown('udd',2,'out');" style="display:none; visibility: hidden" width="157" height="13">
        <img src="menu/Untitled-1_06.gif" id="aargange0" OnMouseOver="DropDown('aargange',3,'in');" OnMouseOut="DropDown('aargange',3,'out');" style="display:none; visibility: hidden" width="139" height="13">
        <img src="menu/Untitled-1_07.gif" id="aargange1" OnMouseOver="DropDown('aargange',3,'in');" OnMouseOut="DropDown('aargange',3,'out');" style="display:none; visibility: hidden" width="139" height="13">
        <img src="menu/Untitled-1_08.gif" id="aargange2" OnMouseOver="DropDown('aargange',3,'in');" OnMouseOut="DropDown('aargange',3,'out');" style="display:none; visibility: hidden" width="157" height="13">
    </table>
</BODY>
</HTML>

http://www.gregorian.dk/htx/index5.php

ej hvor lækkert man. ;) - det virker.
dog et lille problem nu, som jeg måske ikke helt havde tænkt over.. når man går fra et menupunkt til et andet, går der jo stadigvæk 0,5 sek før den fjerner det gamle, men viser det nu med det samme:

burde der ikke være en delay på 0,5 sek på at vise menupunktet så?
eller er der en bedre løsning på det?
tjek linket.

Næh, den skal fjernes som en del af processen (og jeg har forøvrigt sat den ned til 1/10-del sekund !-)

-- kigger lige på det !-)

så jeg faktisk godt.. meget bedre timing.
takker

Den gør godt nok tingene et par gange for meget men med 4 menuer vil ingen opdage det !-)

Bemærk, at menus-variablen skal udfyldes -- håber du kan gennemskue hvordan -- når du aktiverer resten af menuerne !-)

<script language="JavaScript" type="text/JavaScript">
var timeoutId = new Array();
for(i=0;4>i;i++)timeoutId[i]=0;
var active=0;
var activeId="";
var menus = [['udd',2],['aargange',3]];
function DropDown (id,antal,action) {
    if (!document.getElementById)return false;
    if(!timeoutId[antal]==0)
        clearTimeout(timeoutId[antal]);
    timeoutId[antal]=0;
    if (action != 'in') {
        timeoutId[antal] = setTimeout('hideDropDown()',100);
        active = antal;
        activeId = id;
    } else {
            for(i=0;menus.length>i;i++){
                if(menus[i][0]!=id)hideDropDown(menus[i][0],menus[i][1]);
            }
        for(i=0;antal>i;i++){
            idx = id + i;
            menu = document.getElementById(idx).style;
            menu.display = '';
            menu.visibility = 'visible';
        }
    }
}

function hideDropDown(id,antal) {
        if(hideDropDown.arguments.length==2){
                act = antal;
                actId = id;
        }else{
                act = active;
                actId = activeId;
        }
    timeoutId[active]=0;
    for(i=0;act>i;i++){
        idx = actId + i;
        menu = document.getElementById(idx).style;
        menu.display = 'none';
        menu.visibility = 'hidden';
    }
}
</script>

-- og så burde man jo:

<script language="JavaScript" type="text/JavaScript">
var active=0;
var activeId="";

var menus = [['udd',2],['aargange',3]];

var timeoutId = new Array();
for(i=0;menus.length>i;i++)timeoutId[menus[i][0]]=0;

function DropDown (id,antal,action) {
    if (!document.getElementById)return false;
    if(!timeoutId[id]==0)
        clearTimeout(timeoutId[id]);
    timeoutId[antal]=0;
    if (action != 'in') {
        timeoutId[id] = setTimeout('hideDropDown()',100);
        active = antal;
        activeId = id;
    } else {
            for(i=0;menus.length>i;i++){
                if(menus[i][0]!=id)hideDropDown(menus[i][0],menus[i][1]);
            }
        for(i=0;antal>i;i++){
            idx = id + i;
            menu = document.getElementById(idx).style;
            menu.display = '';
            menu.visibility = 'visible';
        }
    }
}

function hideDropDown(id,antal) {
        if(hideDropDown.arguments.length==2){
                act = antal;
                actId = id;
        }else{
                act = active;
                actId = activeId;
        }
    timeoutId[actId]=0;
    for(i=0;act>i;i++){
        idx = actId + i;
        //alert(idx);
        menu = document.getElementById(idx).style;
        menu.display = 'none';
        menu.visibility = 'hidden';
    }
}
</script>

Hæ, så burde den være der !-)

;) så er den der ;) lækkert man..

hmm.. kan du se menuen. det mellemrum der er imellem top og undermenu.. hvorn i H fjerne jeg det.. har sat de pics ind i en tabel, hvor de vises jo..
har prøvet en hel del men kan ikke lige huske hvad mannu gør det.. den er tynd nu stregen men jeg vil godt have det sidste væk

http://www.gregorian.dk/htx/index5.php

har løst det.. tak roenving.. du er super.
kom en nogle svar så har du point ;) fandme lækkert..
kanon ;)))

<style type="text/css">
table,img,tr,td{
margin:0px;
border:0px;
padding:0px;
border-collapse:collapse;
font-size:0px;
}
</style>

-- så er der kun en eneste pixel imellem, og jeg har ikke fundet den endnu !-)

Bingo '-)

Forøvrigt skal du lige ændre dit billede: Untitled-1_02.gif, så du staver uddannelsen rigtigt ,-)

det er rigtigt ja ;) tak for hjælpen:

-- og tak for points ;~}

roenving..
har lidt problemer med at adde flere menuer..
delay frunctionen ser ikke ud at til at virke ordentligt. ;(
link: http://www.htx.gregorian.dk/index6.php

kan du lige forklare mig hvad jeg har gjort galt her?

roenving.. fandt fejlen i det hele ;).
ligemeget med alt det der.. tak for hjælpen igen så.

eller nej... skal tilføje flere menuerpunkter til scriptet.. HOW!!