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

Version imprimable

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:

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:

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:

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 :lol:

petit exemple:

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
<!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>

22/01/2006, 20h41
frechy

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...

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

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
<!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>

23/01/2006, 01h15
frechy

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.
23/01/2006, 10h15
javatwister

je testerai le mien en mouseover ce soir :)

mis à jour à l'arrache:

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
<!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>

24/01/2006, 10h39
denisC

Citation:

Envoyé par javatwister

mis à jour à l'arrache:

Tiens, toi aussi t'es un adepte? cf http://www.la-rache.com/
24/01/2006, 11h05
frechy

Merci pour cette méthode à la rache, j'aime bien cette méthode aussi :lol: