meny, knapper (bilder) endres ved hover

[johanf]

Er det noen våkne, tro?

 

Jeg prøver å fikse hoverknapper, hvor selve knappen er "dobbelt" så stor som den skal være. Så når jeg lager menyen med <ul>, så skal den bare vise den øverste delen av bildet, men ved hover skal den vise den nederste delen.

 

________

|_______| <- øverste del

|_______| <- nederte del

 

Håper det er noen som kan vise meg hvordan eller kan linke til en tutorial!

 

Takk for hjelpen!

 

_

johanf

[Haraldson]

Background-position:bottom/top eller background-position:XXpx XXpx

 

» http://wellstyled.com/css-nopreload-rollovers.html

Endret 31. juli 2004 av Mr.Berg

[Loomy]

Tror Arve har gjort noe slikt på sin meny. Hemmeligheten er å bruke forskjellig background-position på :hover og "ikke-hover"

 

Se på Arve sin kode:

div#main_menu ul li a {
width: 170px;
height: 30px;
display: block;
overflow: hidden;
background-position: -170px 0;
}

div#main_menu ul li a:hover {
background-position: 0 0;
overflow: visible;

[johanf]

mr.berg, din link hadde vært genial dersom den hadde tatt for seg å bruke flere forskjellige gif'er i de forskjellige linkene.

 

Loomy, din link hadde vært genial dersom jeg hadde fatta hvordan jeg skulle bruke koden.

 

Kanskje jeg er for trøtt? Tror jeg tar pause ...

 

_

johanf

[pgdx]

Forskjellig? Det er jo bare til å bytte background-image, det...

 

a:link {background-image: url("1.png");}

a:hover {background-image: url("2.png");}

[Haraldson]

Forskjellig? Det er jo bare til å bytte background-image, det...

 

a:link {background-image: url("1.png");}

a:hover {background-image: url("2.png");}

Det er ikke optimalt, da det tar tid å laste rolloveren etter at siden er ferdig.

 

johanf: Det er da blitt veldig bra forklart nå, alt som skal til er i posten her.

[Arve Systad]

Forskjellig? Det er jo bare til å bytte background-image, det...

 

a:link {background-image: url("1.png");}

a:hover {background-image: url("2.png");}

Du svarte ikkje på trådstarter sitt spørsmål.

Dessuten er det meir effektivt å bruke ett og samme bilde istede for to.

 

Faktisk - så går det an å bruke ett og samme bilde for alle menyelementer, berre plassere forskjellig (Det eine bilder inneholder normal og hover-state for alle linker i menyen)

[Lokaltog]

Faktisk - så går det an å bruke ett og samme bilde for alle menyelementer, berre plassere forskjellig (Det eine bilder inneholder normal og hover-state for alle linker i menyen)

Godt poeng! Sånn har ikke jeg tenkt før.. Må være en genial måte å laste en meny med bilder som ikke er 100kB per knapp..

[johanf]

okay, jeg har ikke lagt meg enda ....

 

Det jeg ville frem til var, at jeg har to (flere) gif filer. I hver gif-fil er det to stadier av en "knapp". Ved hover skal den endre utseende.

 

Jeg vet det har blitt forklart før, men jeg har ikke funnet det. Måten det blir gjort på, er å gjemme den delen av bildet som ikke skal vises. Den øverste delen er synlig til vanlig, mens den nederste er synlig ved hover.

 

Dette gjelder flere elementer i en meny.

 

_

johanf

[pgdx]

a:link {background-position: top left; }

a:hover {background-position: bottom left; }

[johanf]

okay - jeg fiksa det ... litt hjelp fra linken til Mr.Berg, så ordna det seg. PoleCat har også vært en liten kilde til kode.

 

Takk allesammen!

 

Resultat? -> http://johanf.delusory.net/

 

edit: Selvfølgelig er det ikke likt i Opera og IE ... dritt!

 

edit 2: Da var den fiksa også! Skulle bare bruke height istedenfor padding, så ble det fine greier!

 

_

johanf

Endret 1. august 2004 av johanf