Si HTML et HTTP ont révolutionné la communication de l'information, XML est en passe de devenir le langage du 3e millénaire le plus utilisé au sein d'une page web et bon nombres de documents utilisés tous les jours (MS Word, MS Excel,...).

XML n'est pas le remplaçant du HTML mais plutôt une (r)évolution de celui-ci...

Si vous désirez plus d'information sur XML, parce que cette page ne traitera pas du langage, vous pouvez vous rendre sur le site du W3C dont l'adresse figure plus haut ou bien chez Microsoft, le principal acteur:
http://msdn.microsoft.com/resources/pardixml.htm
ou encore
http://msdn.microsoft.com/voices/corner.asp (l'exemple américain de George Young dont je me suis inspiré pour créer cet exemple)
et puis aussi
http://www.microsoft.com/FRANCE/msdn/Technologies/XML/info/

* Sur quels sites utiliser XML ? Il suffit de demander à vos fournisseurs d'accès si Internet explorer 4.0 ou ultérieur ( 5.0 ce serait bien) ou alors les Parsers d'XML. Sans cela, il faudra bidouiller le HTML, comme les menus de mon site, où vous lancer dans Java.
Vous vous rendrez compte qu'en fait peu de fournisseurs d'accès gratuits installent des outils intéressants comme les extensions Frontpage, les ASP, Internet explorer (donc XML), etc... Et c'est bien dommage. Bon, sur ce, inutile de pleurer cela n'apportera rien. Ou plutôt, au boulot, car c'est pour cela que vous êtes ici !

George Young dirige le développement des sites Microsoft Windows, et a participé auparavant au développement des sites MSDN Online et Site Builder Network. Durant ses loisirs, il écoute la radio mexicaine avec Windows Media Player, et se déplace régulièrement entre Redmond (État de Washington) et la Nouvelle-Orléans.

   /* MENUS.JS */
var eOpenMenu = null;
    function OpenMenu(eSrc,eMenu)
    {
        eMenu.style.left = eSrc.offsetLeft + divMenuBar.offsetLeft;
        eMenu.style.top = divMenuBar.offsetHeight + divMenuBar.offsetTop;
        eMenu.style.visibility = "visible";
        eOpenMenu = eMenu;
    }

    function CloseMenu(eMenu)
    {
        eMenu.style.visibility = "hidden";
        eOpenMenu = null;
    }

    function document.onmouseover()
    {
        var eSrc = window.event.srcElement;
        if ("clsMenuBarItem" == eSrc.className)
        {
            eSrc.style.color = "black";     /* La couleur de la police des menus sur MouseOver c'est ici */
            var eMenu = document.all[eSrc.id.replace("tdMenuBarItem","divMenu")];
            if (eOpenMenu && eOpenMenu != eMenu)
            {
                CloseMenu(eOpenMenu);
            }
            if (eMenu)
            {
                OpenMenu(eSrc,eMenu);
            }
        }
        else if (eOpenMenu && !eOpenMenu.contains(eSrc) && !divMenuBar.contains(eSrc))
        {
            CloseMenu(eOpenMenu);
        }
    }
   
    function document.onmouseout()
    {
        var eSrc = window.event.srcElement;
        if ("clsMenuBarItem" == eSrc.className)
        {
            eSrc.style.color = "";
        }
    }   

vous allez créer un autre fichier (menus.css). Ce sont les informations contenues qui donneront l'aspect au menu que vous êtes en train de créer (couleurs, propriétés de polices, etc).

    /* MENUS.CSS */

    BODY { font-family:verdana; font-size:70%; }
    H1 { font-size:120%; font-style:italic; }
                   
    DIV#divMenuBar { background-color:#80A48C; }  /* Ici, la couleur du fond est en héxa. Vous pouvez la changer */
    TABLE#tblMenuBar TD { font-size:60%; color:white; padding:0px 5px 0px 5px; cursor:default; }
    TABLE#tblMenuBar TD.clsMenuBarItem { font-weight:bold; cursor:hand; }
                 /* le menu possède une fonte de couleur blanche
    DIV.clsMenu {
        font-size:90%; background-color:#80A48C;
        position:absolute; visibility:hidden; width:150px;     /*  Les sous-menus ont une largeur de 150 points */
        padding:5px 5px 5px 8px; border-top:1 white solid;
    }
    DIV.clsMenu A { text-decoration:none; color:white; font-weight:bold; }
    DIV.clsMenu A:hover { color="black"; }   /* Couleur police des sous-menus sur MouseOver */

    BUTTON { font-family:tahoma; font-size:100%; }

Ensuite vous allez créer, votre page HTML (mapage.html) en déclarant les 2 fichiers précédemment créés. Si vous devez les placer dans un répertoire différent, n'oubliez pas de le modifier. Ex :  _private/menus.css

<html>
<head>
<meta name="author" content="Moi">
<meta name="description" content="Ma page pleine de menus">
<meta name="keywords" content="XML">
<title>Ma page avec un chouet menu</title>
<link HREF="menus.css" REL="STYLESHEET" TYPE="text/css">
</head>
<script LANGUAGE="JavaScript" SRC="menus.js">
</script>

Ensuite, il faudra placer ce menu sur cette page html où vous voulez entre 2 balises DIV. La barre de menu sera insérée à l'endroit où se trouve le code suivant.
Astuce : N'insérez pas cette barre de menu dans une cellule au milieu d'un tableau car l'affichage des menus ne sera pas correct (voir ci-après).

<body>
<div id="dataContainer"></div>
</body>

Ne faites pas :
<table border="0" cellspacing="1" width="100%">
<tr>
<td width="44%"></td>
<td width="56%"></td>
</tr>
<tr>
<td width="100%" colspan="2"><div id="dataContainer"></div></td>
</tr>
<tr>
<td width="44%"></td>
<td width="56%"></td>
</tr>
</table>

Mais vous pouvez faire :
<table border="0" cellspacing="1" width="100%">
<tr>
<td width="44%">Mon texte</td>
<td width="56%">Mon autre partie de texte du tableau supérieur</td>
</tr>
</table>
<div id="dataContainer"></div>   <!-- Hors tableau  -->
<table border="0" cellspacing="1" width="100%">
<tr>
<td width="44%">Mon texte</td>
<td width="56%">Mon autre partie de texte du tableau inférieur</td>
</tr>
</table>

Ce code <div id="dataContainer"></div> hors d'une cellule d'un tableau. Cela peut fonctionner d'une autre manière mais je n'ai pas cherché. Cette solution est à mon avis la plus simple.

Création du "squelette" HTML (menus.xsl) à partir d'une feuille de style XSL. Ce fichier va servir à formater les informations contenues dans le document

<TOPICS TYPE="Office 2000">
<TOPIC>
<TITLE>Access</TITLE>
<URL>/off2k/access/access.htm</URL>
</TOPIC>
<TOPIC>
<TITLE>Word</TITLE>
<URL>/off2k/word/word.htm</URL>
</TOPIC>
</TOPICS>

<TOPICS TYPE="Randonnée">
<TOPIC>
<TITLE>Sommaire Randonnée</TITLE>
<URL>/rando/rando.htm</URL>
</TOPIC>
</TOPICS>

<TOPICS TYPE="Aide">
<TOPIC>
<TITLE>A Propos de ce site</TITLE>
<URL>/support/about.htm</URL>
</TOPIC>
<TOPIC>
<TITLE>Nouveautés du site</TITLE>
<URL>/support/news.htm</URL>
</TOPIC>
<TOPIC>
<TITLE>Rechercher</TITLE>
<URL>/support/smsearch.htm</URL>
</TOPIC>
<TOPIC>
<TITLE>Ecrivez-moi</TITLE>
<URL>/support/feedback.htm</URL>
</TOPIC>
<TOPIC>
<TITLE>Signer le livre d'or</TITLE>
<URL>/support/livredor.htm</URL>
</TOPIC>
</TOPICS>
</TOPICLIST>
</XML>

</head>
<script LANGUAGE="JavaScript" for="window" event="onload">
var source = new ActiveXObject("Microsoft.xmldom");
source.load("menus.xml");
var style = new ActiveXObject("Microsoft.xmldom");
style.load("menus.xsl");
document.all.item("dataContainer").innerHTML = source.transformNode(style.documentElement);
</script>

Cet article vous a plu ? Dites-le moi.