/* -------------------------------------------------------- Menu horizontal a deroulement vertical (a un niveau) -------------------------------------------------------- Copyright 2002 GHS -------------------------------------------------------- 20021203 SB : Version 1.0 terminee -------------------------------------------------------- Ce script gere l'affichage d'un menu horizontal qui se deroule par roll sur les menus et qui ouvre des sous-menus. il permet de gerer l'emplacement des sous-menus, le roll de background pour le sous-menu, les styles CSS -------------------------------------------------------- Usage : - Charger de Javascript dans le HEAD - Creer le menu comme indique dans les parties suivantes (dans le HEAD ou dans le BODY mais avant le code HTML affichant le menu) - Appeler l'affichage d'un menu donne ou l'on veut dans le code -------------------------------------------------------- Fonctions creees : Menu(idMenu, classe, libelle) : constructeur du menu afficherMenu() : affiche le menu (pas le sous-menu) creerSSMenu(classe, width, height, background, backgroundRoll, pos_rel_top, pos_rel_left) : cree le sous-menu ajouterSSMenu(lien, libelle, classe) : ajoute une rubrique dans le sous-menu fermerSSMenu() : ferme le sous-menu ouvrirMenu(evnt) : ouvre le sous-menu fermerMenu(evnt) : ferme le menu changeBackground(objTD) : change l'image background d'une rubrique de sous-menu hideAll() : masque tous les sous-menus calculateSumOffset(offsetName) : calcule l'emplacement d'un sous-menu -------------------------------------------------------- Fonctions disponibles a l'usage : Menu(idMenu, classe, libelle) : constructeur du menu afficherMenu() : affiche le menu (pas le sous-menu creerSSMenu(classe, width, height, background, backgroundRoll, pos_rel_top, pos_rel_left) : cree le sous-menu ajouterSSMenu(lien, libelle, classe) : ajoute une rubrique dans le sous-menu fermerSSMenu() : ferme le sous-menu -------------------------------------------------------- Code en situation : -------------------------------------------------------- */ /**************************************************************************/ /* Objet general pour toutes les proprietes de la page */ /**************************************************************************/ var menu_a_fermer = new Object; function Menu(idMenu, type, libelle, lien, classe, imageRoll, width, heightTD) { this.idMenu = ((idMenu) ? idMenu : 'menu1'); this.type = ((type) ? type : ''); this.lien = ((lien) ? lien : 'javascript:void(0)'); this.classe = ((classe) ? classe : ''); this.imageRoll = ((imageRoll) ? imageRoll : ''); if (type == 'image') { if (this.imageRoll) { this.libelle = ''; } else { this.libelle = ''; } }else if (type == 'text'){ this.libelle = libelle; } this.width = ((width) ? width : ''); this.heightTD = ((heightTD) ? heightTD : ''); this.effets = ''; this.time = 0; this.lienTD = 1; this.police = ''; this.policeRoll = ''; this.bgColor = ''; this.bgColorRoll = ''; this.SSbgColor = ''; this.SSbgColorRoll = ''; this.bgNb = 0; this.bgSSNb = 0; this.policeNb = 0; this.bgImgNb = 0; this.bgImage = ''; this.bgImageRoll = ''; this.decalage_top = 0; this.decalage_left = 0; this.ss_decalage_top = 0; this.ss_decalage_left = 0; this.heightPremierMenu = 0; this.preMenu = new Array; this.preSSMenu = new Array; this.Rubrique= new Array; this.nbRubrique = 0; this.nbSSRubrique = 0; this.attendre = 0; this.SSClasse = ''; this.opacite = 100; } /**************************************************************************/ /* Methodes pour faire des roll sur des images */ /**************************************************************************/ function _roll_on(nom_image, source_nouv_image) { if (nom_image.src_nouv == null) { nom_image.src_nouv = new String; } var nom_image_temp = nom_image.src; nom_image.src = source_nouv_image; nom_image.src_nouv = nom_image_temp; return true; } function _roll_off(nom_image) { var nom_image_temp = nom_image.src; nom_image.src = nom_image.src_nouv; nom_image.src_nouv = nom_image_temp; return true; } /**************************************************************************/ /* Methodes de l'objet Menu pour ajouter des effets au menu */ /**************************************************************************/ Menu.prototype.ajouterEffet = function(effet) { this.effets = 'filter:progid:DXImageTransform.Microsoft.'+effet; } Menu.prototype.ajouterOpacite = function(opacite) { this.opacite = parseInt(opacite); } Menu.prototype.ajouterTimer = function(duree) { this.time = duree; } Menu.prototype.ajouterLienTD = function() { this.lienTD = 1; } Menu.prototype.supprimerLienTD = function() { this.lienTD = 0; } /**************************************************************************/ /* Methodes de l'objet Menu pour gérer le changement de background */ /**************************************************************************/ Menu.prototype.changerBgColor = function(couleur, couleurRoll) { this.bgColor = ((couleur) ? couleur : ''); this.bgColorRoll = ((couleurRoll) ? couleurRoll : ''); } Menu.prototype.changerSSBgColor = function(couleur, couleurRoll) { this.SSbgColor = ((couleur) ? couleur : ''); this.SSbgColorRoll = ((couleurRoll) ? couleurRoll : ''); } Menu.prototype._changeBgColor = function(objTD) { if (this.bgColorRoll) { objTD.style.backgroundColor = ((this.bgNb) ? this.bgColor : this.bgColorRoll); this.bgNb = 1 - this.bgNb; } return true; } Menu.prototype._changeSSBgColor = function(objTD) { objTD.style.backgroundColor = ((this.bgSSNb) ? this.SSbgColor : this.SSbgColorRoll); this.bgSSNb = 1 - this.bgSSNb; return true; } Menu.prototype.changerBgImage = function(image, imageRoll) { this.bgImage = ((image) ? image : ''); this.bgImageRoll = ((imageRoll) ? imageRoll : ''); } Menu.prototype._changeBgImage = function(objTD) { if (this.bgImageRoll) { objTD.style.backgroundImage = ((this.bgImgNb) ? 'url(\''+this.bgImage+'\')' : 'url(\''+this.bgImageRoll+'\')'); this.bgImgNb = 1 - this.bgImgNb; } return true; } Menu.prototype.changerSSClasse = function(classe) { this.SSClasse = ((classe) ? classe : this.classe); } Menu.prototype.changerClasse = function(classe) { this.classe = ((classe) ? classe : this.classe); } Menu.prototype._changeOpacite = function(objTD, opacite) { if (!document.all && document.getElementById) { objTD.style.MozOpacity = (opacite/100); } else if (document.all) { objTD.filters.alpha.opacity = opacite; } return true; } Menu.prototype.changerPolice = function(police, policeRoll) { this.police = ((police) ? police : ''); this.policeRoll = ((policeRoll) ? policeRoll : ''); } Menu.prototype._changePolice = function(lien) { if (this.police) { document.getElementById(lien).style.color = ((this.policeNb) ? this.police : this.policeRoll); this.policeNb = 1 - this.policeNb; } return true; } /**************************************************************************/ /* Methode de l'objet Menu pour calculer l'emplacement d'un sous-menu */ /**************************************************************************/ Menu.prototype._calculateSumOffset = function(offsetName) { var totalOffset = 0; var item = eval('document.getElementById(this.idMenu)'); do { totalOffset += eval('item.'+offsetName); item = eval('item.offsetParent'); } while (item != null); return totalOffset; } /**************************************************************************/ /* Methode de l'objet Menu pour décaler un sous-menu */ /**************************************************************************/ Menu.prototype.decalageMenu = function(decalage_top, decalage_left) { this.decalage_top = ((decalage_top) ? decalage_top : 0); this.decalage_left = ((decalage_left) ? decalage_left : 0); } Menu.prototype.decalageSSMenu = function(decalage_top, decalage_left) { this.ss_decalage_top = ((decalage_top) ? decalage_top : 0); this.ss_decalage_left = ((decalage_left) ? decalage_left : 0); } /**************************************************************************/ /* Methodes de l'objet Menu pour ajouter des fioritures au menu */ /**************************************************************************/ Menu.prototype.ajouterCadreMenu = function(lieu, srcImage, width, height, classe, colspan, align, valign, bgColor) { var preMenu = new Array; preMenu[0] = srcImage; preMenu[1] = width; preMenu[2] = height; preMenu[3] = classe; preMenu[4] = colspan; preMenu[5] = align; preMenu[6] = valign; preMenu[7] = bgColor; this.preMenu[lieu] = preMenu; this.heightPremierMenu = ((this.heightPremierMenu) ? this.heightPremierMenu : parseInt(height)); } Menu.prototype.supprimerCadreSSMenu = function(lieu) { var preSSMenu = new Array; preSSMenu[0] = 'delete'; this.preSSMenu[lieu] = preSSMenu; if (lieu == 1) { this.heightPremierMenu = 0; } } Menu.prototype.modifierCadreSSMenu = function(lieu, srcImage, width, height, classe, colspan, align, valign, bgColor) { var preSSMenu = new Array; preSSMenu[0] = srcImage; preSSMenu[1] = width; preSSMenu[2] = height; preSSMenu[3] = classe; preSSMenu[4] = colspan; preSSMenu[5] = align; preSSMenu[6] = valign; preSSMenu[7] = bgColor; this.preSSMenu[lieu] = preSSMenu; this.heightPremierMenu = ((this.heightPremierMenu && (lieu == 1)) ? this.heightPremierMenu : parseInt(height)); } /**************************************************************************/ /* Methode de l'objet Menu pour afficher un menu */ /**************************************************************************/ Menu.prototype.afficherMenu = function() { var str = '
'; str += ''; str += this.libelle+'
'; document.write(str); } /**************************************************************************/ /* Methode de l'objet Menu pour ajouter une rubrique ou ss-rubrique */ /**************************************************************************/ Menu.prototype.ajouterRubrique = function(type, libelle, lien, classe, imageRoll, texteAvant, texteApres, bgColor, height, bgImage) { var rubrique = new Array; rubrique[0] = 'ss_'+this.idMenu+this.nbRubrique; rubrique[1] = type; rubrique[2] = libelle; rubrique[3] = lien; rubrique[4] = classe; rubrique[5] = imageRoll; rubrique[6] = ((texteAvant && texteAvant.match('/')) ? '' : ''); rubrique[7] = texteApres; rubrique[8] = bgColor; rubrique[9] = height; rubrique[20] = bgImage; this.Rubrique[this.nbRubrique++] = rubrique; this.nbSSRubrique = 0; } Menu.prototype.ajouterSSRubrique = function(type, libelle, lien, classe, imageRoll, texteAvant, texteApres, bgColor) { var ss_rubrique = new Array; ss_rubrique[0] = 'ss_ss_'+this.idMenu+(this.nbRubrique-1)+this.nbSSRubrique; ss_rubrique[1] = type; ss_rubrique[2] = libelle; ss_rubrique[3] = lien; ss_rubrique[4] = classe; ss_rubrique[5] = imageRoll; ss_rubrique[6] = texteAvant; ss_rubrique[7] = texteApres; ss_rubrique[8] = bgColor; if (!this.Rubrique[this.nbRubrique-1][10]) { this.Rubrique[this.nbRubrique-1][10] = new Array; } this.Rubrique[this.nbRubrique-1][10][this.nbSSRubrique++] = ss_rubrique; } Menu.prototype.ajouterSeparation = function(height, bgImage) { var rubrique = new Array; rubrique[0] = 'ss_'+this.idMenu+this.nbRubrique; rubrique[1] = 'image'; rubrique[2] = ''; rubrique[9] = height; rubrique[20] = bgImage; this.Rubrique[this.nbRubrique++] = rubrique; this.nbSSRubrique = 0; } /**************************************************************************/ /* Methode de l'objet Menu pour fermer un menu ou ss-menu */ /**************************************************************************/ Menu.prototype._fermerMenu = function(evnt, timeout) { var fermer_menu = 0; if (timeout >= 1) { if (evnt.toElement && document.all && (!(evnt.toElement.id.match('ss_'+this.idMenu)))) { fermer_menu = 1; } else if (evnt.relatedTarget && !document.all && document.getElementById && (!(evnt.relatedTarget.id && evnt.relatedTarget.id.match('ss_menu')))) { if (typeof evnt.relatedTarget.id == 'string') { fermer_menu = 1; } if ((navigator.userAgent.indexOf("Gecko") != -1) && (parseInt(navigator.productSub) >= 20030312)) { fermer_menu = 1; } } if (fermer_menu) { this._fermerSSMenu(evnt, 1); if (this.time) { this.idTimeOut = setTimeout("_fermerMenuDefinitif()", this.time); this.attendre = 1; } else { _fermerMenuDefinitif(); } } } else { _fermerMenuDefinitif(); } return true; } Menu.prototype._fermerSSMenu = function(evnt, nbRubrique) { if (document.getElementById('ss_ss_'+this.idMenu+nbRubrique)) { if (evnt.toElement && document.all && !(evnt.toElement.id.match('ss_ss_'+this.idMenu+nbRubrique))) { document.getElementById('ss_ss_'+this.idMenu+nbRubrique).style.visibility = 'hidden'; } else if (evnt.relatedTarget && !document.all && document.getElementById && !(evnt.relatedTarget.id && evnt.relatedTarget.id.match('ss_ss_'+this.idMenu+nbRubrique))) { if (typeof evnt.relatedTarget.id == 'string') { document.getElementById('ss_ss_'+this.idMenu+nbRubrique).style.visibility = 'hidden'; } if ((navigator.userAgent.indexOf("Gecko") != -1) && (parseInt(navigator.productSub) >= 20030312)) { document.getElementById('ss_ss_'+this.idMenu+nbRubrique).style.visibility = 'hidden'; } } } return true; } function _fermerMenuDefinitif() { clearTimeout(menu_a_fermer.idTimeOut); if (menu_a_fermer.effets && (document.all && navigator.appVersion.indexOf("MSIE 6.0") > 0)) { document.getElementById('ss_'+menu_a_fermer.idMenu).filters[0].Apply(); document.getElementById('ss_'+menu_a_fermer.idMenu).style.visibility = 'hidden'; document.getElementById('ss_'+menu_a_fermer.idMenu).filters[0].Play(); } else { document.getElementById('ss_'+menu_a_fermer.idMenu).style.visibility = 'hidden'; } return false; } /**************************************************************************/ /* Methode de l'objet Menu pour ouvrir un menu ou ss-menu */ /**************************************************************************/ Menu.prototype._ouvrirMenu = function(evnt) { var faire_effet = 0; if (menu_a_fermer.idMenu) { menu_a_fermer.attendre = 0; menu_a_fermer._fermerMenu(evnt, 0); } document.getElementById('ss_'+this.idMenu).style.top = parseInt(this._calculateSumOffset('offsetTop')) + parseInt(this.decalage_top) + 'px'; document.getElementById('ss_'+this.idMenu).style.left = parseInt(this._calculateSumOffset('offsetLeft')) + parseInt(this.decalage_left) + 'px'; if (this.effets && (document.all) && (menu_a_fermer.idMenu != this.idMenu)) { if (navigator.appVersion.indexOf("MSIE 6.0") > 0) { faire_effet = 1; } else if (navigator.appVersion.indexOf("MSIE 5.0") > 0) { if (this.effets.match('Fade')) { faire_effet = 1; } } } if (faire_effet) { document.getElementById('ss_'+this.idMenu).filters[0].Apply(); document.getElementById('ss_'+this.idMenu).style.visibility = 'visible'; document.getElementById('ss_'+this.idMenu).filters[0].Play(); } else { document.getElementById('ss_'+this.idMenu).style.visibility = 'visible'; } menu_a_fermer = this; return true; } Menu.prototype._ouvrirSSMenu = function(nbRubrique) { if (this.attendre == 0) { var left = this._calculateSumOffset('offsetLeft') + this.width; var top = this._calculateSumOffset('offsetTop') + this.heightPremierMenu + (nbRubrique * this.heightTD); if (document.getElementById('ss_ss_'+this.idMenu+nbRubrique)) { document.getElementById('ss_ss_'+this.idMenu+nbRubrique).style.top = parseInt(top) + parseInt(this.ss_decalage_top) + parseInt(this.decalage_top) + 'px'; document.getElementById('ss_ss_'+this.idMenu+nbRubrique).style.left = parseInt(left) + parseInt(this.ss_decalage_left) + parseInt(this.decalage_left) + 'px'; document.getElementById('ss_ss_'+this.idMenu+nbRubrique).style.visibility = 'visible'; } } return true; } /**************************************************************************/ /* Methode de l'objet Menu pour fermer un menu ou ss-menu */ /**************************************************************************/ Menu.prototype.creerMenu = function() { var str = '
'; if (this.preMenu[1]) { str += ''; str += ''+''; if (this.preMenu[2]) { str += ''; } str += '' : '>'); } str += '
'; for (var i = 0; i < this.Rubrique.length; i++) { str += ''; str += ''; } if (this.preMenu[1]) { str += '
'; this.Rubrique[i][2] = lib_img; } if (this.Rubrique[i][3]) { str += ''+this.Rubrique[i][2]+''; } else if (this.Rubrique[i][1] != 'image') { str += ''+this.Rubrique[i][2]+''; } else { str += this.Rubrique[i][2]; } if (this.Rubrique[i][1] != 'image') { str += ((this.Rubrique[i][7]) ? this.Rubrique[i][7] : '  '); } str += '
'; if (this.preMenu[3]) { str += ''; } str += ''; } if (this.preMenu[4]) { str += ''; } str += '
'; for (var i = 0; i < this.Rubrique.length; i++) { if (this.Rubrique[i][10]) { str += "\n\n"+''; } } document.write(str); return false; }