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

Version imprimable

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:

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

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

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.

02/07/2013, 19h23
NoSmoking

Bonjour,

Citation:

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.
:fleche: Comprendre document.write() en JavaScript

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:

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:

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

02/07/2013, 20h08
kersu

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.
03/07/2013, 08h10
Bovino

Utiliser document.write() sur le onload du <body>, c'est vraiment moche...
:fleche: Comprendre document.write() en JavaScript...

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:

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:

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:

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

Mais je suppose que cela vient de la ligne :

Code:

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

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

03/07/2013, 15h46
Kaamo

Mustache n'est pas encore complètement chargé que tu tentes d'y accéder ;)
03/07/2013, 16h10
SylvainPV

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.
03/07/2013, 16h16
kersu

Merci :)

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:

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é :calim2:.

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

07/07/2013, 13h11
SylvainPV

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 :P
07/07/2013, 14h44
kersu

Encore merci SylvainPV pour ton appui. Je regarde cela. Je clôture ce post en marquant résolu et je remercie toute l'équipe de ce forum.
09/07/2013, 12h54
kersu

Pour info, (si plus tard d'autres ont ce problème)

J'ai remplacé :

Code:

<div section="films"></section>

par :

Code:

<div id="films"></div>

Le fait d'examiner l'outil de beug IE8, m'a bien aidé.