[DOM] Ouvrir une image avec legende

Version imprimable

28/10/2007, 12h00
JeanMarc_T2k

[DOM] Ouvrir une image avec legende

Bonjour,
J'ai une série d'images sur une page. Lorsqu'on clique sur une de ces images, je veux ouvrir un popup, contenant l'image agrandie, et la légende de l'image.
Je sais ouvrir l'image, grâce au code ci-dessous :

Code:

window.open(nomagrandie,"PopUp","width=700,height=600,location=no,status=no,toolbar=no,scrollbars=no");

nomagrandie est l'url de l'image au format agrandi. Et ça fonctionne.
Mais je ne sais pas ajouter un texte contenant la légende de l'image.

Merci de votre aide
28/10/2007, 13h20
javatwister

il faut t'y prendre autrement, alors;

en visualisant l'image grande taille, tu n'ouvres pas vraiment une page html: le navigateur te permets simplement de visualiser ton image;

la solution est d'ouvrir une page "cadre" que tu crées auparavant et d'y insérer en plus de l'image le texte que tu veux;
attention aux problèmes d'accessibilité du corps du document pendant le chargement de la page;
28/10/2007, 15h09
JeanMarc_T2k

Oui, merci, j'y avais pensé !

Mais concrètement, comment s'y prend-on ?
J'aimerais avoir le code qui permet de le faire....
28/10/2007, 16h29
javatwister

concrètement, je te montrerais bien l'appli complète en marche mais elle contient des photos non montrables :roll:

dans l'ordre:
- prévois un tableau js contenant la légende de chaque image avec une correspondance d'indices entre Images[] et tab_legende[];

- quand tu cliques sur une des images, tu ouvres ta page bis et tu déclares une variable contenant l'adresse de l'image et une autre contenant la légende en rapport;
ces 2 parties du code sont écrites dans la page mère;

- dans la page fille, sur window.onload, tu testes si un opener existe et tu récupères les 2 variables, grâce auxquelles tu insères l'image et la légende voulues via les méthodes dom classiques dans ton squelette html;

Voici ce que j'ai fait :

J'ai créé une page appelée popup.html, dont le contenu est :
Code:

1 2 3 4 5 6 7 8 9 10 <html> <head> <title>Image agrandie</title> </head> <body> <a onClick="self.close();"><img id="ima" alt="image agrandie" src=""/></a> <center><div id="legende" name="legende">legende</div></center> </body> </html>
Ensuite, dans mon script javascript, j'ai les lignes suivantes :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 function fermer_image() { if (popup != null) { if (! popup.closed) popup.close(); }; } function ouvriragrandie(nombre){ zero= nombre<10 ? 0 : ""; nomagrandie="images/agrandie"+zero+nombre+".JPG"; fermer_image(); //popup=window.open(nomagrandie,"PopUp","width=700,height=600,location=no,status=no,toolbar=no,scrollbars=no"); popup=window.open("popup.html","PopUp","width=700,height=600,location=no,status=no,toolbar=no,scrollbars=no"); popup.document.getElementById("ima").src=nomagrandie; popup.document.getElementById("legende").innerHTML=tab[nombre-1].alt; }
Le reste du script est identique à celui décrit dans les sources javascript à cette adresse : http://javascript.developpez.com/sou...ges#defilimage

Le problème est le suivant :
1) lorsque je teste en local avec IE7, cela fonctionne sans problème !:D Mais le même code sur le serveur, me renvoie l'erreur suivante :

Citation:

'popup.document.getElementById(...)' a la valeur null ou n'est pas un objet

2) avec FF2 ça ne marche pas du tout : l'image ne se charge pas, et la légende non plus, sans le moindre message d'erreur.:?

Une idée de l'origine du problème ?