Når du bevæger musen over webside tekst, kan en af to ting ske : intet eller noget, der fanger øjet . Webudviklere bruger JavaScript og Cascading Style Sheets til at skabe en række visuelle rollover effekter, underholde og informere os. For eksempel kan bevæge musen hen over "Information" understrege, at ord. Dette ville lade en bruger vide, at han kunne klikke på ordet for at få flere oplysninger. Når det bruges sparsomt og korrekt, tekst rollover effekter forbedre browsing oplevelse ved at give visuel feedback og lede opmærksomheden på vigtige sideelementer . CSS Hover Effects
Den enkleste tekst rollover-effekt kræver ingen kodning. Alle browsere understøtter mindst én variant af denne Style Sheet hover attribut. Dette er en " pseudo "-klassen . Følgende kode tilføjer en pseudo klasse til alle links på en side:
a.MyLinks : hover { color : blue , background- color: red ; font -weight : fed ;}
Når en bruger bevæger musen over et link , linket viser de egenskaber, der er defineret i klassen definition.
Javascript effekter
webudviklere opfordre JavaScript-funktioner til at ændre udseendet af tekst- elementer. Tekst elementer omfatter stykker, div containere og overskrifter . At kalde en JavaScript-funktion , når en rollover opstår referere funktionen i teksten elementets HTML-tag . Følgende tag kalder " changeText " JavaScript-funktion , når en bruger bevæger musen hen over overskriften : Hej
Dette er en overskrift ;
JavaScript-funktion vil modtage overskriften element og ændre dens farve, størrelse , skrifttype , tekst dekoration og andre stil egenskaber. Mange browsere tillader JavaScript for at ændre et element opacitet og gennemsigtighed. Udviklere også animere tekst ved at ændre teksten elementets placering værdi over tid ved hjælp af setTimeout og setInterval funktioner.
DOM effekter
webudviklere bruge Document Object Model ( DOM) for at ændre webside elementer. DOM tekst effekter kræver mere kodning og viden om web HTML, CSS og JavaScript. Ved hjælp af DOM, udviklerne ændre en tekst element udseende, placering på siden , og selv om indholdet af teksten. Den " document.getElementById " kommando er en af de vigtigste kommandoer til rådighed for at manipulere DOM. Brug denne kommando til at hente en reference til en tekst element . Når hentet , ændre elementets DOM egenskaber til at opnå den ønskede virkning . For eksempel ændre indholdet af teksten ved at ændre elementets " innerHTML " egenskab. Skift elementet udseende ved at ændre " outerHTML " ejendom .
