Rollover effekter for bilder med CSS

Rollover effekter for bilder med CSS


Når du beveger musepekeren over et bilde på en webside, kan du se en animert roll effekt laget ved hjelp av Javascript eller CSS. Roll oppstår når en web-side erstatter ett bilde med en annen som reaksjon på bevegelse av en brukers mus. Nettsteder trenger ikke velt, men disse effektene kan legge visuell interesse til websider. Hvis du ikke vet Javascript og du ønsker å legge bildet rollovers til ditt nettsted, kan du gjøre det ved hjelp av CSS.

CSS Velt

CSS rollover effekter krever mer arbeid å sette opp enn Javascript rollover effekter, men det er fordeler ved å bruke CSS for å lage bilde velt. Når du bruker CSS, du redusere tiden det tar for web-tjeneren til å overføre bilder som brukes i effekten til en brukers nettleser. Du kan også lage din rollover effekter synlig for alle besøkende, i stedet for bare de som aktivere Javascript i nettleseren.

CSS Properties

Site eiere bruke CSS for å style gjenstander på sine nettsider. CSS attributter som bakgrunnsfarge, border og bredde definere hvordan bildene ser på en webside. CSS klasser definere disse attributtene. Følgende CSS-klasse inneholder to attributter, heter border-width og border-style:

.cssClass {
border-width: 2 piksler; border-style: solid;
}

Hvis et bilde referanser denne klassen, vil bildet vise en hel ramme som er to piksler bred. CSS klasser kan også legge til et bakgrunnsbilde til en webside element.

bilde~~POS=TRUNC Sprites

Utviklere legge CSS rollover effekter til nettsteder ved å plassere sprites på sidene sine. En sprite er et stort bilde består av mindre bilder. Opprett en sprite i et bilderedigeringsprogram ved å plassere to tilstøtende bilder i en større tomt bilde. Bildet til venstre vil være bildet som besøkende se når din web siden lastes. Bildet til høyre vil være den du vil vise når en flytter musen over sprite. Begge bildene må være av samme størrelse.

Anchor Tags Needed

HTML ankerkoder, også kalt koblinger, gjør CSS bilde velt mulig. Ankerkoder kan bruke CSS pseudo klasser som definerer hvordan en kobling ser når en flytter musen over linken. Følgende eksempel viser en pseudo klasse som heter "sveve" festet til en vanlig CSS-klasse som heter MyClass:

a.myClass: hover {background-posisjon: -300px 0; }

Enhver anker som refererer til denne klassen vil skifte sin bakgrunnsbilde 300 piksler til høyre når en mus roll skjer, skaper rollover effekt. Ankerkoden må også referere hoved CSS-klasse som definerer høyden og bredden på hvert bilde i din sprite.