compatibilité entre deux scripts
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 :
Code:
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> |
voici le script externe du menu déroulant
Code:
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)
//--> |
et le css externe du menu
Code:
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;
} |
