HTML-koder for bilde fadingeffekter

June 29

Når du besøker en nettside, vil du sannsynligvis oppleve en rekke forskjellige effekter. Mange effekter, som falming, er ferdig med en kombinasjon av teknologier. Dette betyr ikke at de er kompliserte å produsere, men de bruker mer enn bare rett HTML-kode for å fullføre effekt.

HTML

HTML står for Hyper Text Markup Language. Det er språket i Web. Dens primære funksjon er å lage websiden struktur. Effektene eller animasjoner som inngår i nettet er ikke skapt med HTML. HTML gir rammene for effektene. Det tilsier hvor visse elementer vil vises i nettleseren. Du kan bygge en hel webside i HTML, men du vil være begrenset kreativt. HTML brukes hovedsakelig for struktur og legge til tekst; annen funksjonalitet er lagt med skriptspråk og animasjon programvare.

CSS

CSS står for Cascading Style Sheet. Elementene på en webside er stylet med CSS. CSS tillater en programmerer å diktere en stil for en bestemt element, og deretter bruke den gjennom et nettsted. Dette betyr at hvis du ønsket alle dine overskrifter for å være modig og blå, kan du definere denne stilen med en linje med kode, og det ville bli brukt på hver side på nettstedet. Dette eliminerer behovet for å recode. Med HTML og CSS, kan du legge til en fading effekt på et bilde i din webside.

Alpha

De CSS alfa filterskift vil tillate deg å endre tettheten av bildet. Opacity dikterer hvordan bildet vises på skjermen. Jo lavere opasitet, vises mer falmet bildet. Opprette en fade er et perfekt eksempel på hvordan HTML og CSS fungerer sammen. Du vil bruke HTML for å indikere hvilket bilde som skal plasseres på skjermen og CSS å falme bildet til riktig dekkevne.

Linjen med kode ovenfor tar et bilde fil som heter "MyImage" og reduserer opacity til 40 prosent. Bildet vil ha en fade litt mer enn halvparten når nettleseren viser det.

Bruker

Den fade effekt kan brukes på flere måter. Du kan bruke et falmet bilde som bakgrunn for hele webside eller plassere en gjennomsiktig boks over et bilde for å gjøre teksten mer lesbar. Opacity kan endres når nettstedet besøkende utløser en hendelse. Som et eksempel, kan du visne et bilde til en opasitet på 40 når brukeren plasserer muse på toppen av det, så ta det med tilbake til 100 når musen forlater bildet. Denne typen effekten er nyttig når du ønsker å vise at brukeren har "valgt" et bestemt bilde. Et eksempel på denne type effekt kan bli funnet nedenfor.

<Img style = "opacity: 1; filter: alpha (opacity = 100)" onmouseover = "this.style.opacity = 0,4; this.filters.alpha.opacity = 40"

onmouseout = "this.style.opacity = 1; this.filters.alpha.opacity = 100" />