images dans tableau

**mathier** · 18/05/2012, 15h20

bonjour
j'aimerais simplement savoir si on peut mettre des images .jpg dans un tableau .

Code :

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

1
2
 
var t =new array (image1.jpg,image2.jpg,...);

le but étant ensuite de mélanger les images etc ...

merci

**NoSmoking** · 18/05/2012, 15h32

Bonjour,
la réponse est OUI sauf qu'il s'agit de chaines de caractères donc

Code :

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

var t = ['image1.jpg', 'image2.jpg', '...'];

[] est une autre façon de déclarer les ARRAY

**mathier** · 18/05/2012, 16h02

merci
je vais tester tout ça maintenant

**mathier** · 18/05/2012, 21h51

bonsoir
finalement je suis un peu embêté pour manipuler tout ça

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
 
<!DOCTYPE html>
<html lang="fr">
	<head>
	<meta charset="utf-8"/>
	<title> essai </title>
	</head>
 
	<body>
	<p>Affichage de 10 cartes</p>
	<script type="text/javascript">
		var t =new array ('carte0.jpg','carte1.jpg','carte2.jpg','carte3.jpg','carte4.jpg','carte5.jpg','carte6.jpg','carte7.jpg','carte8.jpg','carte9.jpg');
		for (var i=0;i<t.length;i++){
		<img id="image" src="t[i]"/> 
		}
	</script>
	</body>
 
</html>

voilà mon code mais mes images ne s'affiche pas , je pensais que le code passé dans les balises script allait être lu un peu comme du html et que les balises <img> allaient afficher mes images

merci

**NoSmoking** · 18/05/2012, 22h34

je pensais que le code passé dans les balises script allait être lu un peu comme du html et que les balises <img> allaient afficher mes images

il faut se méfier des aprioris et les bases du langages sont quand même nécessaire.

Je te vois plonger sur un document.write du plus mauvais effet, donc avant de l'utiliser OUBLIES tout de suite pour prendre de "bonnes" habitudes.

Pour créer un élément on utilise la méthode createElement de l'objet document

exemple :

Code :

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

1
2
var oImage = document.createElement('IMG'); // creation d'une IMG
var oDiv = document.createElement('DIV'); // creation d'une DIV

etc pour tous les éléments ou presque.

Une fois crées il faut ajouter ces éléments au document, pour cela la méthode habituelle et de récupérer l'élément destination, le conteneur final en somme, et d'utiliser la méthode appendChild pour ajouter cet élément au conteneur.

La récupération de la référence à un élément ce fait via la méthode getElementById de l'objet document, pour peut que l'élément possède une ID bien sûr.

Voila pour la théorie simplifiée, maintenant la pratique sur base de ton 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
var t = ['carte0.jpg', 'carte1.jpg', 'carte2.jpg', 'carte3.jpg', 'carte4.jpg', 'carte5.jpg', 'carte6.jpg', 'carte7.jpg', 'carte8.jpg', 'carte9.jpg'];
// variable utilises
var oImage, oDest, i, nb = t.length;
// recuperation du conteneur
oDest = document.getElementById('zone_image');
for( i = 0; i < nb; i++){
  // creation de l'element image
  oImage = document.createElement('IMG');
  // affectation du nom de l'image
  oImage.src = t[i];
  // ajout d'un ID pour recuperation ulterieure
  oImage.id = 'image' +i;
  // ajout au conteneur
  oDest.appendChild( oImage);
}

au final ton code donne ce qui suit

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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>essai</title>
</head>
<body>
<p>Affichage de 10 cartes</p>
<div id="zone_image"></div>
<script type="text/javascript">
var t = ['carte0.jpg', 'carte1.jpg', 'carte2.jpg', 'carte3.jpg', 'carte4.jpg', 'carte5.jpg', 'carte6.jpg', 'carte7.jpg', 'carte8.jpg', 'carte9.jpg'];
// variable utilises
var oImage, oDest, i, nb = t.length,  ;
// recuperation du conteneur
oDest = document.getElementById('zone_image');
for( i = 0; i < nb; i++){
  // creation de l'element image
  oImage = document.createElement('IMG');
  // affectation du nom de l'image
  oImage.src = t[i];
  // ajout d'un ID pour recuperation ulterieure
  oImage.id = 'image' +i;
  // ajout au conteneur
  oDest.appendChild( oImage);
}
</script>
</body>
</html>

Tu noteras que le code javascript vient APRES que le DOM soit effectif, la DIV zone_image est déclarée avant appel à la méthode getElementById, afin de ne pas générer d'erreur.

Voila n'hésites pas à lire les cours et à feuilleter la faq.

**mathier** · 19/05/2012, 08h54

merci pour toutes ces explications détaillées.

je vais analyser tout ce que tu m'as dit , appris même .

je connaissais les méthodes que tu as utilisées mais c'est en les voyant appliquées sur un cas concret que l'on se rend compte des façons de les utiliser.

merci

images dans tableau

JavaScript

Discussions similaires

Partager

Partager