Når du beveger musen over websiden tekst, kan en av to ting skje : ingenting eller noe som fanger øyet . Webutviklere bruker JavaScript og Cascading Style Sheets å lage en rekke visuelle rollover effekter som underholde og informere oss . For eksempel kan bevege musen over " Information" understreke at ordet . Dette ville la en bruker vite at han kunne klikke på ordet for mer informasjon. Når det brukes med måte og riktig , tekst rollover effekter forsterke leseopplevelsen ved å gi visuell feedback og å rette oppmerksomheten mot viktige sideelementer . CSS Hover Effects
Den enkleste tekst rollover effekt krever ingen koding . Alle nettlesere støtter minst en variant av denne Style Sheet hover attributt. Dette er en " pseudo "-klassen . Følgende kode legger til en pseudo -klasse til alle koblinger på en side :
a.MyLinks : hover { color : blue ; background- color: red ; font- weight: bold ;}
Når en bruker beveger musen over en link, viser koblingen egenskapene definert i klassen definisjonen .
Javascript effekter
webutviklere påkalle JavaScript-funksjoner for å endre utseendet av tekstelementer . Tekst elementer inkluderer avsnitt, div beholdere og overskrifter . Å kalle en JavaScript-funksjon når en rollover , referere til funksjonen i teksten element HTML- koden. Følgende tag kaller " changeText " JavaScript -funksjonen når en bruker beveger musen over overskriften : en
Dette er en overskrift < /h> ;
JavaScript -funksjonen vil motta overskriften element og endre farge , størrelse , skrift, tekst dekorasjon og andre stil egenskaper . Mange nettlesere lar JavaScript for å endre et element opasitet og transparens . Utviklere også animere tekst ved å endre teksten element beliggenhet verdi over tid ved hjelp setTimeout og setInterval funksjoner.
DOM Effekter
webutviklere bruke Document Object Model ( DOM ) for å endre websiden elementer . DOM tekst effekter krever mer koding og kunnskap om web HTML , CSS og JavaScript. Ved hjelp av DOM , utviklere endre en tekst element utseende , plassering på siden og selv innholdet i teksten . Den " document.getElementById "-kommandoen er en av de viktigste kommandoer som er tilgjengelige for å manipulere DOM . Bruk denne kommandoen for å hente en referanse til en tekst element . Når den er funnet , endre elementets DOM egenskaper for å oppnå ønsket effekt . For eksempel endre innholdet i teksten ved å endre elementets " innerHTML " eiendom . Endre element utseende ved å endre " outerHTML " eiendom .
