Avatar billede tk-xylen Nybegynder
15. marts 2001 - 12:42 Der er 20 kommentarer og
2 løsninger

Skiftefarvemenu

Hvordan laver jeg en menu alá den www.itnews.dk har ude til venstre på deres side? Den skal helst være vandret og en eller anden form for step by step guide ville være velkommen.
Avatar billede jemt Nybegynder
15. marts 2001 - 12:43 #1
Tjek denne adresse, de har de SEJESTE menuer:
http://www.dynamicdrive.com/dynamicindex1/index.html
Avatar billede jemt Nybegynder
15. marts 2001 - 12:44 #2
Avatar billede tk-xylen Nybegynder
15. marts 2001 - 12:51 #3
Godt nok men jeg er intereserret i at vide hvordan man SELV laver en.
Avatar billede nute Nybegynder
15. marts 2001 - 12:53 #4
hva kjenner du til av HTML...nybegynner eller \"ekspert\" ?

/nute
Avatar billede htx98i17 Professor
15. marts 2001 - 12:55 #5
Du kan lave det med billeder. Sådan at når musen kører over, så skiftes billedet... Så fungere det nemlig også i NS

Du kan også lave det på en anden måde, men som kun virker i IE, nemlig at du lader cellebaggrundsfarven skifte farve ved mouseOver og at den skifter tilbage igen ved mouseOut.

Kan du f.eks. lave en tabel i html ? bare lige for at vide hvad du kan i forvejen..
Avatar billede tk-xylen Nybegynder
15. marts 2001 - 13:00 #6
Jeg kan snildt lave <tabel>\'s. Hele min side er bygget op i tabeller, og IFRAME\'s. Jeg skal bare lige lære at lave en fed menu. Enten kombineret med CSS eller Java. (java aner jeg intet om forresten)
Avatar billede tk-xylen Nybegynder
15. marts 2001 - 13:01 #7
>>/nute

jeg mener selv at jeg er rimelig hård hvad angår standard HTML...
Avatar billede htx98i17 Professor
15. marts 2001 - 13:02 #8
det du kan gøre så er at tilføje denne kode i en <td>

sådan:
<td onMouseOver=\"this.style.backgroundColor=\'#51626D\';\" onMouseOut=\"this.style.backgroundColor=\'\';\" >

så skifter baggrunden farve ved mouseover...  kan det bruges?
Avatar billede tk-xylen Nybegynder
15. marts 2001 - 13:04 #9
tester lige....
Avatar billede nute Nybegynder
15. marts 2001 - 13:07 #10
det du trenger, er å lære deg litt CSS og Javascript. Hvis du fra før kan noe HTML, så er det disse 3 elementene som bygger opp det man kaller DHTML. CSS betyr Cascading Style Sheets, og brukes til å angi styles på ditt site. Jeg anbefaler at du leser litt grunnleggende om CSS på følgende site, sånn at du vet hva det er snakk om. Det er ikke så vanskelig å lære seg dette selv...man kan uten problemer lære seg dette ved å lese andre sin kode, men en walkthrough av CSS men påfølgende forklaring, er alltid noe av det beste for en nybegynner...

les dette for å lære litt om CSS:

http://www.w3.org/TR/REC-CSS2/intro.html

og dtte for å lære basics om DHTML:

http://www.dansteinman.com/dynduo/

klikk på Overview under \'DHTML Tutorial\'

/nute
Avatar billede tk-xylen Nybegynder
15. marts 2001 - 13:08 #11
Kay... Det er sgu\' iorden!
Hmmm... kan man ikke gøre sådan at den farve den skifter til når man går over den, bliver der når man klikker på den. Selvom man flytter musen væk?
Avatar billede htx98i17 Professor
15. marts 2001 - 13:10 #12
jo:

<td onClick=\"this.style.backgroundColor=\'#51626D\';\" >

Avatar billede htx98i17 Professor
15. marts 2001 - 13:12 #13
njaa,  både og forresten
med denne metode vil du ikke kunne gøre det sammen med onMouseOut,  det burde være forståeligt nok hvorfor..
Avatar billede tk-xylen Nybegynder
15. marts 2001 - 13:13 #14
Jaja se\'fø\'li!
Stor tak til jer begge! Nu har jeg noget at gå hjem med :)
Takker!!!
Avatar billede ezzuk Nybegynder
15. marts 2001 - 13:14 #15
<head>
<title>sides navn</title>
script language=\"JavaScript\">
  function co(element,mode) {
    if (mode==\"in\") {
      cursortype = \'hand\'
      colorval = \'#B7C6D6\'
    } else if (mode==\"out\") {
      cursortype = \'\'
      colorval = \'#e9e9e9\'
    }
  element.style.background=colorval;
  element.style.cursor=cursortype;
}
</script>
</head>

<body>
<table cellpadding=\"0\" cellspacing=\"1\" bgcolor=\"Gray\" width=\"125\">
<tr>
  <td bgcolor=\"#003366\"><b>Menu</b></td>
</tr>
<tr>
  <td bgcolor=\"#e9e9e9\" onmouseover=\"co(this,\'in\');\" onmouseout=\"co(this,\'out\');\" onClick=\"location.href=\'dinside.htm\';\">
<a href=\"dinside.htm\">min side</a></td>
</tr>
</table>

</body>

</html>
Avatar billede htx98i17 Professor
15. marts 2001 - 13:14 #16
men det eksempel jeg gav først, svarer på dit spm :o)
Avatar billede htx98i17 Professor
15. marts 2001 - 13:14 #17
det var så lidt
Avatar billede callesen Praktikant
15. marts 2001 - 13:23 #18
Her er den rå menukode fra IT-News:

<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.0 Transitional//EN\">
<HTML>
<HEAD>
    <TITLE>[Ingen titel]</TITLE>
<STYLE type=text/css>A {
    TEXT-DECORATION: none
}
A.menu {
    COLOR: #222222; TEXT-DECORATION: none
}
A.menu2 {
    COLOR: #000000; TEXT-DECORATION: none
}
A.menu3 {
    COLOR: #cccccc; TEXT-DECORATION: none
}
</STYLE>
<SCRIPT language=javascript>
    function mOvr(src) {
      if (!src.contains(event.fromElement))
      {src.style.cursor = \'hand\'; src.bgColor = \'#eeeeee\';}
    }

    function mOut(src) {
    if (!src.contains(event.toElement))
      {src.style.cursor = \'default\'; src.bgColor = \'#cccccc\';}
    }

    function mClk(src) {
    if(event.srcElement.tagName==\'TD\')
      {src.children.tags(\'A\')[0].click();}
    }

function antaltegntilbage()
{
document.SMS.num.value = document.SMS.fra.value.length + document.SMS.besked.value.length;
}

</SCRIPT>
</HEAD>
<BODY>
<TABLE borderColor=#000000 cellSpacing=1 cellPadding=5 width=138
            align=center bgColor=#000000 border=0>
              <TBODY>
              <TR bgColor=#62819e>
                <TD><FONT color=#222222 size=2><B>Navigation:</FONT></B></TD></TR>
              <TR>
                <TD onmouseover=mOvr(this) onclick=mClk(this)
                onmouseout=mOut(this) bgColor=#cccccc ;><B><A class=menu
                  href=\"http://www.itnews.dk/asp/home.asp?intMenuID=2\">Om IT
                  News</A></B></FONT></TD></TR>
              <TR>
                <TD onmouseover=mOvr(this) onclick=mClk(this)
                onmouseout=mOut(this) bgColor=#cccccc ;><B><A class=menu
                  href=\"http://www.itnews.dk/asp/home.asp?intMenuID=1\">Nyheder</A></B></FONT></TD></TR>
              <TR>
                <TD onmouseover=mOvr(this) onclick=mClk(this)
                onmouseout=mOut(this) bgColor=#cccccc ;><B><A class=menu
                  href=\"http://www.itnews.dk/asp/home.asp?intMenuID=3\">Webudvikling</A></B></FONT></TD></TR>
              <TR>
                <TD onmouseover=mOvr(this) onclick=mClk(this)
                onmouseout=mOut(this) bgColor=#cccccc ;><B><A class=menu
                  href=\"http://www.itnews.dk/asp/home.asp?intMenuID=4\">Hardware</A></B></FONT></TD></TR>
              <TR>
                <TD onmouseover=mOvr(this) onclick=mClk(this)
                onmouseout=mOut(this) bgColor=#cccccc ;><B><A class=menu
                  href=\"http://www.itnews.dk/asp/home.asp?intMenuID=5\">Underholdning</A></B></FONT></TD></TR>
              <TR>
                <TD onmouseover=mOvr(this) onclick=mClk(this)
                onmouseout=mOut(this) bgColor=#cccccc ;><B><A class=menu
                  href=\"http://www.itnews.dk/asp/home.asp?intMenuID=6\">Mobil</A></B></FONT></TD></TR>
              <TR>
                <TD onmouseover=mOvr(this) onclick=mClk(this)
                onmouseout=mOut(this) bgColor=#cccccc ;><B><A class=menu
                  href=\"http://www.itnews.dk/asp/home.asp?intMenuID=7\">Spil</A></B></FONT></TD></TR>
              <TR>
                <TD onmouseover=mOvr(this) onclick=mClk(this)
                onmouseout=mOut(this) bgColor=#cccccc ;><B><A class=menu
                  href=\"http://www.itnews.dk/asp/home.asp?intMenuID=8\">DVD &amp;
                  Media</A></B></FONT></TD></TR>
              <TR>
                <TD onmouseover=mOvr(this) onclick=mClk(this)
                onmouseout=mOut(this) bgColor=#cccccc ;><B><A class=menu
                  href=\"http://www.itnews.dk/asp/home.asp?intMenuID=9\">Filer
                  m.m.</A></B></FONT></TD></TR>
              <TR bgColor=#62819e>
                <TD align=right><A class=menu2
                  href=\"http://www.itnews.dk/asp/home.asp\"><B>Forside</A></B></TD></TR></TBODY></TABLE>


</BODY>
</HTML>

/callesen
Avatar billede nute Nybegynder
15. marts 2001 - 13:25 #19
callesen >> men det er jo ikke noen god forklaring....det er jo nettopp en forklaring mannen ønsker...
Avatar billede callesen Praktikant
16. marts 2001 - 11:55 #20
- det var blot en \"kommentar\"
/callesen
Avatar billede tk-xylen Nybegynder
16. marts 2001 - 12:20 #21
fuldstændigt rigtig nute. En forklaring
Avatar billede nute Nybegynder
16. marts 2001 - 12:44 #22
vil du fremdeles ha en forklaring, eller har du fått svar på ditt spørsmål synes du ?
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
Vi tilbyder markedets bedste kurser inden for webudvikling

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.

Du kan også logge ind via nedenstående tjenester