Hvordan lage et bilde Roll i CSS
Bilde rollover effekter er en av de vanligste design funksjoner av mer avanserte nettsider. Når du plasserer markøren over et bilde med en rollover effekt, endrer bildet utseendet til du flytter markøren bort. Det finnes mange metoder for å lage rollover effekter, men en av de mest strømlinjeformet og profesjonelt utseende er å gjøre dem i CSS.
Bruksanvisning
1 Lag de to bildene som trengs for bilderoll i grafisk redigering programvare og lagre dem som jpg-filer. Sørg for at begge bildene har nøyaktig samme bildepunktdimensjoner og det samme beløpet, om noen, av tomrom rundt grafikken i hver jpg fil.
2 Opprett en ny grafikk dokument med samme bredde som bildene og nøyaktig to ganger høyden av heller.
3 Lim de to bildene inn i det nye dokumentet. Plasser den opprinnelige bildet øverst og roll bilde på bunnen; de bør være helt vannrett linje med hverandre og ta opp all tilgjengelig plass i dokumentet. Lagre denne nye filen som en jpg og navnet noe beskrivende som rolloverimage.jpg. Dette er den eneste bildefilen du vil bruke for roll; du trenger ikke de to opprinnelige.
4 Last opp bildet til din nettside eller til en gratis bilde hosting tjeneste og redde sin fulle URL.
5 Åpne HTML-dokument i en tekstbehandler og finn hodet kodene (<head> og </ head>). De bør være på toppen av dokumentet.
6 Legg CSS koder i mellom hodet koder, hvis de ikke allerede finnes. Kodene skal se slik ut: <style type = "text / css"> og </ style>.
7 Legg CSS-kode i mellom stil koder for å definere den første virkemåten til rollover image. Den grunnleggende kode for dette er en. {Display: block; Bredde: px; høyde: px; bakgrunn: URL () no-repeat 0 0; flow: hidden; text-indent: -10000px; font-size: 0px; line-height: 0px;}.
8 Legg de nødvendige verdier i CSS-koden for å gjøre det gjelde for bildet. Legg pikselverdien av rolloverimage.jpg filens bredde like før første px, pikselverdien av halvparten av filens høyde like før andre px og full URL til bildefilen i mellom parentes.
9 Definer et navn for roll bildets CSS-klasse. Dette er hva du vil bruke for å indikere i HTML-koden at bildet bør bruke CSS du bare inn, og det kan være noe enkelt ord du vil. Skriv dette ordet umiddelbart etter at perioden etter den første en i CSS-koden, uten mellomrom mellom dem. For eksempel, hvis du ønsker å kalle klassen "rollinover," CSS-koden bør starte med a.rollinover.
10 Legg en ny linje av CSS-kode i mellom koden du bare inn og den avsluttende stil tag. Denne linjen vil definere hva som skjer når den besøkende svever markøren over bildet. Den grunnleggende kode for dette er en: hover. {Background-posisjon: 0 -px;}.
11 Legg den nødvendige informasjonen til den andre linjen for å gjøre det aktuelt for ditt bilde. Legg klassenavnet du definerte umiddelbart etter perioden etter hover uten mellomrom, og legger til pikselverdien av halvparten av bildefilen høyde på mellom dashbordet og px. For eksempel, hvis du heter klassen "rollinover" og bildet er 100 piksler høyt, vil koden se slik ut: a: hover.rollinover {background-posisjon: 0 -50px;}.
12 Finne ut hvor i koden du ønsker å plassere bildet.
1. 3 Legg inn koden <a class=""> tekst </a> der du vil bildet skal vises. Legg klassenavnet du definert i CSS i mellom anførselstegn, og erstatte ordet "tekst" med en kort beskrivelse av bildet (eller av koblingen det vil bli brukt som, hvis aktuelt).
14 Legg inn koden href = "" i mellom de første anførselstegn og lukking brakett for å åpne en tag, med nettadressen du vil at bildet skal linke til mellom det nye settet med anførselstegn, hvis bildet er å være et bindeledd .