[DOM] Changement dynamique de l'image de fond d'une balise <TD>

Version imprimable

03/02/2007, 11h08
Delphi-ne

[DOM] Changement dynamique de l'image de fond d'une balise <TD>
J'ai créé un tableau et j'ai identifié une cellule en lui affectant un nom
Code:

1 2 3 4 <TD Width = '10%' Align = 'Center' ID = 'ID_1' BackGround = '../Images/Onglet_Actif.bmp'>
Je voudrais pouvoir par programme modifier l'image de fond.
J'ai donc écrit

Code:

ID_1.style.backgroundImage = '../Images/Onglet_Inactif.bmp';

Mais j'obtiens une erreur sur objet inconnu
Pourtant cette ligne marche bien

Code:

alert(ID_1.width);

J'avoue que je ne comprends pas. Merci d'avance de votre conseil.
03/02/2007, 11h40
Auteur
bonjour,

dans un premier temps, je te déconseille d'utiliser des images bmp dans ton site web (elles sont trop lourdes à charger). Préfère les jpg, les gif ou les png. Il existe des petits programmes qui permettent les conversions d'un format à l'autre.

Pour ton problème : prends l'habitude d'écrire en minuscules les balises et les attributs, utilise les feuilles de style pour la présentation des éléments.
Le tout s'écrit sur une ligne.
Code:

1 2 <td style="width:10%; text-align: center; background-image: url('../Images/Onglet_Actif.jpg')" id="id_1">
en javascript :
Code:

1 2 document.getElementById("id_1").style.backgroundImage="../Images/Onglet_Inactif.jpg"
Le javascript est sensible à la casse. Pour cibler un élément utiliser document.getElementById().
03/02/2007, 13h46
Delphi-ne

Je sais que Javascript est sensible à la casse mais c'est vrai que je conserve l'habitude du Pascal de préfixer dès que que le peux les mots réservés par des majuscules.
Mon problème n'est pas vraiment là

Si j'écris

Code:

document.getElementById("id_1").style.backgroundImage="../Images/Onglet_Inactif.jpg"

j'obtiens une erreur de programme Argument non valide.

Avec

Code:

background-image: url('../Images/Onglet_Actif.jpg')"

L'image ne s'affiche plus.
J'en étais resté à background-image au niveau des CSS et background au niveau de la balise TD
03/02/2007, 14h03
freekind

Citation:

Je sais que Javascript est sensible à la casse mais c'est vrai que je conserve l'habitude du Pascal de préfixer dès que que le peux les mots réservés par des majuscules.

Le HTML n'a pourtant rien à voir avec Pascal/Delphi... Deux langages totalements distincts; deux ensembles de normes et standards distincts! Mais bon, c'est toi qui sait. ;)

La propriété <document.getElementById(id).style.backgroundColor> est bel et bien celle qu'il faut utiliser pour attribuer une nouvelle image de fond à ton objet. Ton erreur se trouve probablement ailleurs, autour de ce bout de code. Erreur de parsing peut-être, ou encore erreur de déclaration de l'ID...

Si tu as laissé ton id équivalent à 'ID_1' comme ton exemple initial, et que tu tentes d'attribuer un background à 'id_1', ça ne fonctionnera pas (case sensitive...)
03/02/2007, 14h04
freekind

Correction: backgroundImage et non backgroundColor. Désolé! :?
03/02/2007, 15h39
Auteur
Citation:

Envoyé par Delphi-ne

Avec

Code:

background-image: url('../Images/Onglet_Actif.jpg')"

L'image ne s'affiche plus.

attention dans ta CSS tu as un " à la fin en trop ;)

Comme freekind, je pense qu'il y a une erreur dans ton script. Pour les styles, tu remarqueras que la syntaxe CSS est différente de la syntaxe Javascript.
CSS
Code:

1 2 3 4 .monStyle{ background-image: url("image.jpg"); }
Javascript
Code:

1 2 getElementById("id_1").style.backgroundImage="image.jpg";
Peux-tu poster une partie de ton code pour localiser l'erreur ?

Je dois être un peu limité aujourd'hui
Voici mon code

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
<html>
	<head>
		<script language="JavaScript">
			function TRT_AfficheListe(pID){
				alert(id_1.width);
				getElementById(id_1).style.backgroundImage = ""
			}
		</script>
	</head>
 
	<body>
		<table	width = '90%'
			align = 'center'>
			<tr>
				<td width	= '50%'
				    align	= 'center'
				    id		= 'id_1'
				    background	= '../Images/Onglet_Inactif.bmp'>
					<a href	   = '#'
					   onclick = 'TRT_AfficheListe()'>
					   Accueil
					</a>
				</td>
				<td width	= '50%'
				    align	= 'Center'
				    background	= '../Images/Onglet_Inactif.bmp'>
					<a href	   = '#'
					   onclick = 'TRT_AfficheListe()'>
					   Test
					</a>
				</td>
			</tr>
		</table>
	</body>
</html>

J'affiche bien le message concernant le width
La ligne suivante plante.
Je pense pourtant bien avoir respecté les instructions de vos messages

03/02/2007, 16h07
freekind

Trois erreurs:

- Tu ne passes aucun argument à ta fonction TRT_AfficheListe();
- id_1 est considéré comme une variable quand tu le passes à la méthode getElementById() et non comme une chaîne référant à un ID de ton objet DOM

- tu appelles seulement getElementById(), sans savoir de quelle classe d'objets la méthode provient. Il faut plutôt utiliser document.getElementById()...

Citation:

Envoyé par freekind

- tu appelles seulement getElementById(), sans savoir de quelle classe d'objets la méthode provient.

C'est de ma faute :oops: :aie: Je lui ai fourni le code erroné. J'ajouterai aussi une quatrième erreur, mais là aussi c'est de ma faute :oops:

Citation:

Envoyé par Auteur

Code:

1
2
 
getElementById("id_1").style.backgroundImage="image.jpg";

correction :

Code:

1
2
 
document.getElementById("id_1").style.backgroundImage="url('image.jpg')";

------------------------------------
donc voici le code corrigé (et testé) ;)

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
 
<html>
	<head>
		<script type="text/javascript">
		<!--
			function TRT_AfficheListe()
            {
                //declaration d'une variable element qui contiendra l'objet retourne par
                //document.getElementById()
		var element = document.getElementById("id_1");
                element.style.backgroundImage = "url('image2.jpg')";
 
 
                //autre syntaxe possible :
                //document.getElementById("id_1").style.backgroundImage = "url('image1.jpg')";
			}
		//-->
		</script>
	</head>
 
	<body>
		<table style="width: 90%; text-align: center">
			<tr>
				<td style="width: 50%; text-align: center; background-image: url('image1.jpg')" id="id_1">
					<a href='#' onclick="TRT_AfficheListe()">Accueil</a>
				</td>
				<td style="width: 50%; text-align: center; background-image: url('image1.jpg')">
					<a href="#" onclick="TRT_AfficheListe()">Test</a>
				</td>
			</tr>
		</table>
	</body>
</html>

03/02/2007, 19h40
Delphi-ne

Ca marche parfaitement
Merci beaucoup