Bien que le HTML dynamique semble vivant, en fait, le Web tout entier est encore presque statique. Bien sûr, certains des sites Web les plus avant-gardistes proposent du contenu interactif depuis un certain temps, mais la plupart d'entre eux sont encore implémentés à l'aide de plug-ins ou en écrivant plusieurs pages pour différentes versions de navigateurs. Pour la plupart des producteurs de pages Web, même s'ils souhaitent écrire plusieurs versions d'une page, il leur est difficile d'avoir le temps. De plus, les pages Web capables d'obtenir des effets interactifs nécessitent généralement une bande passante élevée. l'auteur et le spectateur. Cependant, il n’est pas nécessaire qu’il en soit ainsi. Ici, vous pouvez apprendre un moyen rapide et facile d'ajouter des effets DHTML aux pages Web dans des conditions de faible bande passante. Il s'agit de la méthode des survols de souris. Cette méthode ne nécessite pas de charger d'images ni d'écrire plusieurs pages.
Meilleure capture d'informations avec la souris
Le survol de la souris est l'une des méthodes dynamiques les plus utilisées et les plus efficaces sur le Web, et une bonne raison est qu'elle permet au spectateur d'obtenir un retour clair et direct. Pensez-y comme ceci : déplacez la souris sur un lien hypertexte et le lien sera mis en surbrillance, changera de couleur ou changera pour dire "Je suis un lien !"
Cela ne signifie pas que tous les liens créés avec la souris sont identiques. Ils sont différents. La pire situation est que les liens de survol sont implémentés en langage Java ou dans des formats spéciaux, tels que le format Shockwave de Macromedia, qui nécessite que le spectateur installe un plug-in pour voir l'effet. Le meilleur des cas est que les liens au survol de la souris soient écrits en JavaScript pris en charge par tous les navigateurs. Mais même s'il est implémenté avec JavaScript, le navigateur doit toujours charger deux images, une pour une luminosité élevée et une pour un affichage normal, ce qui représente un gaspillage d'utilisation de la bande passante.
Examinons maintenant DHTML, qui crée des liens de survol sans charger d'images. La seule chose à noter est que le code DHTML doit être ouvert par le navigateur pour ouvrir les objets de la page Web, tels que les liens et les styles, afin qu'ils puissent être décrits par le modèle d'objet de document (DOM). En d’autres termes, le code ne fonctionne actuellement que dans Internet Explorer 4.0. Cependant, le navigateur de cinquième génération de Netscape (qui devrait sortir d'ici la fin de cette année) prendra entièrement en charge DOM. Ne vous inquiétez pas non plus de l'utilisation de liens au passage de la souris dans des navigateurs incompatibles ; les navigateurs qui ne prennent pas en charge le code DHTML dans la page les ignoreront simplement. (Pour plus de détails, veuillez consulter la section « Laissez le DOM fonctionner sur votre site Web » plus loin.)
Les pages WebCode
Ordinary sont divisées en deux zones principales : l'une est la zone de contenu et l'autre est la zone de navigation. Les liens au survol de la souris apparaissent généralement dans la zone de navigation. En règle générale, les boutons en surbrillance sont utilisés pour diriger les internautes vers différentes zones du site, telles que les graphiques du site ou les pages de commentaires. Au lieu d'utiliser des boutons, nous allons transformer des liens texte ordinaires en liens interactifs avec la souris. La méthode est la suivante : insérez d'abord des liens texte ordinaires dans le document, tels que :
< a href="contact_us.html">
Contactez-nous< /a>.
La deuxième étape change la couleur du lien texte lorsque la souris le survole. Le programme de script DHTML est le suivant :
function rollon( ){
if (window.event.
srcElement.tagName == "A"){
window.event.srcElement
= "red";}
}
function rolloff( ){
if ( window.event.srcElement.tagName
== "A"){
window.event.srcElement.style.color
= "";}
}
document.onmouseover = rollon;
document.onmouseout
= rolloff;
<Au milieu du script>, insérez-la dans le <head> de la page Web et vous pourrez immédiatement obtenir l'effet de survol de la souris sur chaque lien texte. Ci-dessous, nous analysons en détail comment cela est réalisé.
Le programme de script écrit précédemment définit deux fonctions clés : rollon (activé lorsque la souris se déplace sur le lien) et rolloff (activé lorsque la souris s'éloigne du lien). Chaque fonction commence par une simple instruction « if », ce qui signifie : chaque fois que l'événement onmouseover est appelé dans le document Web, la fonction rollon informera le navigateur pour déterminer si l'objet activant l'événement est une balise Anchor (window.event . srcElement.tagName == "A"). Si tel est le cas, le script appliquera un style spécial (rouge dans ce cas) au lien. De même, lorsque l'événement onmouseout se produit, la fonction rolloff ramènera le style à sa couleur par défaut (color="").
Les deux dernières lignes de ce script indiquent au navigateur d'exécuter la fonction rollon lorsque l'événement onmouseover se produit et de désactiver la fonction de lien mouseover (mouseover) lorsque l'événement onmouseout se produit.
Obtenez deux fois le résultat avec la moitié de l'effort
Internet Explorer 4.0 vous permet d'utiliser DHTML pour contrôler chaque objet du document. Naturellement, vous pouvez obtenir plus de fonctions en plus de changer la couleur de la balise Anchor. En fait, vous pouvez appliquer n'importe quel élément des feuilles de style en cascade (CSS, une spécification de formatage standard du W3C) à n'importe quel type d'objet ou de composant de ressource. Par exemple, en plus de faire apparaître un lien en rouge, vous pouvez également y ajouter ou supprimer du soulignement.
Pour supprimer le soulignement, insérez simplement l'attribut de style suivant dans toutes les balises d'ancrage de la page :
style = "text-decoration: none"
Cette instruction supprimera le soulignement du lien, le faisant apparaître comme un état normal ou par défaut. (Par défaut, Internet Explorer 4.0 et Navigator 4.0 soulignent tous les liens texte. L'instruction ci-dessus modifiera l'état par défaut de ces liens un par un.)
Ensuite, ajoutez l'instruction suivante sous la fonction rollon :
window.event.style.
textDecoration = "underline";
Désormais, la ressource pour l'événement de survol que vous avez défini deviendra rouge et aura un style souligné. Il convient de noter que le soulignement peut être supprimé en ajoutant l'instruction suivante à la fonction rolloff :
window.event.srcElement.style.
textDecoration = "none";
Les fonctions de modification ci-dessus qui peuvent être implémentées rapidement montrent la puissance d'un simple DHTML; programme de script. Il ne nécessite pas de charger d'images, mais utilise un code très flexible et portable pour produire des effets visuels accrocheurs. Vous pouvez l'utiliser pour accéder à n'importe quel document, même dans les navigateurs les plus anciens. Si vous souhaitez obtenir ce code et le maîtriser vous-même, veuillez visiter notre site Web : www.windowspro.com .
-------------------
Edward Grossman est le producteur du site Web www.windowspro.com . Il est titulaire d'un doctorat en philosophie et a mené des recherches dans le domaine de la philosophie. philosophie avant l’émergence du Web. Son e-mail : [email protected]
Ajoutez simplement environ 15 lignes de code au ①en-tête du document, et vous pouvez transformer ②les liens de texte normaux sur n'importe quelle page Web en ③liens interactifs activés par la souris (survol de la souris).
------------
Faites fonctionner DOM sur votre site Web.
Avec le HTML dynamique (DHTML), la programmation orientée objet n'est plus quelque chose que seuls les experts en programmation peuvent faire, elle devient l'affaire de tous. Un domaine que même les experts du Web les créateurs de pages peuvent s'impliquer. Ceci est en grande partie grâce au Document Object Model, ou DOM. Cette spécification du W3C traite chaque composant d'un document comme un objet, qu'il s'agisse d'un document, d'un style ou d'un lien. Les scripts peuvent modifier ces objets en fonction des entrées de l'utilisateur, du type de navigateur ou de nombreuses autres variables, notamment la modification de la taille, la modification du style ou la mise à jour du lien.
DOM peut ouvrir un document entier, permettant aux auteurs Web de créer des pages interactives hautement personnalisables sans imposer une surcharge de téléchargement importante aux utilisateurs. Cela permet non seulement d'activer des liens de survol à faible bande passante, mais également des menus de navigation Web pliables et des composants de page mobiles (tels que des images, des blocs de texte, etc.).
Pour plus d'informations sur le DOM, veuillez visiter les sites : www.w3.org/dom , www.microsoft.com/workshop/author/dhtml/ et Developer.netscape.com/docs/manuals/communicator/dynhtml/.
Pour des exemples d'applications DHTML, visitez : www.windowspro.com et www.projectcool.com (essayez de faire glisser Saturne) et parcourez la section « Afficher la source ».
Dans IE 4.0, vous pouvez utiliser Dynamic HTML pour gérer des dizaines d'objets. Une liste détaillée est disponible sur www.microsoft.com .