Ændring af menupunkter

Det kan sagtens gøres med css.
Du bruger pseudo-klassen :hover til at ændre elementerne når brugeren fører musen hen over dem.
Et eksempel:

<style type="text/css">
#menuForside {
    background-image: url('images/forside.jpg');
    width: 100px;
    height: 50px;
}
#menuForside:hover {
    background-image: url('images/forsideHover.jpg');
}
</style>

<div id="menuForside">
</div>

Div'en er 100 pixel høj og 50 pixel bred. Den har billedet images/forside.jpg som baggrund når musen ikke er over den, og images/forsideHover.jpg når musen er over den.

Det andet problem løses blot med at sætte baggrunden på det valgte menupunkt til hover versionen af billedet hele tiden, altså:

<style type="text/css">
#menuForside {
    background-image: url('images/forsideHover.jpg');
    width: 100px;
    height: 50px;
}
</style>

<div id="menuForside">
</div>

Hmm..umiddelbart virker det ikke lige. Hvad hvis billederne ikke har samme størrelse?

Det sørger du selvfølgelig for at de har :)
Her kommer et lille eksempel hvor det i hvert fald virker:
http://jacobbundgaard.dk/misc/eksperten/mouseover.html

Bemærk dog at billederne ikke loades på forhånd, og at der derfor vil være en lille forsinkelse den første gang brugeren holder musen over dem hvis brugeren sidder på en langsom internetforbindelse, eller hvis billederne er alt for store.
Dette kan godt undgås med Javascript, men de fleste vil foretrække en ren CSS løsning.

<ole>

kimsey0 >> Eksemplet virker ikke i IE6 og IE7, så det er nok ikke hensigtsmæssigt  =)

Jeg anerkender helt klart, at det langtfra er utænkeligt, at 'de fleste vil foretrække en ren CSS løsning' ... det gælder dog ikke W3C! Da hover seneste var oppe til diskussion, endte man med fortsat at lade hover leve indenfor CSS - men udelukkende af hensyn til bagudkompatibilitet.

Man havde allerede set teksten på væggen - og var på baggrund af iagttagelser af kodevaner rundt om på WWW godt klar over, at hover lægger op til uønsket brug af CSS. Derfor var der meget stærke røster fremme, der opfordrede til at afskaffe hover - men den fik som sagt lov at overleve  =)

Meningen med W3C's arbejde er jo bl.a, at vi skal opdele i data (f.eks. XML), opmærkning (HTML), præsentation (CSS) og funktion (script). Problemet i dén forbindelse, at alt for mange funktionaliteter forsøges løst med CSS, hvor det rettelig burde løses med script.

Jeg - og andre, der forsøger at kode i overensstemmelse med tankerne bag reglerne - foretrækker derfor en script løsning fremfor en CSS løsning  ;o)

/mvh
</bole>

Har sjovt nok også problemer med at få det til at virke. Har du et eksempel på en script-løsning?

olebole >> Som du selv siger bør man opdele siden i data, opmærkning præsentation og funktion, og jeg vil da mene at visning af menupunkter er præsentation og ikke funktion, og at det derfor bør løses, så vidt muligt med CSS.

Weilbrecht, jeg havde ikke lige noget på lager så jeg har bare hurtigt skrevet et:
http://jacobbundgaard.dk/misc/eksperten/mouseover.html

Jeg er ikke sikker på om alt er skrevet som det burde ifølge W3C, men jeg ved at olebole vil fortælle mig det.

Der er jeg nok mere på linje med største delen af W3C og mener, at ændringer i sidens udseende - på baggrund af specifikke brugerhandlinger - hører under funktionalitet. Helt galt går det, når man begynder at folde menuer ind og ud med hover