|
Lorsque vous déplacez votre souris sur le texte page Web, l'une des deux choses peuvent se produire : rien ou quelque chose qui attire l'oeil. Les développeurs Web utilisent JavaScript et Cascading Style Sheets pour créer une variété d' effets de survol visuels divertissement et d'information . Par exemple, déplaçant votre souris sur "Information" peut souligner ce mot. Cela permettrait à un utilisateur de savoir qu'il ne pouvait cliquez sur le mot pour plus d'informations . Lorsqu'il est utilisé avec parcimonie et de façon appropriée , les effets de renversement de texte améliorent l'expérience de navigation en fournissant une rétroaction visuelle et attirer l'attention sur des éléments de page importante . CSS Hover Effets
L'effet de renversement de texte simple ne nécessite aucun codage. Tous les navigateurs prennent en charge au moins une variation de cette feuille de style attribut hover . Il s'agit d'une classe «pseudo» . Le code suivant ajoute un pseudo classe à tous les liens sur une page:
a.MyLinks : hover { color: blue; background-color : red; font-weight : bold; }
Lorsque un utilisateur déplace la souris sur un lien, le lien affiche les propriétés définies dans la définition de classe .
effets JavaScript
développeurs Web appel à des fonctions JavaScript pour modifier l'apparence des éléments de texte . Les éléments de texte comprennent paragraphes , conteneurs div et rubriques. Pour appeler une fonction JavaScript quand un renversement se produit, référence à la fonction dans la balise HTML du texte élément. La balise suivante appelle la fonction JavaScript " changeText " lorsque l'utilisateur déplace la souris sur le titre:
C'est un titre < /h > ;
la fonction JavaScript recevra l'élément cap et changer sa couleur, taille, police, décoration de texte et d'autres propriétés de style. De nombreux navigateurs permettent d'activer JavaScript pour modifier l'opacité et la transparence d'un élément. Développeurs animent également le texte en changeant la valeur de l'emplacement de l' élément texte au fil du temps en utilisant les fonctions setInterval et setTimeOut .
DOM Effets
développeurs Web utilisent le Document Object Model (DOM) de modifier des éléments web. Des effets de texte DOM nécessitent plus de codage et de connaissances sur web HTML , CSS et JavaScript. Utilisation du DOM , les développeurs changent l'apparence d'un élément de texte , l'emplacement sur la page et le contenu même du texte. La commande " document.getElementById " est l'une des commandes les plus importantes disponibles pour manipuler le DOM . Utilisez cette commande pour récupérer une référence à un élément de texte. Une fois récupéré, modifier les propriétés DOM de l'élément pour obtenir l'effet désiré. Par exemple, modifier le contenu du texte en modifiant la propriété " innerHTML " de l'élément. Changez l'apparence de l'élément en modifiant la propriété " outerHTML " .
|
