Søg
Avatar billede rdc Nybegynder
29. oktober 2007 - 13:51 Der er 13 kommentarer og
1 løsning

Menu problemer

Hej allesammen..

jeg er igang med at lave en hjemmeside til et værksted... men har problemer med en menu...

i kan se nuværende menu herinde: www.ege-auto.dk/test/

jeg vil gerne have at menuen skal se ud som nu.. men når man trykker på en knap, så skal knappen se ud som den gør nu(altså når den er nedtrykket)... men så snart der bliver trykket på en anden knap, så skal knappen som der var trykket på tidligere, ændre udseende og se ud som de andre knapper...

altså noget lignende samme funktion som det her:
http://www.ege-auto.dk/test/test.html#

på forhånd, tusind tak...
Avatar billede w13 Novice
29. oktober 2007 - 13:55 #1
Jeg kan ikke se knappernes funktion på ege-auto.dk/test. Når jeg prøver, får jeg 5 javascript-fejl.

Men hvad spørger du helt præcist om? Du har menuen og du har koden liggende på test.html, som giver knapfunktionaliteten, du ønsker.
Avatar billede rdc Nybegynder
29. oktober 2007 - 20:01 #2
ja du har ret i at jeg har koden liggende på test.html, men jeg vil gerne have at min nuværende menu fungere på samme måde og den menu på test.html... dette virker dog ikke når jeg selv prøver at lave det ):
Avatar billede rdc Nybegynder
30. oktober 2007 - 13:29 #3
w13... har du en idé til hvordan det kan gøres? det er ikke helt lykkedes mig at få det til at virke sådan som jeg ønsker at det skal se ud... en anden ting jeg skal høre om er: om man godt kan skrive flere parametre i en onClik="", hvis ja, hvordan skal disse parametrer så adskilles?
Avatar billede w13 Novice
30. oktober 2007 - 14:03 #4
Jeg kan ikke lige overskue koden, desværre. Men ja, du kan sagtens skrive flere javascript-kommandoer. Bare adskil med semikolon:

onclick="alert('Hello world');RunApp('123');document.write('Hello again')"
Avatar billede rdc Nybegynder
30. oktober 2007 - 14:09 #5
ok... det problem jeg har ligenu er at, jeg ikke kan få ændret udseendet på menuen når der bliver klikket på den.. for menuen skal se sådan ud som den gør nu: www.ege-auto.dk/test/ , og så snart man klikker på en af felterne, så skal det felt man har klikket på være ændret til samme farve som nu.. altså ren hvid tekst og bgcolor med #3A3A3A... nå der så bliver klikket på et andet felt så skal det felt som var ændre til en ren hvid tekst med bgcolor="#3A3A3A", være ændret til samme felt som de andre... hvis du forstår hvad jeg mener...

problemet jeg oplever er så at jeg ikke kan få menuen der bliver klikket på til at ændre udseende.. altså tænker på bordertop'en og borderbottom'en vil ikke forsvinde...
Avatar billede w13 Novice
30. oktober 2007 - 14:26 #6
Javascriptfejlen fortæller dig vist, hvor det er.

Ret:
            function mOver(tr)
            {
                tr.style.backgroundColor = "#3A3A3A";
                thisTD.style.borderTopColor = "#000000";
                thisTD.style.borderBottomColor = "#FFFFFF";
            }
Til:
            function mOver(tr)
            {
                tr.style.backgroundColor = "#3A3A3A";
                tr.style.borderTopColor = "#000000";
                tr.style.borderBottomColor = "#FFFFFF";
            }

Du bruger thisTD, selvom det ikke er defineret i denne funktion. Så fejlen er bare, at din kode ikke kender thisTD, selvom du prøver at bruge den.
Avatar billede w13 Novice
30. oktober 2007 - 14:27 #7
Og prøv at rette:

            function mOut(tr)
            {
                var thisTD = tr.children[0];
                tr.style.backgroundColor = "#3A3A3A";
                thisTD.style.borderTopColor = "#FFFFFF";
                thisTD.style.borderBottomColor = "#000000";
            }

Til:

            function mOut(tr)
            {
                var thisTD = tr.firstChild;
                tr.style.backgroundColor = "#3A3A3A";
                thisTD.style.borderTopColor = "#FFFFFF";
                thisTD.style.borderBottomColor = "#000000";
            }
Avatar billede w13 Novice
30. oktober 2007 - 14:28 #8
Hov, muligvis skal:

            function mOver(tr)
            {
                tr.style.backgroundColor = "#3A3A3A";
                thisTD.style.borderTopColor = "#000000";
                thisTD.style.borderBottomColor = "#FFFFFF";
            }

være:

            function mOver(tr)
            {
                thisTD=tr.firstChild;
                tr.style.backgroundColor = "#3A3A3A";
                thisTD.style.borderTopColor = "#000000";
                thisTD.style.borderBottomColor = "#FFFFFF";
            }
Avatar billede rdc Nybegynder
30. oktober 2007 - 14:39 #9
den melder fejl.. når jeg ændrer det... men jeg tror slet ikke at den her kode er nødvendig...

jeg har prøvet med den her kode:

<html><head>
<SCRIPT language=javascript>
<!---
var clicked1 = false
var clicked2 = false
var clicked3 = false
function color(id,classe)
{if(document.getElementById) {document.getElementById(id).className=classe;}}

function reset(){
clicked1 = false
clicked2 = false
clicked3 = false
document.getElementById("table1").className="Out";
document.getElementById("table2").className="Out";
document.getElementById("table3").className="Out";
}

// -->
</SCRIPT>

<STYLE type=text/css>
.Over {COLOR:#FFF000;background-color: #FF0000;}
.Out  {COLOR:#000000;background-color: #FFFFFF;}
.bliv {COLOR:#ff0000;background-color: #FFF000;}
.menuItem {Background-color: #3A3A3A; BORDER-TOP: #ffffff 1px solid; PADDING-LEFT: 0px; FONT-WEIGHT: bold; FONT-SIZE: 9px; CURSOR: hand; BORDER-BOTTOM: #000000 1px solid; FONT-FAMILY: verdana}


</STYLE>
</head>

<BODY bgcolor="#3A3A3A">

<table border="0" cellpadding="0" width="100%">
    <tr>
        <td width="71" border="0">        
            <table border="0" bordercolor="#000000" width="100%" id="table1" onclick="reset();color('table1','bliv');if(clicked1==false){clicked1=true}else{clicked1=false}" onmouseover="if(clicked1==false){color('table1','Over')};" onmouseout="if(clicked1==false){color('table1','Out');}" height="0">
                <tr height="1">
                    <td class="menuItem">
                        <a style="text-decoration: none" onfocus=this.blur(); href="index.php" target="indhold">
                            <div align="center">
                                <font color="#FFFFFF">
                                    Forside
                                </font>
                            </div>
                        </a>
                    </td>
                </tr>
            </table>
        </td>
        <td width="71" border="0">        
            <table border="0" bordercolor="#000000" width="100%" id="table2" onclick="reset();color('table2','bliv');if(clicked2==false){clicked2=true}else{clicked2=false}" onmouseover="if(clicked2==false){color('table2','Over')};" onmouseout="if(clicked2==false){color('table2','Out');}" height="0">
                <tr height="1">
                    <td class="menuItem">
                        <a style="text-decoration: none" onfocus=this.blur(); href="index.php" target="indhold">
                            <div align="center">
                                <font color="#FFFFFF">
                                    Forside
                                </font>
                            </div>
                        </a>
                    </td>
                </tr>
            </table>
        </td>
        <td width="71" border="0">        
            <table border="0" bordercolor="#000000" width="100%" id="table3" onclick="reset();color('table3','bliv');if(clicked3==false){clicked3=true}else{clicked3=false}" onmouseover="if(clicked3==false){color('table3','Over')};" onmouseout="if(clicked3==false){color('table3','Out');}" height="0">
                <tr height="1">
                    <td class="menuItem">
                        <a style="text-decoration: none" onfocus=this.blur(); href="index.php" target="indhold">
                            <div align="center">
                                <font color="#FFFFFF">
                                    Forside
                                </font>
                            </div>
                        </a>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>
</BODY></HTML>

problemet med den ovenstående kode er at den bare laver et border felt rundt om det musen er over og om det der er blevet klikket på.
Avatar billede w13 Novice
30. oktober 2007 - 15:07 #10
Jeg har svært ved at gennemskue koden og forstå, hvordan det skal være. Men har optimeret den og gjort et par af koderne lidt mere uptodate. Se om du kan få det til at funge nu:
-----------------------------------
<html>
<head>
<script type="text/javascript">
var clicked1=false,clicked2=false,clicked3=false;
function color(id,classe){
    clicked1=false;clicked2=false;clicked3=false;
    document.getElementById("table1").className="menuitem";document.getElementById("table2").className="menuitem";document.getElementById("table3").className="menuitem";
    if(document.getElementById){document.getElementById(id).className=classe}
}
function clicked(v){
    clicked1=false;clicked2=false;clicked3=false;
    v=true;
}
</script>
<style type="text/css">
.Over {COLOR:#FFF000;background-color: #FF0000;}
.bliv {COLOR:#ff0000;background-color: #FFF000;}
.menuItem{background-color: #3A3A3A; BORDER-TOP: #ffffff 1px solid; PADDING-LEFT: 0px; FONT-WEIGHT: bold; FONT-SIZE: 9px; CURSOR: hand; BORDER-BOTTOM: #000000 1px solid; FONT-FAMILY: verdana}
</style>
</head>
<body bgcolor="#3a3a3a">

<table style="width:100%;border-width:0;border-collapse:collapse">
    <tr><td id="table1" class="menuitem" onclick="color('table1','bliv');clicked1=!clicked1" onmouseover="if(!clicked1) color('table1','Over')" onmouseout="if(!clicked1) color('table1','Out')">
        <a style="text-decoration:none;text-align:center;color:#ffffff" onfocus="this.blur()" href="index.php" target="indhold">Forside</a>
    </td><td id="table2" class="menuitem" onclick="color('table2','bliv');clicked2=!clicked2" onmouseover="if(!clicked2) color('table2','Over')" onmouseout="if(!clicked2) color('table2','Out')">
        <a style="text-decoration:none;text-align:center;color:#ffffff" onfocus="this.blur()" href="index.php" target="indhold">Forside</a>
    </td><td id="table3" class="menuitem" onclick="color('table3','bliv');clicked3=!clicked3" onmouseover="if(!clicked3) color('table3','Over')" onmouseout="if(!clicked3) color('table3','Out')">
        <a style="text-decoration:none;text-align:center;color:#ffffff" onfocus="this.blur()" href="index.php" target="indhold">Forside</a>
    </td></tr>
</table>

</body>
</html>
-----------------------------------
Bl.a. er der kun et table-element nu.
Avatar billede rdc Nybegynder
30. oktober 2007 - 15:30 #11
hva med Out?
Avatar billede rdc Nybegynder
30. oktober 2007 - 16:20 #12
hejsa.. tusind tak for hjælpen.. opret et svar og du får pointsene.. jeg har endelig fået det til at virke sådan som jeg vil have det... den endelige kode ser således ud:

<html>
<head>
<script type="text/javascript">
var clicked1=false,clicked2=false,clicked3=false;clicked4=false;clicked5=false;clicked6=false;clicked7=false;
function color(id,classe){
    clicked1=false;clicked2=false;clicked3=false;clicked4=false;clicked5=false;clicked6=false;clicked7=false;
    document.getElementById("table1").className="menuitem";document.getElementById("table2").className="menuitem";document.getElementById("table3").className="menuitem";
    document.getElementById("table4").className="menuitem";document.getElementById("table5").className="menuitem";document.getElementById("table6").className="menuitem";
    document.getElementById("table7").className="menuitem";
    if(document.getElementById){document.getElementById(id).className=classe}
}
function clicked(v){
    clicked1=false;clicked2=false;clicked3=false;clicked4=false;clicked5=false;clicked6=false;clicked7=false;
    v=true;
}

</script>
<style type="text/css">
.Out  {COLOR:#000000;background-color: #3A3A3A; BORDER-TOP: #ffffff 1px solid; PADDING-LEFT: 0px; FONT-WEIGHT: bold; FONT-SIZE: 9px; CURSOR: hand; BORDER-BOTTOM: #000000 1px solid; FONT-FAMILY: verdana}
.Over {COLOR:#FFF000;background-color: #FFFFFF; BORDER-TOP: #ffffff 0px solid; PADDING-LEFT: 0px; FONT-WEIGHT: bold; FONT-SIZE: 9px; CURSOR: hand; BORDER-BOTTOM: #000000 0px solid; FONT-FAMILY: verdana}
.bliv {COLOR:#ff0000;background-color: #3A3A3A; BORDER-TOP: #ffffff 0px solid; PADDING-LEFT: 0px; FONT-WEIGHT: bold; FONT-SIZE: 9px; CURSOR: hand; BORDER-BOTTOM: #000000 0px solid; FONT-FAMILY: verdana}}
.menuItem{background-color: #3A3A3A; BORDER-TOP: #ffffff 1px solid; PADDING-LEFT: 0px; FONT-WEIGHT: bold; FONT-SIZE: 9px; CURSOR: hand; BORDER-BOTTOM: #000000 1px solid; FONT-FAMILY: verdana}
</style>
</head>
<body bgcolor="#3a3a3a">

<table style="width: 700; cursor: default" cellspacing="0" cellpadding="0" border="0">
    <tr>
        <td height="1" id="table1" class="menuitem" onclick="color('table1','bliv');clicked1=!clicked1" onMouseOver="this.style.background='#3A3A3A'; this.style.borderColor='#3A3A3A';" onMouseOut="this.style.background='#3A3A3A'; this.style.borderTopColor='#FFFFFF'; this.style.borderBottomColor='#000000';">
            <a style="text-decoration:none;text-align:center;color:#ffffff" onfocus="this.blur()" href="#" target="_self">
                <div align="center">
                    Forside
                </div>
            </a>
        </td>
        <td>&nbsp;</td>
        <td height="1" id="table2" class="menuitem" onclick="color('table2','bliv');clicked2=!clicked2" onMouseOver="this.style.background='#3A3A3A'; this.style.borderColor='#3A3A3A';" onMouseOut="this.style.background='#3A3A3A'; this.style.borderTopColor='#FFFFFF'; this.style.borderBottomColor='#000000';">
            <a style="text-decoration:none;text-align:center;color:#ffffff" onfocus="this.blur()" href="#" target="_self">
                <div align="center">
                    Profil
                </div>
            </a>           
        </td>
          <td>&nbsp;</td>
        <td height="1" id="table3" class="menuitem" onclick="color('table3','bliv');clicked3=!clicked3" onMouseOver="this.style.background='#3A3A3A'; this.style.borderColor='#3A3A3A';" onMouseOut="this.style.background='#3A3A3A'; this.style.borderTopColor='#FFFFFF'; this.style.borderBottomColor='#000000';">
            <a style="text-decoration:none;text-align:center;color:#ffffff" onfocus="this.blur()" href="#" target="_self">
                <div align="center">
                    Dæk/Fælge
                </div>
            </a>
        </td>
        <td>&nbsp;</td>
        <td height="1" id="table4" class="menuitem" onclick="color('table4','bliv');clicked4=!clicked4" onMouseOver="this.style.background='#3A3A3A'; this.style.borderColor='#3A3A3A';" onMouseOut="this.style.background='#3A3A3A'; this.style.borderTopColor='#FFFFFF'; this.style.borderBottomColor='#000000';">
            <a style="text-decoration:none;text-align:center;color:#ffffff" onfocus="this.blur()" href="#" target="_self">
                <div align="center">
                    Biler
                </div>
            </a>
        </td>
        <td>&nbsp;</td>
        <td height="1" id="table5" class="menuitem" onclick="color('table5','bliv');clicked5=!clicked5" onMouseOver="this.style.background='#3A3A3A'; this.style.borderColor='#3A3A3A';" onMouseOut="this.style.background='#3A3A3A'; this.style.borderTopColor='#FFFFFF'; this.style.borderBottomColor='#000000';">
            <a style="text-decoration:none;text-align:center;color:#ffffff" onfocus="this.blur()" href="#" target="_self">
                <div align="center">
                    Værksted
                </div>
            </a>
        </td>
        <td>&nbsp;</td>
        <td height="1" id="table6" class="menuitem" onclick="color('table6','bliv');clicked6=!clicked6" onMouseOver="this.style.background='#3A3A3A'; this.style.borderColor='#3A3A3A';" onMouseOut="this.style.background='#3A3A3A'; this.style.borderTopColor='#FFFFFF'; this.style.borderBottomColor='#000000';">
            <a style="text-decoration:none;text-align:center;color:#ffffff" onfocus="this.blur()" href="#" target="_self">
                <div align="center">
                    Auto Elektrik
                </div>
            </a>
        </td>
        <td>&nbsp;</td>
        <td height="1" id="table7" class="menuitem" onclick="color('table7','bliv');clicked7=!clicked7" onMouseOver="this.style.background='#3A3A3A'; this.style.borderColor='#3A3A3A';" onMouseOut="this.style.background='#3A3A3A'; this.style.borderTopColor='#FFFFFF'; this.style.borderBottomColor='#000000';">
            <a style="text-decoration:none;text-align:center;color:#ffffff" onfocus="this.blur()" href="#" target="_self">
                <div align="center">
                    Kontakt
                </div>
            </a>
        </td>                               
    </tr>
</table>

</body>
</html>
Avatar billede w13 Novice
30. oktober 2007 - 17:44 #13
Oki! Her er et svar. =)
Avatar billede w13 Novice
31. oktober 2007 - 11:56 #14
Tak for point!
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel Indlæg Oprettet Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML 18 10/09/202515:07 17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML 3 19/03/202522:16 20/03/202513:04
Se og ændre html på en webside Af magger i HTML 4 11/03/202513:55 12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML 5 02/03/202520:05 04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML 3 30/10/202409:37 01/01/202515:27
Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I dag 13:08 Bruge PHP til at hente hjemmeside med fsockopen Af Strawberry i PHP
I går 13:36 godt råd søges Alternativ styresystem på Mac pc Af luffe1955 i Andre styresystemer
I går 11:32 Hjælp til kontrol af sygefravær Af Maja i Excel
27/0113:59 2 skærme til en stationær computer Af BIRGER i Skærme
26/0119:26 Opstart af ny computer Af Bent i Windows
White papers
Flere white papers »