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 : 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;
}
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
 
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+