Redimensionner une image pour servir de fond à un tableau

**matimat2k4** · 08/05/2008, 23h51

Bonjour,

Est-ce possible en javascript ?

http://www.developpez.net/forums/sho...d.php?t=544347

Merci d'avance !

**Sacha999** · 09/05/2008, 00h49

plutot en CSS peut-etre, j'ai pas testé

Code :

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

1
2
 
style="background-image: url('parchemin.png');background-position: 100% 100%; "

**matimat2k4** · 09/05/2008, 07h41

ben je vais tester dans l'autre post on m'avait dit que non...
par contre je mets cette ligne de commande dans la balise <table> ?

**Sacha999** · 09/05/2008, 10h46

oui

**matimat2k4** · 10/05/2008, 20h09

non ça ne marche pas...
une autre idée ?

**Sacha999** · 10/05/2008, 21h01

Ok, on va passer par du javascript, ce code fonctionne

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
<html>
<head>
<script language="javascript">
	function placerImageFond()
	{
		var _maTable = document.getElementById('maDivTable');
		var _maDivImage = document.getElementById('maDivImage');
 
		with(_maDivImage.style)
		{
			width = _maTable.offsetWidth;
			height = _maTable.offsetHeight;
			position = 'absolute';
			left = _maTable.offsetLeft;
			top = _maTable.offsetTop;
			zindex = 0;
		}
 
	}
</script>
</head>
<body bgcolor="blue" onload="placerImageFond()">
	<form name="profilage">
			<table id="maDivTable" style="width: 733px; height: 143px;z-index:1;position:absolute" border="1" cellpadding="2" cellspacing="2">
			  <tbody>
			    <tr>
			      <td style="text-align: center; vertical-align: middle;"><span style="color: white;">LUNDI</span></td>
			      <td style="text-align: center; vertical-align: middle; color: white;">MARDI</td>
			      <td style="text-align: center; vertical-align: middle; color: white;">MERCREDI</td>
			      <td style="text-align: center; vertical-align: middle; color: white;">JEUDI</td>
			      <td style="text-align: center; vertical-align: middle; color: white;">VENDREDI</td>
			    </tr>
			    <tr>
			      <td style="text-align: center; vertical-align: middle; color: white;">entrée1</td>
			      <td style="text-align: center; vertical-align: middle; color: white;">entrée2</td>
			      <td style="text-align: center; vertical-align: middle; color: white;">entrée3</td>
			      <td style="text-align: center; color: white;">entrée4</td>
			      <td style="text-align: center; vertical-align: middle; color: white;">entrée5</td>
			    </tr>
			    <tr>
			      <td style="text-align: center; vertical-align: middle; color: white;">plat1</td>
			      <td style="text-align: center; vertical-align: middle; color: white;">plat2</td>
			      <td style="text-align: center; vertical-align: middle; color: white;">plat3</td>
			      <td style="text-align: center; vertical-align: middle; color: white;">plat4</td>
			      <td style="text-align: center; vertical-align: middle; color: white;">plat5</td>
			    </tr>
			    <tr>
			      <td style="text-align: center; vertical-align: middle; color: white;">dessert1</td>
			      <td style="text-align: center; vertical-align: middle; color: white;">dessert2</td>
			      <td style="text-align: center; vertical-align: middle; color: white;">dessert3</td>
			      <td style="text-align: center; vertical-align: middle; color: white;">dessert4</td>
			      <td style="text-align: center; vertical-align: middle; color: white;">dessert5</td>
			    </tr>
			  </tbody>
			</table>
 
		<div id="maDivImage"><img src="parchemin.png" width="100%" height="100%"></div>
	</form> 
</body>
</html>