image aléatoire avec légende dans fichier externe

Version imprimable

17/09/2007, 12h19
DC_44

image aléatoire avec légende dans fichier externe

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.:P
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... :cry:
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

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:

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];
}

17/09/2007, 12h46
DC_44

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
17/09/2007, 13h25
Bisûnûrs

Si bien sûr. Qu'est-ce qui t'en empêche ?
17/09/2007, 13h40
DC_44

Citation:

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 :roll:
Merci en tout cas pour la rapidité de la réponse.
David
17/09/2007, 13h43
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.
17/09/2007, 13h58
JulienC
Citation:

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:

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 :D
17/09/2007, 14h06
Bisûnûrs

Citation:

Envoyé par JulienC

Il pourrait faire un appel Ajax

AJAX sans langage serveur ? Faudra m'expliquer là.
17/09/2007, 14h08
JulienC

Citation:

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 ? :lol:
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.
17/09/2007, 14h10
DC_44

Citation:

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

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

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:

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

pas glop :cry:

Code:

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

glop glop !:king:
Maintenant je suis bien incapable de comprendre/expliquer pourquoi ni de dire si c'est mieux comme ça ;)
Mille mercis
David

17/09/2007, 16h09
DC_44

J'ai encore un souci :oops::
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
17/09/2007, 16h16
Bisûnûrs

Mets

Code:

window.onload = randomImg;

dans ton script.
17/09/2007, 16h21
DC_44

Citation:

Envoyé par Bisûnûrs

Mets

Code:

window.onload = randomImg;

dans ton script.

Bon sang mais c'est bien sûr !
Merci Bisûnûrs ! :king::king:
David
17/09/2007, 19h26
DC_44
Citation:
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:

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

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

Code:

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

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>

20/09/2007, 11h03
DC_44

Ok merci à tous pour vos réponse et votre réactivité, j'y suis arrivé.:lol:
A+
David