Afficher page dans document.createElement('div')
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 :
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
|
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;
} |
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:
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";
} |
La page en question se situe ici.
Merci d'avance pour votre aide
A+
