Bonjour,
Pour mon site web j'ai récupéré 2 scripts javascripts et je les ai adaptés.
Séparément ils fonctionnent sans problème mais ensemble il y a incompatibilité : les infobulles ne s'affichent pas.
Est-ce que quelqu'un pourrait m'aider à comprendre où se situe l'incompatibilité, je le remercie d'avance.
voici mon script :
voici le script externe du menu déroulant
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Info Bulle Javascript</title> <style type="text/css" media="all"> body { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:14px; } .infobulle{ position: absolute; visibility : hidden; border: 1px solid Black; padding: 10px; font-family: Verdana, Arial; font-size: 10px; background-color: #FFFFCC; } .aide { width:300px; background:red; font-size:20pt; } .aider { width:200px; background:blue; font-size:10pt; } </style> <script type="text/javascript" src="scripts/menu.js"></script> <link rel="stylesheet" type="text/css" href="style/menu.css"/> <script language="javascript" type="text/javascript"> <!-- function GetId(id) { return document.getElementById(id); } var i=false; // La variable i nous dit si la bulle est visible ou non function move(e) { if(i) { // Si la bulle est visible, on calcul en temps reel sa position ideale if (navigator.appName!="Microsoft Internet Explorer") { // Si on est pas sous IE GetId("curseur").style.left=e.pageX + 5+"px"; GetId("curseur").style.top=e.pageY + 10+"px"; } else { // Modif proposé par TeDeum, merci à lui if(document.documentElement.clientWidth>0) { GetId("curseur").style.left=20+event.x+document.documentElement.scrollLeft+"px"; GetId("curseur").style.top=10+event.y+document.documentElement.scrollTop+"px"; } else { GetId("curseur").style.left=20+event.x+document.body.scrollLeft+"px"; GetId("curseur").style.top=10+event.y+document.body.scrollTop+"px"; } } } } function montreinfobulle(text) { if(i==false) { GetId("curseur").style.visibility="visible"; // Si il est cacher (la verif n'est qu'une securité) on le rend visible. GetId("curseur").innerHTML = text; // Cette fonction est a améliorer, il parait qu'elle n'est pas valide (mais elle marche) i=true; } } function cacheinfobulle() { if(i==true) { GetId("curseur").style.visibility="hidden"; // Si la bulle etais visible on la cache i=false; } } document.onmousemove=move; // des que la souris bouge, on appelle la fonction move pour mettre a jour la position de la bulle. //--> </script> </head> <body> <div id="curseur" class="infobulle"></div> <!--menu deroulant --> <div id="ancre_menu"> <ul id="menu"> <li><a href="index.php?lien=1">accueil</a></li> <li><a href="index.php?lien=999">essai requêtes</a></li> <li><a href="index.php?lien=1">Inscription</a></li> <li><a href="index.php?lien=121">Galeries photos</a></li> <li>Box liens <ul> <li><a href="index.php?lien=24&admaction=creer">Creation box liens</a></li> <li><a href="index.php?lien=24&admaction=modifier">Modifier box liens</a></li> </ul> </li> </ul> </div> <!--infobulle--> <h1>Infobulle Javascript personnalisable</h1> <p><a href="#">Retour à l'article</a>.</p> <p><img src="supergeek-06293-cf35b.png" alt="Une image test" onmouseover="montreinfobulle('<div class=\'aide\'>SuperGeek revient</div><div class=\'aider\'>SuperGeek revient</div> !');" onmouseout="cacheinfobulle();" /> </p> </body> </html>
et le css externe du menu
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67 <!--// Michel Deboom février 2005, menu arborescent expansif sans image // paramétrage : idMenu = 'menu' idAncre = 'ancre_menu' // mettre 0 pour désactiver une option : mno = 1 // un seul sous-menu ouvert par niveau lien_ouvert = location // lien ouvert par défaut function initMenu(){ var pm;menuOuvert=[];// tableau des menus ouverts objMenu=document.getElementById(idMenu);objMenu.className='menu'; liste=objMenu.getElementsByTagName('li'); for(i=0;i<liste.length;i++){L=liste[i];lien=L.firstChild.href; if(lien){L.className="normal" // repère le lien de la page en cours if(lien == lien_ouvert){ pm=L.parentNode;L.firstChild.className="lien_page" } } //ajoute un titre cliquable if(L.getElementsByTagName('ul')[0]){ // sous-menu éxistant titre=L.firstChild.data;L.removeChild(L.firstChild); L.innerHTML='<a href="#"title="développer" onkeydown="af(this)" onmousedown="af(this,1);return false">'+titre+'<\/a>'+L.innerHTML; ef(L.firstChild) // réduit les sous_menus } } // montre le lien de la page et ouvre les menus parents gf=0;if(pm)while(pm.id!=idMenu && gf<30){af(pm.parentNode.firstChild);pm=pm.parentNode.parentNode} ancreMenu(); } function ancreMenu(){ // déplace le menu construit dans l'élément désigné. ancre=document.getElementById(idAncre); if(ancre){ancre.appendChild(objMenu);ancre.className='ancre_menu'} } function ef(el) { // réduit. with (el){ parentNode.getElementsByTagName('ul')[0].style.display="none"; title="développer";parentNode.className="reduit"; } return false } function af(el,mulot) { // développe un sous-menu . if(mulot)el.removeAttribute('href') // supprime le lien prévu pour la navigation clavier. with(el){sous_menu=parentNode.getElementsByTagName('ul')[0] if(sous_menu.style.display=="none"){ sous_menu.style.display="block";title="réduire";parentNode.className="ouvert"; } else {sous_menu.style.display="none";title="développer";parentNode.className="reduit";} } niveau=0; // un seul menu ouvert par niveau while(sous_menu.id!=idMenu&& niveau<30){niveau++;sous_menu=sous_menu.parentNode.parentNode} if(menuOuvert[niveau] && el!=menuOuvert[niveau] && mno)ef(menuOuvert[niveau]);menuOuvert[niveau]=el; } // Fonction pour ajouter ou enlever un événement sans écraser l'éxistant. function addEvent(obj,evType,fn,capt){ if(obj.addEventListener){obj.addEventListener(evType,fn,capt);return true;} // DOM 2 else if(obj.attachEvent)obj.attachEvent("on"+evType,fn) // IE 5+ else {return false;} } addEvent(window,"load",initMenu) //-->
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45 * élément contenant le menu */ .ancre_menu{width:100%;text-align:left;} /* style général des ul */ .menu,.menu ul{list-style-type:none;font-size: 10pt;} .menu ul{margin:0;padding:0} .menu{ text-align:left;margin:20px 0em 0 10px;color:#0066FF;font-size: 10pt;background-color:#ccc;width:97%;top:0;/*Gecko*/ padding:0px;border:0px solid #ccc; overflow:hidden;text-align:left;} /* liens du menu */ .menu .normal a{color:#0066FF;text-decoration:none;cursor:pointer;font-weight:normal;background: url(../images/bout1.gif) 0 0 no-repeat #ccc;padding:0 0 0 14px;margin:0;} .normal a:hover,.normal a:active,.normal a:focus,.lien_page:hover,.lien_page:active,.lien_page:focus{ color:red;background-color:#ccc;} /* lien qui correspond à la page en cours */ .lien_page{background-color:#ccc;} /* titres de liste */ .reduit,.ouvert{padding:0 0 0 14px;margin:0;} .reduit a,.ouvert a{text-decoration:none;color:#0066FF;overflow:hidden;} .ouvert a{cursor:default;} .reduit a{cursor:default;} /* ajout des images puces */ .ouvert{background: url(../images/bout2.gif) 0 0 no-repeat #ccc;font-weight:bold;} .reduit{background: url(../images/bout1.gif) 0 no-repeat;font-weight:normal;} .menu li a { display: block; } #menuar { text-align:center; margin:auto; background:#ccc; } ul#menu { text-align:left; } div#ancre_menu { text-align:left; }
Partager