Afficher un cadre(avec texte) à coté de la souris

**frechy** · 22/01/2006, 19h26

Bonjour,

Voici ce que je souhaiterais faire:

J'ai un gros tableau (200 cases). Je voudrais qu'un cadre s'affiche à coté du curseur indiquant quelle ligne/colonne correspond à la position du curseur.

J'ai trouvé un code que j'ai adapté. Ce code fonctionne parfaitement mais est assez lent et utilise vite 100% du cpu si le curseur bouge rapidement.

J'apelle en fait une fonction javascript sur le onmouseover des td, et j'apelle une autre fonction qui efface ce cadre lors du onMouseOut.

Voici le code du tableau:

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
<? 
$ligne=1;
$col=1;
?>
<table align="center" bgcolor="#CCCCCC" cellpadding="0" cellspacing="0">
<? while($ligne<=10){ ?>
  <tr>
  	<? while($col<=20){ ?>
    <td onmouseover="rollOn(<? echo $ligne; ?>,<? echo $col; ?>)" onMouseOut="rollOut()" onclick="Reserv(<? echo $ligne; ?>,<? echo $col; ?>)"></td>
	<? $col++; } ?>
  </tr>
<? $ligne++; 
$col = 1;
} ?>
</table>

Les fonctions javascripts:

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
var brWidth = 0, xCoord, yCoord;
if (typeof(window.innerWidth)=='number') { 
	brWidth = window.innerWidth;
} 
else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
	brWidth = document.documentElement.clientWidth;
} 
 
function rollOn(l,c) {
 
	icon = document.getElementById('tooltip');
 
	icon.innerHTML = "Ligne: "+l+"<br \>Colonne: "+c;
 
	icon.style.position='absolute';
	if (xCoord <= (brWidth-200)) { 
		icon.style.left = xCoord + 5 + "px";
	} else { 
		icon.style.left = xCoord - 205 + "px";
	}
	icon.style.top = yCoord+5+"px";
	icon.style.visibility = 'visible';
}
 
function rollOut() {
		icon = document.getElementById('tooltip');
		icon.style.visibility='hidden';
}
 
function checkwhere(e) {
	if (document.all) {
		xCoord = event.clientX+document.documentElement.scrollLeft;
		yCoord = event.clientY+document.documentElement.scrollTop;
	}
	else if (document.getElementById) {
		xCoord = e.clientX+document.documentElement.scrollLeft;
		yCoord = e.clientY+document.documentElement.scrollTop;
	}
}
 
document.onmousemove = checkwhere;
if(document.captureEvents) {document.captureEvents(Event.MOUSEMOVE);}
 
 
function Reserv(l,c) {
var adr="reserv.php?l="+l+"&c="+c;
window.location.replace(adr);
}

Et la feuille de style (du bloc affiché)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.tooltip {
	BORDER-RIGHT: #000000 1px solid; PADDING-RIGHT: 4px; BORDER-TOP: #000000 1px solid; PADDING-LEFT: 4px; FONT-WEIGHT: bold; FONT-SIZE: 0.8em; FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/drapsurv.gif",sizingMethod="scale"); VISIBILITY: hidden; PADDING-BOTTOM: 0px; BORDER-LEFT: #000000 1px solid; height:80px; WIDTH: 200px; COLOR: #000000; PADDING-TOP: 0px; BORDER-BOTTOM: #000000 1px solid; POSITION: absolute
}

Il y a une image de fond dans ce cadre, mais ce n'est pas celà qui fait ralentir.

Je pense qu'il faudrait un code qui affiche un cadre en suivant la souris si celle-ci est dans le tableau et actualise le contenu du cadre en fonction de la cellule survolée...

Si vous connaissez un script qui fait ceci ou une facon d'optimiser le code plus haut, je suis preneur

**javatwister** · 22/01/2006, 20h07

petit exemple:

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"> 
<head> 
<title>...</title> 
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
 
<style type="text/css"> 
 
 
table{
margin:100px;
font-weight:bold;
border-collapse:collapse;
}
 
.cel {
width:50px;
height:50px;
border:solid 1px #000000;
}
 
</style> 
 
 
 
</head> 
 
<body> 
 
<div id="cadre"></div>
 
 
 
<script type="text/javascript"> 
 
var t=document.createElement("table");
var tb=document.createElement("tbody");
for(i=0; i != 100; i++){
	var l=document.createElement("tr");
	for(j=0; j != 10; j++){
		var c=document.createElement("td");
		var col="rgb("+ Math.floor(Math.random()*256) + ", " + Math.floor(Math.random()*256) + ", " + Math.floor(Math.random()*256) + ")";
		c.pos="ligne:" + (i+1) + "; colonne:" + (j+1);
		c.style.backgroundColor=col;
		c.className="cel";
		c.onmouseover=function(){
			this.title=this.pos
			}		
 
		l.appendChild(c);
	}
	tb.appendChild(l)
}
 
t.appendChild(tb);
document.getElementById("cadre").appendChild(t);
 
</script> 
 
 
</body> 
</html>

**frechy** · 22/01/2006, 20h41

Merci pour le code, je viens de tester, mais celà n'affiche que du texte, comme la balise alt d'une image.

C'est +- ce que je cherche sauf que je souhaite que le cadre qui affiche ce texte soit beaucoup plus rapide et si possible suive le curseur, sans "coupure" entre chaque cellule.

J'ai déjà vu ca sur un site mais je ne sais plus lequel...

**Linaa** · 22/01/2006, 23h31

Ptete le mien ?
En reprenant ce que t'as deja fait

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>infobulle...</title>
</head>
 
<body>
<script type="text/javascript">
 
var icon;
 
function rollOn(l,c) {
   icon = document.getElementById('tooltip');
   icon.innerHTML = 'Ligne:'+l+'<br \>Colonne:'+c;
   icon.style.position='absolute'; 
   icon.style.visibility = 'visible';
 
	if (navigator.appName != "Microsoft Internet Explorer") {
		document.captureEvents(Event.MOUSEMOVE);
	}
	document.onmousemove = go;
}
 
function go(e) {
	if (navigator.appName == 'Microsoft Internet Explorer') {
		icon.style.left = event.x+document.documentElement.scrollLeft+15+"px";
		icon.style.top = event.y+document.documentElement.scrollTop+15+"px";
	}
	else {
		icon.style.left = e.pageX +15+"px";
		icon.style.top = e.pageY+15+"px";
	}
}
 
function rollOut() {
      icon.style.visibility='hidden';
} 
 
</script>
<?
$ligne=1;
$col=1;
?>
<table align="center" bgcolor="#CCCCCC" cellpadding="0" cellspacing="0" border="1">
<? while($ligne<=10){ ?>
  <tr>
     <? while($col<=20){ ?>
    <td onmouseover="rollOn(<? echo $ligne; ?>,<? echo $col; ?>)" onmouseout="rollOut()" onclick="Reserv(<? echo $ligne; ?>,<? echo $col; ?>)">&nbsp;a&nbsp;<div id="tooltip" style="background-color:white; border:solid 1px #000000; visibility:hidden;"></div></td>
   <? $col++; } ?>
  </tr>
<? $ligne++;
$col = 1;
} ?>
</table>
 
</body>
 
</html>

**frechy** · 23/01/2006, 01h15

Ok merci c'est ce que je cherchais, ca prend encore tout le cpu, mais bon je ne pense pas qu'il soit possible de faire mieux vu que mon tableau de 200 cellules est assez petit en taille, et donc changement régulier de cellule.

**javatwister** · 23/01/2006, 10h15

je testerai le mien en mouseover ce soir

**javatwister** · 23/01/2006, 20h11

mis à jour à l'arrache:

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"> 
<head> 
<title>...</title> 
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
 
<style type="text/css"> 
 
table{
margin:100px;
font-weight:bold;
border-collapse:collapse;
}
 
.cel {
width:50px;
height:50px;
border:solid 1px #000000;
}
 
#tit {
position:absolute;
border:solid 1px #000000;
background-color:#ffffff;
display:none;
}
 
</style> 
 
</head> 
 
<body> 
 
<div id="cadre"></div>
 
<script type="text/javascript"> 
 
var tit=document.createElement("span");
tit.id="tit";
document.getElementById("cadre").appendChild(tit);
tit.appendChild(document.createTextNode("?"));
 
 
function mouve(e){
var outx= window.pageXOffset ? window.pageXOffset : (document.documentElement ? 
 
document.documentElement.scrollLeft : 0);
var outy= window.pageYOffset ? window.pageYOffset : (document.documentElement ? 
 
document.documentElement.scrollTop : 0);
 
 
if(e){e.stopPropagation()}
else{e=event;window.event.cancelBubble=true};
 
tit.style.left=e.clientX+outx+20+"px";
tit.style.top=e.clientY+outy+"px";
tit.firstChild.data=this.pos;
tit.style.display="inline";
}
 
 
var t=document.createElement("table");
var tb=document.createElement("tbody");
for(i=0; i != 100; i++){
	var l=document.createElement("tr");
	for(j=0; j != 10; j++){
		var c=document.createElement("td");
		var col="rgb("+ Math.floor(Math.random()*256) + ", " + Math.floor
 
(Math.random()*256) + ", " + Math.floor(Math.random()*256) + ")";
		c.pos="ligne:" + (i+1) + "; colonne:" + (j+1);
		c.style.backgroundColor=col;
		c.className="cel";
		c.onmouseover=mouve;
		c.onmouseout=function(){tit.style.display="none"};
 
		l.appendChild(c);
	}
	tb.appendChild(l)
}
 
t.appendChild(tb);
 
document.getElementById("cadre").appendChild(t);
 
 
</script> 
 
 
</body> 
</html>