Discussion :

[Delphi-ne]

J'ai créé un tableau et j'ai identifié une cellule en lui affectant un nom

Code :

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

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 :

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

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

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

Code :

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

alert(ID_1.width);

J'avoue que je ne comprends pas. Merci d'avance de votre conseil.

[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 html :

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

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

en javascript :

Code javascript :

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

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

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

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

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

j'obtiens une erreur de programme Argument non valide.

Avec

Code :

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

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

[freekind]

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

[freekind]

Correction: backgroundImage et non backgroundColor. Désolé!

[Auteur]

Avec

Code :

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

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 :

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

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

Javascript

Code :

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

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

Peux-tu poster une partie de ton code pour localiser l'erreur ?

[Delphi-ne]

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

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

[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()...

[Auteur]

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

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

Code :

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

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

correction :

Code :

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

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

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

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

[Delphi-ne]

Ca marche parfaitement
Merci beaucoup