När du flyttar musen över webbsidan text , kan en av två saker hända : ingenting eller något som fångar ögat . Webbutvecklare använder JavaScript och CSS för att skapa en mängd olika visuella rollover effekter som underhåller och informerar oss . Till exempel kan flytta musen över " Information " understryka det ordet . Detta skulle låta användaren veta att han kunde klicka på ordet för mer information . När det används sparsamt och lämpligt sätt , text rollover effekter förbättra webbupplevelse genom att ge visuell feedback och rikta uppmärksamheten på viktiga sidelement . CSS Hover Effekter
enklaste text rollover effekt kräver ingen kodning . Alla webbläsare stödjer minst en variant av denna Style Sheet hover attribut . Detta är en " pseudo " klass . Följande kod lägger till en pseudo klass till alla länkar på en sida :
a.MyLinks : hover {color : blue ; background- color : red ; font -weight : bold ; }
När användaren rör musen över en länk , visas länken de egenskaper som definierats i klassen definition .
Javascript effekter
webbutvecklare uppmanar JavaScript-funktioner för att ändra utseende av textelement . Text inslag stycken , containrar div och rubriker . Om du vill ringa en JavaScript -funktion när en rollover inträffar , referera funktionen i texten elementet HTML -taggen . Följande tagg kallar " changeText " JavaScript -funktionen när en användare flyttar musen över rubriken :
Detta är en rubrik < /h> ;
JavaScript -funktionen kommer att få rubriken elementet och ändra dess färg , storlek , typsnitt , text dekoration och andra egenskaper stil . Många webbläsare tillåta javascript för att ändra ett elements opacitet och öppenhet . Utvecklare animera också text genom att ändra texten elementets läge värde över tiden med setTimeout och funktioner setInterval .
DOM Effekter
Webbutvecklare använda Document Object Model (DOM ) för att modifiera webbsida element. DOM texteffekter kräver mer kodning och kunskap om webb HTML , CSS och JavaScript . Med hjälp av DOM , utvecklarna ändrar ett textelement utseende , placering på sidan och även innehållet i texten . Den " document.getElementById "-kommandot är ett av de viktigaste kommandon som är tillgängliga för att manipulera DOM. Använd detta kommando för att hämta en referens till ett textelement . När hämtas , ändrar elementets DOM egenskaper för att uppnå önskad effekt . Till exempel , ändra innehållet i texten genom att ändra elementets " innerHTML " egendom . Ändra elementets utseende genom att ändra " outerHTML " egendom .
