Afficher un calque sur un tableau

Version imprimable

08/02/2007, 09h49
youcef81

Afficher un calque sur un tableau

Bonjour

j'ai une table (html) qui contient des information (des taches a faire , des dates, des personnes).
a un moment donné je veux dessiner sur cette table une sorte de calque d'une couleur clair avec opacité pour dire que ces taches sont desactivées,
et ecrire un mot sur ce calque.

Comment commencer ? j'ai pas d'idée encore. :aie:

merci.
08/02/2007, 10h02
Bisûnûrs

Tu peux changer la couleur de la ligne <tr> en la mettant en gris, par exemple, dans le cas où la tâche est désactivée.
08/02/2007, 10h19
youcef81

merci pour votre reponse
mais je veux afficher quelque chose qui apparait au dessus de ma table
c-a-dire ma table en arriere plan et la caluque en avant (le calque sera d'une couleur clair transparente)
je sais pas si je suis assez clair ?
08/02/2007, 10h37
youcef81

en d'autre terme je pense au superposion des caluques ou div avec possibilité de changer l'opacité des div.

quelqu' un a déja travaillé avec ça ? :roll:
08/02/2007, 10h45
Bisûnûrs

Tu peux regarder du côté des propriétés CSS :

Positionner un calque en superposition :
- position:absolute
- top:0
- left:0

Opacité (ne passe pas le validateur CSS) :
- opacity:0.5
- -moz-opacity:0.5
- -khtml-opacity:0.5
- filter:alpha(opacity=50)

merci
ça marche avec 'filter:alpha(opacity=50)'

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
 
<script type='text/javascript'>
function On ()
    {
        document.getElementById('div').style.filter = 'alpha(opacity=100)';
        }
 
        function Off ()
    {
        document.getElementById('div').style.filter = 'alpha(opacity=30)';
        }
</script>
<div id='div' style='background-color:#ffaa00;width:100px;height:100px;position:absolute'>
 
<table border='1' style='background-color:#ff00ff; position:absolute;z-index:1'>
    <tr>
      <td>Test</td>
	  <td>Test</td>
	</tr>
	<tr>
      <td>Test</td>
	  <td>Test</td>
    </tr>
 
</table>
</div>
<br><br><br><br><br><br>
<input type='button' onclick='On()' value='On'>
<input type='button' onclick='Off()' value='Off'>

voici un petit test, maintenant je veux ecrire un texte au milieu de div , au dessus du tableau quand il est desactivé, text =' La table est désactivé '

Comment specifier que le div est en avant plan et le tableau en arriere ?

1 pièce(s) jointe(s)

autre solution

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
 
<html>
<head>
<style>
body
{
        width:100%;
        height:100%;    
}
body,
#monconteneur,
#moncache
{
        margin:0;
        padding:0;
        border:0;
}
#monconteneur
{
        position:relative;
        width:400px;
}
#moncache
{
        position:absolute;
        background:url("toto.png");
        color:red;
        font:700 2em arial,serif;
}
</style>
<script>
function dimdemontable()
{
        document.getElementById("moncache").style.height = document.getElementById("monconteneur").scrollHeight+"px";
        document.getElementById("moncache").style.width = document.getElementById("monconteneur").scrollWidth+"px";
}
</script>
</head>
<body onload="dimdemontable()">
<div id="monconteneur">
	<div id="moncache">Y'a plus rien à voir ici</div>
	<table border="1" cellspacing="0" cellpadding="0">
		<tr>
			<td>tableau avec trucs dedans</td>
			<td>tableau avec trucs dedans</td>
			<td>tableau avec trucs dedans</td>
		</tr>
		<tr>
			<td>tableau avec trucs dedans</td>
			<td>tableau avec trucs dedans</td>
			<td>tableau avec trucs dedans</td>
		</tr>
		<tr>
			<td>tableau avec trucs dedans</td>
			<td>tableau avec trucs dedans</td>
			<td>tableau avec trucs dedans</td>
		</tr>
	</table>
</div>
</body>
</html>

toto.png a télécharger ici

09/02/2007, 10h54
youcef81

merci ! c'est ce que je cherchais