Baggrundsbillede på a:hover

prøv at sætte en absolut reference til billedet:

background: url(http://www. - - DitWebSite - - .dk/images/menuknap.gif);

Det virker desværre ikke - kan det være at man skal lave en slags preload af billedet, og i så tilfælde hvordan gør man det?

Skyldes sikkert at der er fejl i koden (og det vil også kun virke i IE - og det er en fejl i IE at det visses som du formentlig vil have det).

Du kan ikke sætte width og height på et inlineelement som <a>, du er nødt til at lave det om til et blockelement, så du skal putte
display: block;
ind i de forskellige a-tags.

A.menu:link{
background: url(images/menuknap.gif);
width: 130px;
height: 20px;
display: block;
osv.

Og rækkefølgen skal være
link
visited
hover
active

Jeg har forsøgt mig med Display:block; og mit stylesheet ser nu således ud, men der er stadig en forsinkelse af visningen af billedet ved mouseover, kører man musen meget hurtigt over menupunkterne, forsvinder billederne helt:

a.menu:link {
font-family: verdana, arial, sans-serif; font-size: 11px; font-weight: normal; color: #4B4233;
text-decoration: none;    background-image: url('images/trekant.gif');
background-repeat: no-repeat; width: 148px; height: 17px;
padding-left : 9px; margin-left: 10px; display:block;
}

a.menu:visited{
font-family: verdana, arial, sans-serif; font-size: 11px; font-weight: normal; color: #4B4233;
text-decoration: none;    background-image: url('images/trekant.gif');
background-repeat: no-repeat; width: 148px; height: 17px;
padding-left : 9px; margin-left: 10px; display:block;
}

a.menu:hover {
font-family: verdana, arial, sans-serif; font-size: 11px; font-weight: normal; color: #E89C23;
text-decoration: none;    background-image: url('images/trekant_over.gif');
background-repeat: no-repeat; width: 148px; height: 17px;
padding-left : 9px; margin-left: 10px; display:block;
}

a.menu:active {
font-family: verdana, arial, sans-serif; font-size: 11px; font-weight: normal; color: #E89C23;
text-decoration: none;    background-image: url('images/trekant.gif');
background-repeat: no-repeat; width: 148px; height: 17px;
padding-left : 9px; margin-left: 10px; display:block;
}

Læg siden op, så vi kan se siden. Men forsinkelsen skyldes jo at billederne ikke er preloaded, dvs. de skal først hentes når nusen bliver kørt over linket.

F.eks. preload billederne med svaret i dette spørgsmål
http://www.eksperten.dk/spm/292903

Det har jeg nu forsøgt mig med, men ingen succes...

http://www.pixart.dk/cykelbranchen/index.htm

Såvidt jeg kan se fungerer det da fint nok.
Men du bør stadig sætte didplay: block ind ellers er det ikke korrekt kode og virker ikke helt som tiltænkt i andre browsere end IE.

Jeg tror det afhænger af hvilket styresystem el. Browserversion man ser det i, for hos mig er der en forsinkelse i visningen af billedet(XP/IE 6.0).

Jeg kan desværre ikke sætte et display:block på, da det laver et tvungent linieskift over og under menupunktet, og det bliver ikke pænt.

Du skal bare fjerne <br> ved links.

Det virker fint nok her i IE 6 sp1 og baggrundsgrafikken fint i Mozilla 1.3

Helt korrekt skal det vist også være (mht. billederne):
background-image:url("sti/fil.gif");  Altså " istedet for ' uden om!
Alt andet er korrekt syntaks.
Når forsinkelsen er langsom, kan det skyldes fil str. Et mouse over billede skal være MEGET let. Idet styleheets ikke i forvejen er det hurtigste (i forhold tiljavascript), så dur det ikke at have noget der bare ligner et tungt billede som mouseover. En mouse over skal jo loades LYN hurtigt. Dernæst kan srveren hvorpå tingene ligger, naturligvis også spille en rolle!

Hvis du vil undgå forsinkelsen, kan man trylle en hel del med kreativ brug af baggrundsbilleder:

http://www.pixy.cz/blogg/clanky/cssnopreloadrollovers/

mvh.
Morgan Roderick