Forskjellig bakgrunnsbilde på a:link og a:hover

[raysv]

Heisann,

 

Har en side som jeg har laget i photoshop, slicet opp og satt sammen. På denne siden så har jeg en topp navigasjonsbar som er delt opp i flere bilder men alle har ulik størrelse i width osv.

 

Er det noen mulighet ved xhtml og css og få bakgrunnsbildet på disse linkene å forandre seg på a:hover? Må man legge hver enkelt link inn i en egen div og gi disse hver sin id eller klasse?

 

Hvis noen har noen formening om hvordan jeg burde gå frem her tas det imot med stor takk

[funkyboy]

Heisann,

 

Har en side som jeg har laget i photoshop, slicet opp og satt sammen. På denne siden så har jeg en topp navigasjonsbar som er delt opp i flere bilder men alle har ulik størrelse i width osv.

 

Er det noen mulighet ved xhtml og css og få bakgrunnsbildet på disse linkene å forandre seg på a:hover? Må man legge hver enkelt link inn i en egen div og gi disse hver sin id eller klasse?

 

Hvis noen har noen formening om hvordan jeg burde gå frem her tas det imot med stor takk

 

Søk på alistapart + sliding doors på Google. Tror det er dette du er ute etter.

Edit: Du kan også sjekke ut http://www.cssplay.co.uk/ (Stu Nicholls, guru i CSS)

Endret 17. desember 2007 av funkyboy

[Stian Jacobsen]

lag f.eks venstre del av bildet til 200px og så høyre del til f.eks 5px.. så bruker du en liste

<li><a href="#">tittel</a></li>

 

li {

background: url(hpic.png) no-repeat top right;

}

li a {

background: url(vpic.png) no-repeat top left;

}

 

li a:hover {

background: url(vpic_hover.png) no-repeat top left;

}

li a:hover li {

background: url(hpic_hover.png) no-repeat top right;

}

 

noe alla det... du må også huske display, width, padding og margin