Menu Contextuel : Surligner toute la ligne ?

**sachav** · 01/12/2007, 11h42

Bonjour,

Voici mon code HTML :

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
<script language="javascript">
var arg2=""
function showMenu() {
with(document.getElementById(arg2).style) {
visibility = "visible"
left = event.x+"px"
top = event.y+"px"
}
return false; 
}
function hideMenu() {
with(document.getElementById(arg2).style) {
visibility = "hidden" 
}
 
}
contextMenu = new Object()
contextMenu.applyStyle = function(arg1) {
with(document.getElementById(arg1).style) {
borderWidth = "2px"
borderStyle = "outset"
backgroundColor = "#D4D0C8"
fontFamily = "Tahoma"
fontSize = "8pt" 
visibility = "hidden"
position = "absolute"
}
arg2 = arg1
document.oncontextmenu = showMenu
document.onclick = hideMenu
}
contextMenu.newRow = function(nb, val, go2W) {
document.write("<span id=\"row"+nb+"\" onmouseover=\"this.style.backgroundColor='#0A246A'; this.style.color='white'\" onmouseout=\"this.style.backgroundColor='#D4D0C8'; this.style.color='black'\" onclick='location.href=\""+go2W+"\"'>"+val+"</span><br>")
}
contextMenu.initialize = function (nm) {
document.write('<span id="'+nm+'">') }
contextMenu.end = function () {
document.write("</span>")
}
</script>
<body onload="contextMenu.applyStyle('context1')">
<script language="javascript">
contextMenu.initialize("context1")
contextMenu.newRow(1,"Hi1fggggg", "http://www.google.com")
contextMenu.newRow(2,"Hi2")
contextMenu.newRow(3,"Hi3")
contextMenu.end()
</script>
</body>

Mon probleme est que, quand vous cliquez droit sur la page, le menu s'affiche, mais si vous passez la souris sur le premier objet, la ligne devient bleue, mais si vous passez sur le deuxieme, seulement le texte devient bleu.
Y'a-t-il une solution pour surligner toute la ligne? Merci

P.S. : J'ai deja essaye de mettre un tableau, le probleme est qu'il m'affiche une ligne en trop.

**SpaceFrog** · 01/12/2007, 16h36

ben déja ton script ne fait absolument rien chez moi ..
page blanche !

Et puis document.write

**jln13** · 01/12/2007, 19h34

salut,

je vais répondre a tes deux posts en meme temps ^^

Pour surligner la ligne tu dois créer un tableau comme dans le post que tu avais mis juste avant (http://www.developpez.net/forums/sho...d.php?t=451966). Par contre tu avais une ligne blanche en trop du au fait que tu ne mettais pas de <td> dans tes <tr>.
En effet dans le cas ou tu n'utilise pas de tableau tu ne met la couleur d'arrière plan que sur le span et donc le texte.. et non la ligne.

De plus ton code ne fonctionne que sous IE et non sur firefox. C'était en partie du au fait que tu utilisais l'évènement event qui ne marche pas sous firefox. Il semble y avoir d'autres problèmes pour le faire marcher sous FF mais bon je ne me suis pas attelé a corriger ca..

Donc finalement (et pour revenir a ton problème) pour surligner ta ligne il fallait utiliser background et non backgroundColor. Ca marche sous IE chez moi comme ca en tous cas ...

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
 
<html>
<head>
	<style>
		.ligneOver {
			background-color: #00ff00;
			color: #ffffff;
		}
		.ligneOut {
			background-color: #ff0000;
			color: #000000;
		}
	</style>
	<script type="text/javascript">
		var arg2="";
 
		function showMenu(e) {
			if (window.event) {e=event;} // IE
			with(document.getElementById(arg2).style) {
				visibility = "visible";
				left = e.x+"px";
				top = e.y+"px";
			}
			return false; 
		}
		function hideMenu() {
			with(document.getElementById(arg2).style) {
				visibility = "hidden";
			}
		}
		contextMenu = new Object();
 
		contextMenu.applyStyle = function(arg1) {
			with(document.getElementById(arg1).style) {
				borderWidth = "2px";
				borderStyle = "outset";
				backgroundColor = "#D4D0C8";
				fontFamily = "Tahoma";
				fontSize = "8pt" ;
				visibility = "hidden";
				position = "absolute";
			}
			arg2 = arg1;
			document.oncontextmenu = showMenu;
			document.onclick = hideMenu;
		}
 
		contextMenu.newRow = function(nb, val) {
			document.write("<tr class=\"ligneOut\" onmouseover=\"this.style.background='00FF00';\" onmouseout=\"this.style.background='FF0000';\"><td><span id=\"row"+nb+"\" >"+val+"</span></td></tr>");
		}
 
		contextMenu.initialize = function (nm) {
			document.write('<span id="'+nm+'"><table>');
		}
 
		contextMenu.end = function () {
			document.write("</table></span>");
		}
	</script>
</head>
<body onload="contextMenu.applyStyle('context1')">
	<script type="text/javascript">
		contextMenu.initialize("context1");
		contextMenu.newRow(1,"Hi1dejdoejdeoij");
		contextMenu.newRow(2,"Hi2");
		contextMenu.newRow(3,"Hi3");
		contextMenu.end();
	</script>
</body>
</html>

Menu Contextuel : Surligner toute la ligne ?

JavaScript

Discussions similaires

Partager

Partager