Hvordan lage et enkelt CSS Bilde Roll

Velt endre på utseendet når du holder musa over en del av en webside. Linker eller miniatyrbilder bruke rollover effekter ofte. Når du bruker to separate bilder for å bygge en velt, men nettleseren laster ikke det andre bildet til brukeren svever. Dette fører til at roll å blinke når den først er aktivert, men å kombinere bildene til ett vil løse problemet. Etter å kombinere begge statene i rollover til ett bilde, kan du skifte bakgrunnen til venstre eller høyre, og dermed unngå stygge flash effekt.

Bruksanvisning

1 Åpne din opprinnelige bildet i et grafikkprogram og øke bredden på lerretet til det dobbelte av bildets opprinnelige størrelse. Dette bør skape et rom til høyre for det opprinnelige bildet som er stor nok til å romme roll bildet. Lim roll versjonen av bildet i det tomme rommet og lagre bildet.

2 Åpne kildekoden for websiden i en kode editor. Der du vil at roll skal vises, legge til et par av "<div>" tags:

<Div id = "rollover"> </ div>

Ikke legg noe mellom "<div>" koder. Gi div ID-navn som vist, slik at du kan målrette div i et stilark.

3 Åpne stilark for nettstedet i en editor. Hvis websiden ikke bruker stilark, legge CSS-koden mellom et par av "<style>" tags:

<Style type = "text / css">
</ Style>

4 Lag en stil regel for roll som setter sin bredde og høyde som i det opprinnelige bildet. Sett på bakgrunn av div som den kombinerte opprinnelige og rollover bilde:

rull over {

width: 150px;
høyde: 50 piksler;
bakgrunn: url ( 'sti / til / rollover.png');
}

Filbanen innsiden "url ()" må matche banen til det sammensatte bildet på webserveren.

5 Skriv hover state stil regelen for velt. Den ": hover" velgeren i CSS forteller nettleseren for å bruke en regel når en bruker svever sin musen over en målrettet element. Inne i denne regelen, angi bakgrunns posisjon til å flytte bildet over og vise roll staten. Få stilling ved å dividere bredden på den kombinerte bildet i to og deretter gjøre det negative:

roll: hover {

background-posisjon: -150px 0;
}

Den første verdien, "-150px," flytter bakgrunnsbildet 150 piksler til venstre for å avsløre roll staten. Den andre verdi er posisjonen av bakgrunnen fra toppen, som man bør gå til null.

Hint

• Du kan også opprette forbindelser med rollover bilder. Sett på div kode med et par av ankerkoder, holde samme ID navn. Tekst mellom ankerkoder vises på toppen av bakgrunnsbildet. Legg til "display: block;" til "#rollover" style regel å gjøre koblingen kompatibel med bredde og høyde egenskaper.