[DOM] Ouvrir une image avec legende

**JeanMarc_T2k** · 28/10/2007, 12h00

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 :

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

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

**javatwister** · 28/10/2007, 13h20

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;

**JeanMarc_T2k** · 28/10/2007, 15h09

Oui, merci, j'y avais pensé !

Mais concrètement, comment s'y prend-on ?
J'aimerais avoir le code qui permet de le faire....

**javatwister** · 28/10/2007, 16h29

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

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;

**JeanMarc_T2k** · 29/10/2007, 17h11

Voici ce que j'ai fait :

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

Code :

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

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 :

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

Mais le même code sur le serveur, me renvoie l'erreur suivante :

'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 ?