Avatar billede viggosmor Nybegynder
09. oktober 2009 - 10:24 Der er 10 kommentarer og
1 løsning

menu - image rollover, active image

Hejsan
Har lavet følgende menu, ud af grafik lavet i photoshop:
http://30something.dk
Menuen er lavet i javascript og lidt css
Html og javascript koden er her:

<script language="JavaScript" type="text/javascript">

if (document.images) {
    homebuttonup      = new Image();
    homebuttonup.src  = "menuknapper2/hjem1.jpg" ;
    homebuttondown    = new Image() ;
    homebuttondown.src = "menuknapper2/hjem2.jpg" ;
   
    ombuttonup      = new Image();
    ombuttonup.src  = "menuknapper2/om3.jpg" ;
    ombuttondown    = new Image() ;
    ombuttondown.src = "menuknapper2/om4.jpg" ;
   
    webbuttonup      = new Image();
    webbuttonup.src  = "menuknapper2/web1.jpg" ;
    webbuttondown    = new Image() ;
    webbuttondown.src = "menuknapper2/web2.jpg" ;
   
    fotobuttonup      = new Image();
    fotobuttonup.src  = "menuknapper2/foto1.jpg" ;
    fotobuttondown    = new Image() ;
    fotobuttondown.src = "menuknapper2/foto2.jpg" ;
   
    indretbuttonup      = new Image();
    indretbuttonup.src  = "menuknapper2/indretning1.jpg" ;
    indretbuttondown    = new Image() ;
    indretbuttondown.src = "menuknapper2/indretning2.jpg" ;
   
    refbuttonup      = new Image();
    refbuttonup.src  = "menuknapper2/reference1.jpg" ;
    refbuttondown    = new Image() ;
    refbuttondown.src = "menuknapper2/reference2.jpg" ;
   
    galleributtonup      = new Image();
    galleributtonup.src  = "menuknapper2/galleri1.jpg" ;
    galleributtondown    = new Image() ;
    galleributtondown.src = "menuknapper2/galleri2.jpg" ;
   
    prisbuttonup      = new Image();
    prisbuttonup.src  = "menuknapper2/pris1.jpg" ;
    prisbuttondown    = new Image() ;
    prisbuttondown.src = "menuknapper2/pris2.jpg" ;
   
    blogbuttonup      = new Image();
    blogbuttonup.src  = "menuknapper2/blog1.jpg" ;
    blogbuttondown    = new Image() ;
    blogbuttondown.src = "menuknapper2/blog2.jpg" ;
   
    kontaktbuttonup      = new Image();
    kontaktbuttonup.src  = "menuknapper2/kontakt1.jpg" ;
    kontaktbuttondown    = new Image() ;
    kontaktbuttondown.src = "menuknapper2/kontakt2.jpg" ;
}
function buttondown( buttonname )
{
    if (document.images) {
      document[ buttonname ].src = eval( buttonname + "down.src" );
    }
}
function buttonup ( buttonname )
{
    if (document.images) {
      document[ buttonname ].src = eval( buttonname + "up.src" );
    }
}
// -->
</script>





<div id="menuknapper">

  <a href="index.php"
  onmouseover="buttondown('homebutton')"
  onmouseout="buttonup('homebutton')">
    <img src="menuknapper2/hjem1.jpg" name="homebutton" alt="Hjem" border="0" /></a>
   
    <a href="om.php"  onmouseover="buttondown('ombutton')"  onmouseout="buttonup('ombutton')">
      <img src="menuknapper2/om3.jpg" name="ombutton" alt="Om os" border="0" /></a>
   
    <a href="webdesign.php"  onmouseover="buttondown('webbutton')"  onmouseout="buttonup('webbutton')">
      <img src="menuknapper2/web1.jpg" name="webbutton" alt="Webdesign" border="0" /></a>
   
    <a href="foto.php"  onmouseover="buttondown('fotobutton')"  onmouseout="buttonup('fotobutton')">
      <img src="menuknapper2/foto1.jpg" name="fotobutton" alt="Fotografi" border="0" /></a>
   
    <a href="indretning.php"  onmouseover="buttondown('indretbutton')"  onmouseout="buttonup('indretbutton')">
      <img src="menuknapper2/indretning1.jpg" name="indretbutton" alt="Indretning" border="0" /></a>
   
    <a href="referencer.php"  onmouseover="buttondown('refbutton')"  onmouseout="buttonup('refbutton')">
      <img src="menuknapper2/reference1.jpg" name="refbutton" alt="Referencer" border="0" /></a>
   
    <a href="galleri.php"  onmouseover="buttondown('galleributton')"  onmouseout="buttonup('galleributton')">
      <img src="menuknapper2/galleri1.jpg" name="galleributton" alt="Galleri" border="0" /></a>
   
    <a href="priser.php"  onmouseover="buttondown('prisbutton')"  onmouseout="buttonup('prisbutton')">
      <img src="menuknapper2/pris1.jpg" name="prisbutton" alt="Priser" border="0" /></a>
   
    <a href="http://blog.30something.dk"  target="_blank" onmouseover="buttondown('blogbutton')"  onmouseout="buttonup('blogbutton')">
      <img src="menuknapper2/blog1.jpg" name="blogbutton" alt="Blog" border="0" /></a>
   
    <a href="kontakt.php"  onmouseover="buttondown('kontaktbutton')"  onmouseout="buttonup('kontaktbutton')">
      <img src="menuknapper2/kontakt1.jpg" name="kontaktbutton" alt="Kontakt" border="0" /></a></div>







Hvordan laver jeg det sådan, at jeg ved den pågældende side jeg er på, har en aktiv knap i en anden farve, så man lettere kan se, at det er der man er?
Svært at forklare, men jeg vil godt have at hvis man er på forsiden så er hjem knappen fx. turkis i stedet for grøn....

Har søgt på nettet men kan ikke llige finde det jeg søger.....
Avatar billede viggosmor Nybegynder
09. oktober 2009 - 10:25 #1
Kan se at siden er nede lige nu....
Avatar billede zips Juniormester
09. oktober 2009 - 10:40 #2
Det gøres ved at bruge serverside script php eller asp, her et eksemple i php
http://www.sebastiansulinski.co.uk/tutorials/show_item/56/active_button_with_php_and_css
Avatar billede viggosmor Nybegynder
09. oktober 2009 - 10:50 #3
Nå ok, troede man kunn e lave det med javascript ved at skrive lignende:

    ombuttonon      = new Image();
    ombuttonon.src  ="menuknapper2/om5.jpg"  ;

Og så tilføje noget i menuen??

Er ikke så god til php endnu...
Avatar billede zips Juniormester
09. oktober 2009 - 11:59 #4
Da javascript kun virker i browseren kan det kun virke hvis du har indlæst alle siders indhold og det er nok ikke så smart, da det jo kan være mange data man skal hente, så det skal være med serverside script.
Avatar billede viggosmor Nybegynder
09. oktober 2009 - 12:07 #5
Åhh jeg forstår...

Du har ikke et kodeeksempel vel?
Har ledt og ledt på nettet/og herinde, men har ikke fundet noget hjælp....
Avatar billede viggosmor Nybegynder
09. oktober 2009 - 15:53 #6
Nå fandt ud af det selv, ved bare at ændre fil navnene for den pågældende side, til min aktive knap.....

Kræved eikke noget videre da jeg først fandt ud af det....
Avatar billede zips Juniormester
09. oktober 2009 - 16:04 #7
Nu er jeg ikke designer eller hardcore webkoder, men jeg ville vælge at have 3 billeder til den menu og sætte teksten oven på, samt styre active på siderne med php, så er det nemmer at vedligeholde siden fremover, men så er der jo ikke så meget at lave for en grafiker :-)
Avatar billede viggosmor Nybegynder
09. oktober 2009 - 16:09 #8
Ja, det har du helt ret i, var også igang med din løsningsmodel, men dels ville skriften jo ikke kunne være en speciel skrift og dels synes jeg bare ikke jeg kunne få det til at fungere.....

Så derfor gjorde jeg dette, men vil da klart lave det om, hvis der kommer mange ændringer i menuen hele tiden....
Avatar billede zips Juniormester
09. oktober 2009 - 16:42 #9
Ja med en speciel font kan det være svært, men stadig skal der tænkes længer frem, som med en fil der indeholder hele din menu så man kun rette i en fil, nu skal du rundt på alle siderne, så vi må håbe at der ikke bliver ændret i den menu ret tit :-)
Avatar billede viggosmor Nybegynder
09. oktober 2009 - 16:52 #10
Ja he he.... det  har du ret i.....
Takker for rådet/anbefalingen....
Læg et svar...
Avatar billede zips Juniormester
09. oktober 2009 - 17:08 #11
Her er et svar ;-)
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