/* Bibliotheque DHTML Source : http://fr.selfhtml.org/ */ /* Variable globale DHTML: Cette variable sauvegarde si HTML dynamique est disponible sur le navigateur utilisé par l'utilisateur ou s'il ne l'est pas. Dans la fonction DHTML_init() cette variable reçoit une valeur qui ne devrait plus être modifiée ensuite. Si HTML dynamique est disponible pour l'un des Chapitre: vue d'ensemble différents modèles DHTML connus, alors elle reçoit la valeur 1, si ce n'est pas le cas, alors la valeur 0. Avec la requête simple et élégante if(DHTML) vous pouvez ensuite vérifier dans le cours de l'un de vos scripts, si HTML dynamique est possible ou non.. Variable globale DOM: Cette variable sauvegarde si HTML dynamique est possible d'après la syntaxe DOM ou non (valeur 1 ou valeur 0). Dans la fonction DHTML_init() cette variable reçoit une valeur qui ne devrait plus être modifiée ensuite. Avec if(DOM) vous pouvez ensuite interroger si un navigateur récent est en service, qui soutient déjà DOM dans son implémentation JavaScript. Variable globale MS: Cette variable aussi reçoit une valeur dans la fonction DHTML_init() . Quand sa valeur est 1, alors votre script tourne, c'est une quasi-certitude, sur l'Explorer Internet MS. S'il s'agit d'un navigateur de la 4 ème génération, la valeur 0 est sauvegardée dans la variable DOM, pour les navigateurs plus récents par contre, c'est 1. Avec if(MS && !DOM) vous pouvez donc demander dans votre script, s'il faut travailler avec la syntaxe DHTML de l'Explorer Internet 4.x. Variable globale NS: Comme MS cette variable reçoit aussi une valeur dans la fonction DHTML_init(). Si sa valeur est ensuite 1, alors votre script tourne, c'est une quasi-certitude, sur un navigateur Netscape de la 4 ème génération. Car si un navigateur Netscape 6.x ou autre rejeton du navigateur nouvellement programmé Mozilla est en service, c'est à la place la variable DOM qui est égale à 1, alors que NS est égal à 0. Avec if(NS) vous pouvez donc demander dans votre script, s'il faut travailler avec la syntaxe DHTML de l'ancien Netscape 4.x. Variable globale OP: Comme MS cette variable reçoit aussi une valeur dans la fonction DHTML_init(). Si sa valeur est ensuite 1, alors votre script tourne, c'est une quasi-certitude, sur un navigateur Opera. Avec if(OP) vous pouvez donc demander dans votre script, si un navigateur Opera est en service. S'il s'agit en outre, d'un navigateur Opera récent, la valeur 1 est sauvegardée dans les variables DOM et DHTML. */ var DHTML = 0, DOM = 0, MS = 0, NS = 0, OP = 0; /* Fonction DHTML_init() - initialiser la bibliothèque: Appel: DHTML_init(); Cette fonction est appelée automatiquement si vous voulez utiliser la bibliothèque présentée ici. À cet effet est noté à la fin du fichier bibliothèque l'appel DHTML_init(). Ensuite les variables globales importantes reçoivent leur valeur respective. Si DHTML_init() n'est pas appelée avant tous les autres appels de fonctions de cette bibliothèque, il ne se passe pas ce qui est escompté, étant donné qu'alors la version du navigateur est supposée ancienne. La façon d'agir des autres fonctions dépend de ce que les variables globales aient reçu des valeurs correctes. On en acquiert toutefois la certitude par la notation à la fin du fichier et les variables globales seront disponibles dans tous les fichiers dans lesquels cette bibliothèque est incorporée. La fonction DHTML_init() se sert de la possibilité des Autre page d'information demandes sur l'existence d'un objet. Dès la première requête, Il est vérifié s'il s'agit d'un navigateur Opera. Cela est nécessaire étant donné qu'Opera prétend connaître, selon les réglages de l'utilisateur, document.all ou bien document.layers. Pour vérifier si le modèle DOM est disponible, la requête si document.getElementById est disponible, est appropriée car il s'agit d'une méthode importante du modèle DOM qui devrait exister dans toutes les implémentations du DOM. Pour vérifier l'existence des anciennes syntaxes Microsoft et Netscape la requête porte sur leur objet DHTML essentiel. Si document.all est disponible, il s'agit de la syntaxe d'après l'ancien modèle Microsoft. Si document.layers est disponible, c'est la syntaxe d'après l'ancien modèle Netscape. Dans les deux cas, le navigateur Opera est exclu grâce à !OP, pour le cas où les réglages de l'utilisateur permettent la connaissance de ces objets. */ function DHTML_init() { if (window.opera) { OP = 1; } if(document.getElementById) { DHTML = 1; DOM = 1; } if(document.all && !OP) { DHTML = 1; MS = 1; } if(document.layers && !OP) { DHTML = 1; NS = 1; } } /* Fonction getElem() - rechercher l'objet élément: Exemples d'appel: objet_element = getElem("id","remarque",null); objet_element = getElem("name","champ_saisie",0); objet_element = getElem("tagname","p",8); objet_layer = getElem("index",2,null,null); Cette fonction est à vrai dire la fonction essentielle de la bibliothèque présentée ici. Elle accède à un certain élément du document et retourne l'objet de cet élément. Cela fonctionne aussi bien avec les navigateurs supportant le modèle DOM qu'avec l'ancien Explorer Internet 4.x et de façon plus restreinte (seulement en relation avec les éléments layer ou bien div) également avec Netscape 4.x. Dans la plupart des cas, vous n'avez pas besoin d'appeler cette fonction vous-même. Il s'agit davantage d'une fonction de base utilisée par les autres fonctions de la bibliothèque. Il y a pourtant également des cas dans lesquels un appel direct de cette fonction est indiqué. La fonction attend les paramètres suivants: p1 est l'art et la manière à employer pour accéder à un élément. Il y a quatre valeurs permises pour ce paramètre: "id", "name", "tagname" et "index". Transmettez "id", quand vous voulez accéder à un élément qui a un attribut id par exemple
. Transmettez "name", quand vous voulez accéder à un élément qui n'a pas d'attribut id, mais qui a un attribut name, par exemple . Transmettez "tagname", quand vous voulez accéder à un élément qui n'a ni attribut id ni attribut name. Ne transmettez "index" que lorsqu'il s'agit de calques Netscape, qui doivent être adressés par l'objet layers à l'aide de numéros d'index. p2 est une mention plus précise de ce que vous avez fixé pour p1: Si vous avez transmis pour p1 la valeur "id", alors la fonction attend pour p2 la valeur de l'attribut id. Si vous avez transmis pour p1 la valeur "name", alors la fonction attend pour p2 la valeur de l'attribut name. Si vous avez transmis pour p1 la valeur tagname, alors p2 attend le nom d'élément désiré, donc par exemple h1 ou bien div. Si vous avez transmis pour p1 la valeur "index", p2 attend le numéro d'index du calque Netscape souhaité. p3 n'est nécessaire que lorsque pour p1, c'est l'une des deux valeurs "name" ou "tagname" qui a été mentionnée. Dans ce cas, il vous faut mentionner pour p3 un numéro d'index avec le nom ou le nom d'élément correspondant à votre choix; ce numéro d'index est le numéro d'ordre dans le document de l'élément en question. Le premier élément a le numéro d'index 0, le deuxième le numéro 1 etc... Transmettez pour les paramètres sans mention de valeur tout simplement le mot null (sans guillemets!). La fonction getElem() parcourt dans l'ordre les modèles DHTML possibles et interroge d'abord avec if(DOM) la variable globale DOM pour savoir si la syntaxe du modèle DOM est disponible. Si oui. l'élément souhaité est recherché d'après la syntaxe du modèle DOM, en fonction des paramètres transmis puis il est renvoyé. Seulement quand la syntaxe du modèle DOM n'est pas disponible, il est tenté d'appliquer les anciens modèles DHTML. D'abord il est vérifié avec if(MS), si l'ancien modèle DHTML de Microsoft est disponible. Si oui, l'élément est recherché d'après cette syntaxe, par l'objet document.all. Si même la syntaxe Microsoft n'y parvient pas, il reste encore l'ancienne syntaxe Netscape interrogée avec if(NS). Dans ce cas un accès à un objet Layer est construit à partir des paramètres transmis. En même temps intervient dans la fonction un traitement d'erreur. Dans cet embranchement de la fonction, il est vérifié au moyen de l'opérateur typeof si l'élément désiré existe bien et s'il représente un objet. Si c'est le cas, l'élément est créé et retourné. Autrement, c'est undefined qui est renvoyé grâce à l'opérateur void. */ function getElem(p1,p2,p3) { var Elem; if(DOM) { if(p1.toLowerCase()=="id") { if (typeof document.getElementById(p2) == "object") Elem = document.getElementById(p2); else Elem = void(0); return(Elem); } else if(p1.toLowerCase()=="name") { if (typeof document.getElementsByName(p2) == "object") Elem = document.getElementsByName(p2)[p3]; else Elem = void(0); return(Elem); } else if(p1.toLowerCase()=="tagname") { if (typeof document.getElementsByTagName(p2) == "object" || (OP && typeof document.getElementsByTagName(p2) == "function")) Elem = document.getElementsByTagName(p2)[p3]; else Elem = void(0); return(Elem); } else return void(0); } else if(MS) { if(p1.toLowerCase()=="id") { if (typeof document.all[p2] == "object") Elem = document.all[p2]; else Elem = void(0); return(Elem); } else if(p1.toLowerCase()=="tagname") { if (typeof document.all.tags(p2) == "object") Elem = document.all.tags(p2)[p3]; else Elem = void(0); return(Elem); } else if(p1.toLowerCase()=="name") { if (typeof document[p2] == "object") Elem = document[p2]; else Elem = void(0); return(Elem); } else return void(0); } else if(NS) { if(p1.toLowerCase()=="id" || p1.toLowerCase()=="name") { if (typeof document[p2] == "object") Elem = document[p2]; else Elem = void(0); return(Elem); } else if(p1.toLowerCase()=="index") { if (typeof document.layers[p2] == "object") Elem = document.layers[p2]; else Elem = void(0); return(Elem); } else return void(0); } } /* Fonction getCont() - rechercher le contenu de l'élément: Exemples d'appel: if(! NS) contenu_element = getCont("id","remarque",null); if(! NS) contenu_element = getCont("name","lien",3); if(! NS) contenu_element = getCont("tagname","p",8); Par cette fonction qui accède de son côté à la fonction getElem(), vous pouvez rechercher commodément rechercher le contenu d'un élément - tout au moins si le modèle DOM ou l'ancien modèle DHTML de Microsoft est disponible. L'ancien modèle de Netscape ne peut lire le contenu d'élément. Dans les exemples d'appel, l'appel de la fonction se fait à condition qu'il ne soit pas travaillé d'après l'ancienne syntaxe de Netscape (if(!NS)). La fonction retourne une chaîne de caractères vide lorsqu'elle emploie le modèle DOM et au cas où le contenu de l'élément n'est pas du texte mais un autre élément. Si donc par exemple est noté:

le texte

Alors la fonction retourne la valeur le texte. Mais s'il est noté:

le texte

Alors la fonction retourne, lorsque le modèle DOM est appliqué, une chaîne de caractères vide, étant donné qu'il n'y a aucun texte comme contenu d'élément de p, mais le contenu d'un autre élément, à savoir l'élément b . Les paramètres pour getCont() sont les mêmes que pour getElem(). Seule la valeur "index" pour le paramètre p1 n'est pas traitée par cette fonction. Transmettez pour les paramètres sans mention de valeur tout simplement le mot null. La fonction getCont() se sert donc de la fonction de base getElem() et passe simplement ses trois paramètres transmis à celle-ci. Pour la syntaxe DOM, elle essaie d'accéder au contenu texte de l'élément avec firstChild.nodeValue, pour la syntaxe Microsoft, par la propriété innerText de l'objet all. À la manière dont la fonction getCont() appelle la fonction getElem(), vous pouvez également voir comment vous pouvez appeler directement la fonction de base getElem() d'une autre façon. Étant donné que cette fonction renvoie un objet élément, vous pouvez joindre les propriétés et fonctions d'un tel objet à l'appel de la fonction. En tout état de cause, il vous faut demander vous-même d'après quel modèle il est travaillé. Si c'est d'après le modèle DOM (interrogation possible avec if(DOM)), des méthodes et propriétés des objets éléments HTML peuvent être attachées, à l'appel de getElem() ou bien également celles de l'objet node. La fonction getCont() tient compte également de navigateurs comme Opera qui ne peuvent pas encore lire les contenus de façon dynamique mais interprètent cependant d'autres parties de la bibliothèque. Avant de tenter de lire des contenus, elle demande avec if (DOM && getElem(p1,p2,p3) && getElem(p1,p2,p3).firstChild)), si l'objet désiré existe et si l'objet firstChild est également présent. Ce n'est que lorsque cette condition est remplie, qu'il est essayé de lire le contenu. Par ce biais on évite dans tous les cas un message d'erreur. */ function getCont(p1,p2,p3) { var Cont; if(DOM && getElem(p1,p2,p3) && getElem(p1,p2,p3).firstChild) { if(getElem(p1,p2,p3).firstChild.nodeType == 3) Cont = getElem(p1,p2,p3).firstChild.nodeValue; else Cont = ""; return(Cont); } else if(MS && getElem(p1,p2,p3)) { Cont = getElem(p1,p2,p3).innerText; return(Cont); } else return void(0); } /* Fonction getAttr() - rechercher le contenu d'un attribut: Exemples d'appel: Attribut=getAttr("name","nom_image",0,"height"); Attribut=getAttr("id","passage",null,"id"); if (!NS) Attribut=getAttr("name","ancre",0,"href") if (NS) Attribut=getAttr("name","links",0,"href") Par cette fonction qui accède de son côté à la fonction getElem(), vous pouvez rechercher commodément rechercher la valeur d'un attribut dans un élément - tout au moins quand le modèle DOM ou l'ancien modèle DHTML Microsoft est disponible. Pour certains objets, c'est même possible avec Netscape 4. Outre les trois paramètres déjà connus, cette fonction attend le quatrième paramètre p4. Pour celui-ci, vous devez transmettre le nom de l'attribut désiré. Transmettez pour les paramètres sans mention de valeur tout simplement le mot null. La fonction getAttr() utilise les méthodes objet getAttribute(), disponibles aussi bien dans le modèle DOM que dans l'ancien modèle Microsoft. Pour Netscape 4 par contre la propriété désirée est interrogée directement. Pour ce navigateur, il est possible dans certains cas d'accéder à la propriété désirée uniquement par des sous-objets, par exemple pour les liens et les ancres. Vous pouvez y accéder en notant dans le paramètre p2 le nom du sous-objet (par exemple links ou elements) et dans le paramètre p3 le nom ou bien le numéro d'index de l'objet. Le choix de l'objet correct est pris en charge par la fonction de base getElem(). Bien sûr, intervient dans ce cas, la vérification si l'objet désiré existe bien. */ function getAttr(p1,p2,p3,p4) { var Attr; if((DOM || MS) && getElem(p1,p2,p3)) { Attr = getElem(p1,p2,p3).getAttribute(p4); return(Attr); } else if (NS && getElem(p1,p2)) { if (typeof getElem(p1,p2)[p3] == "object") Attr=getElem(p1,p2)[p3][p4] else Attr=getElem(p1,p2)[p4] return Attr; } else return void(0); } /* Fonction setCont() - modifier le contenu de l'élément de façon dynamique: Exemples d'appel: setCont("id","remarque",null,"nouvelle remarque"); setCont("name","lien",3,"nouveau lien"); setCont("tagname","p",8,"nouveau contenu de texte de l'élément"); if(NS) setCont("index","2",null,"nouveau contenu du calque"); Avec cette fonction, vous pouvez changer le contenu d'un élément de façon dynamique. La fonction setCont() se sert pour l'accès à l'élément désiré de la fonction de base getElem(). Les trois premiers paramètres qui sont les mêmes pour cette fonction que pour les autres fonctions sont pour cela passés à getElem(). Comme quatrième paramètre p4, la fonction setCont() attend le contenu texte désiré. Faîtes attention que ce texte, tout au moins pour le modèle DOM et pour l'ancien modèle Microsoft, n'est interprété que comme du pur texte. Les formatages HTML dans le texte y sont interprétés comme texte en clair. Transmettez pour les paramètres sans mention de valeur tout simplement le mot null. Pour les calques Netscape, la fonction setCont() utilise automatiquement les commandes habituelles pour l'ouverture du document calque (document.Layer.document.open()), pour écrire (document.Layer.document.write()) et pour fermer (document.Layer.document.close()). La fonction setCont() tient compte également de navigateurs comme Opera qui ne peuvent pas encore modifier les contenus de façon dynamique mais interprètent cependant d'autres parties de la bibliothèque. Avant de tenter de modifier des contenus, elle demande avec if (DOM && getElem(p1,p2,p3) && getElem(p1,p2,p3).firstChild)), si l'objet désiré existe et si l'objet firstChild est également présent. Ce n'est que lorsque cette condition est remplie qu'il est essayé de modifier le contenu. Par ce biais on évite dans tous les cas un message d'erreur. */ function setCont(p1,p2,p3,p4) { if(DOM && getElem(p1,p2,p3) && getElem(p1,p2,p3).firstChild) getElem(p1,p2,p3).firstChild.nodeValue = p4; else if(MS && getElem(p1,p2,p3)) getElem(p1,p2,p3).innerText = p4; else if(NS && getElem(p1,p2,p3)) { getElem(p1,p2,p3).document.open(); getElem(p1,p2,p3).document.write(p4); getElem(p1,p2,p3).document.close(); } } /* Fonction hideObject Rend un élément non visible Fonction showObject Rend un élément visible Fonction alternateVisibility Rend un élément visible s'il est non visible et inversement p1 Il y a quatre valeurs permises pour ce paramètre: "id", "name", "tagname" et "index". Transmettez "id", p2 est une mention plus précise de ce que vous avez fixé pour p1: Si vous avez transmis pour p1 la valeur "id", alors la fonction attend pour p2 la valeur de l'attribut id. Si vous avez transmis pour p1 la valeur "name", alors la fonction attend pour p2 la valeur de l'attribut name. Si vous avez transmis pour p1 la valeur tagname, alors p2 attend le nom d'élément désiré, donc par exemple h1 ou bien div. Si vous avez transmis pour p1 la valeur "index", p2 attend le numéro d'index du calque Netscape souhaité. p3 n'est nécessaire que lorsque pour p1, c'est l'une des deux valeurs "name" ou "tagname" qui a été mentionnée. Dans ce cas, il vous faut mentionner pour p3 un numéro d'index avec le nom ou le nom d'élément correspondant à votre choix; ce numéro d'index est le numéro d'ordre dans le document de l'élément en question. Le premier élément a le numéro d'index 0, le deuxième le numéro 1 etc... */ function hideObject(p1, p2, p3){ var element = getElem(p1,p2,p3); if (element){ if (!NS) element.style.visibility = "hidden"; else if (NS) element.visibility = "hide"; } } function showObject(p1, p2, p3){ var element = getElem(p1,p2,p3); if (element){ if (!NS) element.style.visibility = "visible"; else if (NS) element.visibility = "show"; } } function alternateVisibility(p1, p2, p3){ var element = getElem(p1,p2,p3); if (element){ if (!NS){ if (element.style.visibility == "visible"){ element.style.visibility = "hidden"; } else{ element.style.visibility = "visible"; } } else if (NS){ if (element.vivibility == "show"){ element.visibility = "hide"; } else{ element.visibility = "show"; } } } } function hideMenu (id) { for (var i=0;i