image aléatoire avec légende dans fichier externe

**DC_44** · 17/09/2007, 12h19

Bonjour,
utilisateur très occasionnel de javascript (non spécialiste, webmaster amateur, temps limité) je cherche à faire apparaitre à chaque chargement de la page d'accueil une image différente prise parmi une quinzaine de photos.
Jusque là pas de problème, les scripts abondent.

Mais je cherche à afficher en plus la légende et le nom de l'auteur de l'image.
Et là je sèche, je coince...

D'autant que l'idéal serait de piocher dans un fichier texte facile à modifier qui contiendrait :
nomdelimage1.jpg, legende1, auteur1,
nomdelimage2.jpg, legende2, auteur2,
nomdelimage3.jpg, legende3, auteur3,
etc.

question 1 : est-ce que javascript peut le faire ? (oui je sais php le fait mais j'ai pas accès à du php)
question 2 : si oui, comment faire ? :-)
merci de vos pistes, tuyaux etc.
David

**Bisûnûrs** · 17/09/2007, 12h25

Tu peux t'aider de ça :

http://developpez.net/forums/showthread.php?t=248686

Grâce à la méthode 2 modifiée comme tel :

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
 
function randomImg(){
   var tabImg = new Array();
   tabImg[0]  = "image1.gif";
   tabImg[1]  = "image2.jpg";
   tabImg[2]  = "soleil.gif";
   tabImg[3]  = "poisson.jpg";
   tabImg[4]  = "neuneu.png";
 
   var tabLegend = new Array();
   tabLegend[0]  = "Description 1";
   tabLegend[1]  = "Description 2";
   tabLegend[2]  = "Description 3";
   tabLegend[3]  = "Description 4";
   tabLegend[4]  = "Description 5";
 
   var tabAuteur = new Array();
   tabAuteur[0]  = "Auteur 1";
   tabAuteur[1]  = "Auteur 2";
   tabAuteur[2]  = "Auteur 3";
   tabAuteur[3]  = "Auteur 4";
   tabAuteur[4]  = "Auteur 5";
 
   var n = Math.round(Math.random()*4);
 
   document.getElementById('image').src += tabImg[n];
   document.getElementById('legend').innerHTML = tabLegend[n];
   document.getElementById('auteur').innerHTML = tabAuteur[n];
}

**DC_44** · 17/09/2007, 12h46

Ok, cela résoud mon problème d'association de l'image à l'auteur et à sa légende, un grand merci.
Pas moyen de mettre le tableau en fichier externe ?
David

**Bisûnûrs** · 17/09/2007, 13h25

Si bien sûr. Qu'est-ce qui t'en empêche ?

**DC_44** · 17/09/2007, 13h40

Si bien sûr. Qu'est-ce qui t'en empêche ?

Je me suis mal exprimé.
Ce n'est pas moi qui saisit les références (nom du fichier, auteur, légende) et pour simplifier la mise à jour de l'ensemble, éviter les erreurs qui pourraient bousculer le code javascript, j'aimerais séparer le fichier javascript du fichier de données à appeler (donnees.txt par exemple) qui contiendrait le nom des images, des auteurs et des légendes.
Je ne sais pas si je suis vraiment plus clair

Merci en tout cas pour la rapidité de la réponse.
David

**Bisûnûrs** · 17/09/2007, 13h43

On ne peut malheureusement pas lire de fichier en Javascript qui permettrait de récupérer ces données. Dans ce cas-là il va falloir que tu passes par un langage serveur.

**JulienC** · 17/09/2007, 13h58

Envoyé par Bisûnûrs

On ne peut malheureusement pas lire de fichier en Javascript qui permettrait de récupérer ces données. Dans ce cas-là il va falloir que tu passes par un langage serveur.

Il pourrait faire un appel Ajax sur le fichier .txt hébergé sur son serveur. Le javascript le parse et y récupère les informations.
Pas besoin de langage serveur... mais de bonnes connaissances javascript... !

D'un autre coté, ce n'est pas la solution la plus simple et la plus fiable.
Le mieux serait de renseigner un tableau javascript dans un fichier externe (fichier au format .js), au format JSON, qui pourrait ressembler à cela :

Code :

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

1
2
3
4
5
 
var tabImage = {
'image1.gif': {'legende': 'Description 1', 'auteur': 'Auteur 1'},
'image2.gif': {'legende': 'Description 2', 'auteur': 'Auteur 2'}
};

(NB : pas de virgule à la dernière ligne de données !!!)

Ainsi, tu peux récupérer la légende et l'auteur avec les lignes :
tabImage['image1.gif'].legende
et
tabImage['image1.gif'].auteur

Avantage non négligable de cette solution : le fichier externe .js est mis en cache par le navigateur. S'il contient pas mal de donnée, ce sera toujours ca de moins à télécharger du serveur à chaque changement de page

**Bisûnûrs** · 17/09/2007, 14h06

Envoyé par JulienC

Il pourrait faire un appel Ajax

AJAX sans langage serveur ? Faudra m'expliquer là.

**JulienC** · 17/09/2007, 14h08

Envoyé par Bisûnûrs

AJAX sans langage serveur ? Faudra m'expliquer là.

Qu'est ce qui empêche le javascript d'appeler un fichier .txt ?

Bien entendu, tout le fichier .txt sera récupérer (il n'y a bien sûr aucun traitement). C'est pour cela que j'ai indiqué qu'il faudra par la suite le parser.

**DC_44** · 17/09/2007, 14h10

Il pourrait faire un appel Ajax sur le fichier .txt hébergé sur son serveur. Le javascript le parse et y récupère les informations.
Pas besoin de langage serveur... mais de bonnes connaissances javascript... !

C'est ce que j'avais subodoré en fouillant le net...
J'ai trouvé une librairie ajax qui a l'air capable de faire ce que je cherche:
http://www.dynamicdrive.com/dynamici...ajaxticker.htm
Je n'ai pas creusé davantage mais pensez-vous qu'on puisse l'adapter pour des images ?
Merci pour vos réponses
David

**DC_44** · 17/09/2007, 15h42

Envoyé par Bisûnûrs

Tu peux t'aider de ça :

http://developpez.net/forums/showthread.php?t=248686

Grâce à la méthode 2 modifiée comme tel :

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
 
function randomImg(){
   var tabImg = new Array();
   tabImg[0]  = "image1.gif";
   tabImg[1]  = "image2.jpg";
   tabImg[2]  = "soleil.gif";
   tabImg[3]  = "poisson.jpg";
   tabImg[4]  = "neuneu.png";
 
   var tabLegend = new Array();
   tabLegend[0]  = "Description 1";
   tabLegend[1]  = "Description 2";
   tabLegend[2]  = "Description 3";
   tabLegend[3]  = "Description 4";
   tabLegend[4]  = "Description 5";
 
   var tabAuteur = new Array();
   tabAuteur[0]  = "Auteur 1";
   tabAuteur[1]  = "Auteur 2";
   tabAuteur[2]  = "Auteur 3";
   tabAuteur[3]  = "Auteur 4";
   tabAuteur[4]  = "Auteur 5";
 
   var n = Math.round(Math.random()*4);
 
   document.getElementById('image').src += tabImg[n];
   document.getElementById('legend').innerHTML = tabLegend[n];
   document.getElementById('auteur').innerHTML = tabAuteur[n];
}

J'ai fait une page avec ton code (encore merci), ça marche pas si je laisse le + dans l'avant-avant-dernière ligne :

Code :

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

   document.getElementById('image').src += tabImg[n];

pas glop

Code :

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

   document.getElementById('image').src = tabImg[n];

glop glop !

Maintenant je suis bien incapable de comprendre/expliquer pourquoi ni de dire si c'est mieux comme ça

Mille mercis
David

**DC_44** · 17/09/2007, 16h09

J'ai encore un souci

:
en local, tout est ok. Mais mon javascript s'insère en fait dans une page dans un système de publication en ligne (CMS) sur lequel je n'ai pas la main, et je ne peux pas notamment insérer de onload après la balise body.
Du coup je coince : comment charger randomImg ?
merci encore de votre patience.
David

**Bisûnûrs** · 17/09/2007, 16h16

Mets

Code :

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

window.onload = randomImg;

dans ton script.

**DC_44** · 17/09/2007, 16h21

Envoyé par Bisûnûrs

Mets

Code :

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

window.onload = randomImg;

dans ton script.

Bon sang mais c'est bien sûr !
Merci Bisûnûrs !

David

**DC_44** · 17/09/2007, 19h26

Envoyé par JulienC

D'un autre coté, ce n'est pas la solution la plus simple et la plus fiable.
Le mieux serait de renseigner un tableau javascript dans un fichier externe (fichier au format .js), au format JSON, qui pourrait ressembler à cela :

Code :

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

1
2
3
4
5
 
var tabImage = {
'image1.gif': {'legende': 'Description 1', 'auteur': 'Auteur 1'},
'image2.gif': {'legende': 'Description 2', 'auteur': 'Auteur 2'}
};

(NB : pas de virgule à la dernière ligne de données !!!)

Ainsi, tu peux récupérer la légende et l'auteur avec les lignes :
tabImage['image1.gif'].legende
et
tabImage['image1.gif'].auteur

Avantage non négligable de cette solution : le fichier externe .js est mis en cache par le navigateur. S'il contient pas mal de donnée, ce sera toujours ca de moins à télécharger du serveur à chaque changement de page

Comment le premier code placé dans un fichier js va-t-il appeler le contenu du tableau lui même dans un js ?
Désolé, je me sens vraiment nouille...
Merci

**JulienC** · 18/09/2007, 09h41

Dans ton fichier HTML, tu peux faire appel à un fichier JS externe avec le code :

Code :

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

<script type="text/javascript" src="..."></script>

A partir de ce moment, le tableau sera connu et tu pourras le consulter normalement. Cela va donner :

Code :

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

1
2
3
4
5
6
7
 
<script type="text/javascript" src="nom_fichier.js"></script>
<script type="text/javascript">
window.onload = function() {
   // Le code permettant d'afficher une image aléatoire
}
</script>

**DC_44** · 20/09/2007, 11h03

Ok merci à tous pour vos réponse et votre réactivité, j'y suis arrivé.

A+
David

image aléatoire avec légende dans fichier externe

JavaScript

Discussions similaires

Partager

Partager