Bonjour à tous,
Voilà, j'ai un petit problème avec mon script. Je souhaite que lorsque l'utilisateur passe avec sa souris sur une zone de la page, une <div> (ou autre) soit affichée dynamiquement au dessus de la page, à une position fixe pour afficher à cet endroit le contenu d'une autre page (en php, lisant et mettant en forme des informations depuis une base de donnés MySQL).
Je suis arrivé à ceci :
Problème, lorsque j'essaye d'afficher autre chose qu'une image, (un <object type="text/html"> ou un <span>), celà ne marche pas : rien ne s'affiche lors du passage de la souris et la console javascript ne donne aucune erreur :
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 function GetDomOffset( Obj, Prop ) { var iVal = 0; while (Obj && Obj.tagName != 'body') { eval('iVal += Obj.' + Prop + ';'); Obj = Obj.offsetParent; } return iVal; } function dispActu(obj,text) { var objdiv = document.createElement('div'); objdiv.style.display='none'; objdiv.style.position='absolute'; objdiv.style.padding='1px'; objdiv.style.border='1px solid #000000'; objdiv.style.backgroundColor="#FFFFFF"; objdiv.style.color="#000000"; objdiv.innerHTML="Chargement en cours"; var actArea = document.createElement('img'); var x=GetDomOffset(document.getElementById('actus'), 'offsetTop') ; var y=GetDomOffset(document.getElementById('actus'), 'offsetLeft') ; objdiv.style.left= (y+130) + "px"; document.body.appendChild (objdiv); obj.onmouseout=function() {document.body.removeChild (objdiv);} actArea.onload=function() { objdiv.innerHTML=""; objdiv.appendChild(actArea); objdiv.style.top= (x+7) + "px"; objdiv.style.display='block'; } actArea.style.width='300px'; actArea.style.height='300px'; actArea.src=text; }
La page en question se situe ici.
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 function dispActu(obj,text) { var objdiv = document.createElement('div'); objdiv.style.display='block'; objdiv.style.position='absolute'; objdiv.style.padding='1px'; objdiv.style.border='1px solid #000000'; objdiv.style.backgroundColor="#FFFFFF"; objdiv.style.color="#000000"; objdiv.innerHTML="Chargement en cours !"; var actArea = document.createElement('object'); var x=GetDomOffset(document.getElementById('actus'), 'offsetTop') ; var y=GetDomOffset(document.getElementById('actus'), 'offsetLeft') ; objdiv.style.left= (y+130) + "px"; document.body.appendChild (objdiv); obj.onmouseout=function() {document.body.removeChild (objdiv);} actArea.onload=function() { objdiv.innerHTML=""; objdiv.appendChild(actArea); objdiv.style.top= (x+7) + "px"; objdiv.style.display='block'; } actArea.width='300px'; actArea.height='300px'; actArea.type="text/html"; actArea.data="news/news.php"; }
Merci d'avance pour votre aide
A+
Partager