récupérer le champ d'un objet dans une balise IMG

**kersu** · 02/07/2013, 18h04

Bonjour,
Je dispose de 6 objets film et je souhaite remplir un tableau en montrant les 6 affiches de cinéma correspondantes. (Je souhaite normalement en afficher plus tard 480 et utiliser un .txt de data et faire un XMLHttpResquest)

voici le code :

Code html :

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

1
2
3
4
5
<HTML>
<HEAD>
<TITLE>Affiche un film</TITLE> 
 
<SCRIPT TYPE="text/javascript">

Code javascript :

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
function film(titre,annee,genre,lien,affiche)
{
	this.titre = titre;
	this.annee = annee;
	this.genre = genre;
	this.lien = lien;
	this.affiche = affiche;
}
 
var video = new Array();
 
video[0] = new film('4 minutes',2006,'drame','4 minutes.avi','images/4 minutes.jpg');
video[1] = new film('7 vies',2008,'drame','7 vies.avi','images/7 vies.jpg');
video[2] = new film('7h58 ce samedi là',2007,'drame','7h58 ce samedi la.avi','images/7h58 ce samedi là.jpg');
video[3] = new film('10,000 BC',2008,'aventure','10 000 BC.avi','images/10 000 BC.jpg');
video[4] = new film('11ème heure',2007,'documentaire','11e heure.avi','images/11ème heure.jpg');
video[5] = new film('11ème heure',2007,'documentaire','11e heure.avi','images/11ème heure.jpg');
 
function changeContenu() 
{
	document.write("<table>");
	for (i=0; i<6; i=i+3) 
	{
		document.write("<tr>");
		document.write("<td>");
		document.write("<img scr = "+video[i].affiche+"/>"; //marche pas
		document.write("</td>");
		document.write("<td>");
		document.write(video[i+1].affiche); //marque bien 10 000 BC.jpg par exemple
		document.write("</td>");
		document.write("<td>");
		document.write(video[i+2].affiche);
		document.write("</td>");
		document.write("</tr>");
	}
	document.write("</table>");
}

Code html :

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

1
2
3
4
5
6
</SCRIPT>
</HEAD>
<BODY onLoad = "changeContenu()">
<H1>1ere version de l'affichage d'un film</H1>
</BODY>
</HTML>

Comment peut on récupérer le champ d'un objet dans une balise IMG?
D'avance je vous remercie pour votre aide.

**NoSmoking** · 02/07/2013, 19h23

Bonjour,

document.write("<img scr = "+video[i].affiche+"/>"; //marche pas

il me semble qu'il manque une paranthése fermante.

En utilisant document.write tu t'exposes à de graves problème.

Comprendre document.write() en JavaScript

**SylvainPV** · 02/07/2013, 19h40

Bonjour,

Le problème est l'attribut de l'image: c'est "src" et non "scr".

Mais pour aller plus loin, je te propose quelques améliorations à ton code qui est quelque peu obsolète : tu peux oublier document.write, cette fonction est complètement désuette par rapport à ton besoin. De la même façon on n'utilise plus des tableaux pour la mise en page depuis des années, c'est très mal vu en web design.

Idéalement, je te conseillerais de t'intéresser au templating en Javascript, qui permet de générer facilement du HTML à partir d'objets Javascript, comme on pourrait le faire côté serveur en PHP ou JSP. Ce n'est peut-être pas le plus facile, mais comme j'aime à penser, autant faire les choses bien du premier coup.

La syntaxe la plus courramment utilisée en templating client est celle-ci : https://github.com/janl/mustache.js/
Voilà un exemple de ce que ça donnerait : http://jsfiddle.net/gxWCg/1/

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<H1>1ere version de l'affichage d'un film</H1>
<section id="films">
 
</section>
<script id="films-template" type="text/html">
 {{#videos}}
    <div class="film">
        <img src="{{affiche}}">
        <p class="title">{{titre}} ({{annee}})</p>
        <p class="genre">Genre: {{genre}}</p>
        <a href="{{lien}}">Voir bande-annonce</a>
    </div>
{{/videos}}    
</script>

Code js :

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
 
function renderTemplate(containerId, data){
    var container = document.getElementById(containerId);
    var template = document.getElementById(containerId+"-template");
    container.innerHTML =  Mustache.render(template.innerHTML, { videos: data });
}
 
function film(titre,annee,genre,lien,affiche)
{
	this.titre = titre;
	this.annee = annee;
	this.genre = genre;
	this.lien = lien;
	this.affiche = affiche;
}
 
var video = new Array(); 
    video[0] = new film('4 minutes',2006,'drame','4 minutes.avi','images/4 minutes.jpg');
    video[1] = new film('7 vies',2008,'drame','7 vies.avi','images/7 vies.jpg');
    video[2] = new film('7h58 ce samedi là',2007,'drame','7h58 ce samedi la.avi','images/7h58 ce samedi là.jpg');
    video[3] = new film('10,000 BC',2008,'aventure','10 000 BC.avi','images/10 000 BC.jpg');
    video[4] = new film('11ème heure',2007,'documentaire','11e heure.avi','images/11ème heure.jpg');
    video[5] = new film('11ème heure',2007,'documentaire','11e heure.avi','images/11ème heure.jpg');
 
    renderTemplate("films", video);

**kersu** · 02/07/2013, 20h08

Tout d’abord merci pour vos deux réponses.

SylvainPV, je vais regarder ce soir le templating, je ne connaissais pas. Au regard de l'exemple de ce que ça donnerait : http://jsfiddle.net/gxWCg/1/, je pense que cela va le faire.

A tout à l'heure.

**Bovino** · 03/07/2013, 08h10

Utiliser document.write() sur le onload du <body>, c'est vraiment moche...

Comprendre document.write() en JavaScript...

**kersu** · 03/07/2013, 15h28

Bonjour SylvainPV, depuis hier j'essaye de décortiquer ton code, mais je comprends pas pourquoi en local, j'ai comme erreur : "null" a la valeur Null ou n'est pas un objet.

Le 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
36
37
38
39
40
 
<HTML>
<HEAD>
<TITLE>Affiche un film</TITLE> 
 
<SCRIPT SRC="mustache.min.js"></SCRIPT>
 
//insertion class css
 
<SCRIPT TYPE="text/javascript">
 
 
function renderTemplate(containerId, data){
    var container = document.getElementById(containerId);
    var template = document.getElementById(containerId+"-template");
    container.innerHTML =  Mustache.render(template.innerHTML, { video : data });
}
 
function film(titre,annee,genre,lien,affiche)
{
	this.titre = titre;
	this.annee = annee;
	this.genre = genre;
	this.lien = lien;
	this.affiche = affiche;
}
 
var video = new Array(); 
    video[0] = new film('4 minutes',2006,'drame','4 minutes.avi','images/4 minutes.jpg');
    video[1] = new film('7 vies',2008,'drame','7 vies.avi','images/7 vies.jpg');
    video[2] = new film('7h58 ce samedi là',2007,'drame','7h58 ce samedi la.avi','images/7h58 ce samedi là.jpg');
    video[3] = new film('10,000 BC',2008,'aventure','10 000 BC.avi','images/10 000 BC.jpg');
    video[4] = new film('11ème heure',2007,'documentaire','11e heure.avi','images/11ème heure.jpg');
    video[5] = new film('11ème heure',2007,'documentaire','11e heure.avi','images/11ème heure.jpg');
 
    renderTemplate("films", video);
 
</SCRIPT>
 
</HEAD>

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
 
<BODY>
 
<H1>1ere version de l'affichage d'un film</H1>
<section id="films"></section>
<script id="films-template" type="text/html">
 {{#videos}}
    <div class="film">
        <img src="{{affiche}}">
        <p class="title">{{titre}} ({{annee}})</p>
        <p class="genre">Genre: {{genre}}</p>
        <a href="{{lien}}">Voir bande-annonce</a>
    </div>
{{/videos}}    
</script>
 
</BODY>
</HTML>

L'erreur pointe la ligne :

Code :

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

1
2
 
container.innerHTML =  Mustache.render(template.innerHTML, { video : data });

Mais je suppose que cela vient de la ligne :

Code :

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

1
2
 
var container = document.getElementById(containerId);

PS: j'ai bien la biblio mustache.min.js à la racine.
Je te remercie.

**Kaamo** · 03/07/2013, 15h46

Mustache n'est pas encore complètement chargé que tu tentes d'y accéder

**SylvainPV** · 03/07/2013, 16h10

Oui, garde les balises script des librairies dans le HEAD et mets tes propres scripts en fin du body, juste avant la balise de fermeture du </body>. Aussi n'hésite pas à mettre ton script dans un fichier externe, ce sera beaucoup plus clair.

**kersu** · 03/07/2013, 16h16

Merci

**kersu** · 07/07/2013, 12h17

Bonjour,

Je suis débutant. Je développe une petite application qui me permet de rechercher et de visualiser des divx (enregistrés à la télé et pour usage perso).

Grâce à votre aide, j'ai pu utiliser le template mustache et améliorer considérablement mon code (voir mon premier code au début du post).

Le bilan sur Firefox 7.0 est parfait. J'obtiens bien, dans une fenêtre défilante, toutes les affiches de mes divx, dans un tableau à 4 colonnes et quand je passe la souris dessus j'ai bien une information sur le divx et quand je clique dessus je peux lancer le divx.

Voici le 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
 
<HTML>
<HEAD>
<TITLE>Chercher et regarder un film</TITLE> 
<link href="film.css" rel="stylesheet" media="all" type="text/css">
 
</HEAD>
<BODY>
 
<div id="conteneur">
	<div id="hautpage">
		<div id="menu">
			<SCRIPT LANGUAGE="JavaScript" SRC="ejs_menu_dyn.js"></SCRIPT>	
		</div>
		<div id="smenu"></div>
	</div>
	<div id="page">
		<section id="films"></section>
		<script id="films-template" type="text/html">
		 {{#videos}}
			<div class="film">
				<a href="{{lien}}" class="tooltip"><img src="{{affiche}}"</a><em><b>Titre:</b> {{titre}}<br><b>Genre:</b> {{genre}}<br><b>Année:</b> {{annee}}</em></a>
			</div>
		{{/videos}}    
		</script>
	</div>
	<div id="finpage">bob l'éponge</div>
</div>
 
<SCRIPT SRC="mustache.js"></script>
<SCRIPT SRC="videotheque.js"></script>
 
</BODY>
</HTML>

Avant d'entamer le code pour faire du tri (afficher seulement le genre : comédie ou afficher seulement les divx dont l'année est entre 2000 et 2010 par exemple), je souhaiterai que cela marche aussi sur IE8. Là quand je lance avec IE8, je n'ai aucun affichage. Pouvez vous m'aider ?

J'ai parcouru le net, pour avoir des renseignement sur cette incomparabilité et même regarder dans un bouquin (ajax le guide complet) pris à la bibliothèque, je n'ai pas trouvé

.

Merci pour votre aide.
Je suis bien sûr à votre disposition pour d'éventuelles informations complémentaires.

**SylvainPV** · 07/07/2013, 13h11

Le premier réflexe lorsque l'on fait face à une incompatibilité IE8 est de regarder la console Javascript en quête de messages d'erreurs éventuelles ; cela peut donner directement quelle propriété Javascript ne fonctionne pas sur IE8, et permettre de trouver un équivalent ou un polyfill (librairie de complétion de support)

Deuxièmement, voici une collection de polyfills bien pratique : https://github.com/shawnbot/aight ; qui éliminent une bonne partie des incompatibilités CSS/JS dans IE8. Bien entendu, le mieux reste de mettre à jour son navigateur