Wanneer u uw muis over webpagina tekst , een van twee dingen kunnen gebeuren : niets of iets dat in het oog springt . Webontwikkelaars gebruiken JavaScript en Cascading Style Sheets aan een verscheidenheid van visuele rollover effecten die vermaken en informeren ons creëren . Bijvoorbeeld , het bewegen van je muis over " Information " zou dat woord onderstrepen . Dit zou laten een gebruiker weten dat hij kon op het woord voor meer informatie . Wanneer spaarzaam en juiste wijze wordt gebruikt , tekst rollover effecten versterken de surfervaring door visuele feedback en aandacht te richten op belangrijke pagina-elementen . CSS Hover Effecten
De eenvoudigste tekst rollover-effect vereist geen codering . Alle browsers ondersteunen ten minste een variant van deze Style Sheet hover attribuut . Dit is een " pseudo " -klasse . De volgende code voegt een pseudo- class om alle links op een pagina : a.MyLinks
: hover {color : blue ; background-color : red ; font-weight : bold ; }
Toen een gebruiker de muis beweegt over een link , de link toont de eigenschappen die zijn gedefinieerd in de klasse definitie .
JavaScript Effecten
Webontwikkelaars roepen JavaScript -functies om het uiterlijk te veranderen van tekstelementen . Tekstelementen zijn leden , div containers en rubrieken . Om een JavaScript functie te gebruiken wanneer een rollover optreedt , verwijzen naar de functie in de tekst element HTML -tag . De volgende tag de " changeText " JavaScript functie roept wanneer een gebruiker de muis beweegt over de kop : = "return changeText('this')"> Dit is een kop < /u > ;
de JavaScript-functie zal de rubriek element ontvangen en verander de kleur , grootte , lettertype , tekst decoratie en andere stijl eigenschappen . Veel browsers maken JavaScript om opaciteit en transparantie van een element te wijzigen . Ontwikkelaars tekst animeren ook door het veranderen van locatie waarde van de tekst element in de tijd met behulp van de setTimeOut en setInterval functies .
DOM Effecten
p Web- ontwikkelaars gebruiken het Document Object Model ( DOM ) naar webpagina elementen te wijzigen . DOM teksteffecten vereisen meer codering en kennis over web HTML , CSS en JavaScript . Met behulp van de DOM , ontwikkelaars verandert het uiterlijk van een tekst element , locatie op de pagina en zelfs de inhoud van de tekst . De " document.getElementById opdracht" is een van de belangrijkste commando's beschikbaar voor het manipuleren van de DOM . Gebruik deze opdracht om een verwijzing te halen voor een tekstelement . Eenmaal opgehaald , verandert het element DOM eigenschappen om het gewenste effect te bereiken . Zo verandert de inhoud van de tekst door het wijzigen van " innerHTML " eigenschap van het element . Verander het uiterlijk van het element door het veranderen van de " outerHTML " eigenschap .
|
