Utskriftsvennlig versjon

Slik setter du opp glow knapper

Lag knapper eller menyer med egne bilder for hover og mouse down. Med denne funksjonen kan du lage glow effekter som er større enn selve knappen.

Installer app

Logg inn med utviklertilgang. Installer "Glowing menu buttons kit" fra Esite App Center. Ta kontakt med din partner dersom du trenger bistand med dette.

Sett opp knapp som designelement

Under "Designelementer" mappen, velg ny og klikk "Glowin button element" under "Bilde/media".

Fyll inn:

  • Navn Gi knappen et ønsket valgfritt navn
  • Href - Oppgi lenken til knappen
  • Alt - Oppgi alternativ tekst for bildet
  • Target - Dersom linken skal åpnes i en egen ramme (frame eller iframe) oppgi navnet på denne her. Hvis den skal åpne i siden la denne stå tom.
  • Main image - Hovedbildet til knappen
  • Hover glow image - Legg her valgfritt inn et bilde for layer som vil fades inn over hovedbildet når muspekeren beveger seg over knappen
  • Selected glow image - Legg her inn bilde for knappen hvis den er valgt
  • Down image - Legg her inn bilde som vil fades inn når det klikkes på knappen
  • Shift horizontal - Dersom glow bildene er større enn bildet av knappen må disse justeres til riktig posisjon med shift innstillingene. Les også eget punkt om å gjøre dette fra GUI under.
  • Shift verical - Samme om over men i Y aksen for bildet.
Sett opp knapp som designelement

Sette opp knapper i menyer

Under "Utseende" og "Menyutseende" kan du velge "Glowing item" i "Menyutseende" feltet. Fyll deretter ut feltene under på samme måte som beskrevet i forrige punkt om knapper som designelement.

Sette opp knapper i menyer

Plassering av glow bilder fra GUI

Høyre klikk på glow knappene i visning av websiden (Du må være logget inn i admin). Her vises det en meny for å justeres plasseringen til glow knappene for hover, down og selected bildene til knappen.

Plassering av glow bilder fra GUI

Alternativ løsning

Med CSS3 transitions kan du raskt sette opp lignende løsninger. Med glowing buttons kan du lage knapper og layers i Photoshop.

  • CSS gir mindre fleksibilitet
  • CSS laster raskere og krever ikke bilder