Mettre une légende sous une image dans une popup

Signaler
Messages postés
36
Date d'inscription
lundi 29 mars 2010
Statut
Membre
Dernière intervention
5 novembre 2011
-
Messages postés
36
Date d'inscription
lundi 29 mars 2010
Statut
Membre
Dernière intervention
5 novembre 2011
-
Bonjour,
J'utilise un script pour ouvrir une image en taille réelle dans une popup en cliquant sur une miniature.
J'aimerais qu'une légende puisse être placée sous l"image dans cette popup.
Malgré plusieurs recherches je ne trouve rien de concluant.

La seule chose que j'ai réussie à faire fonctionner m'oblige à mettre des caractères d'échappement sur la légende pour que ma page reste conforme au w3c, ce qui, vous en conviendrez n'est pas très agréable à réaliser lorsque la légende est longue. o_O
De plus les caractères d'échappement ne s'affichent pas tous de la même manière avec tous les navigateurs (j'ai des carré à la place des accents sous safari)

Quelqu'un pourrait il m'aider s'il vous plait?

Voici mon script:
function PopupImage(img,largeur,hauteur, description) {
var titre="Mon titre"
w=open("",'image','width=650,height=650,toolbar=no,scrollbars=no,resizable=yes');
w.document.write("<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN'");
w.document.write("'http://www.w3.org/TR/html4/loose.dtd'>");
w.document.write("<html><head><title>"+titre+"</title>");
w.document.write("<script language='javascript' type='text/javascript'>function checksize() { if (document.images[0].complete) { window.resizeTo(document.images[0].width+15,document.images[0].height+80); window.focus();} else { setTimeout('checksize()',250) } }</"+"script>");
w.document.write("<style type='text/css'>");
w.document.write("body {margin: 0px;}");
w.document.write("</style></head>");
w.document.write("");
w.document.write("\");
w.document.write(\"");
w.document.write(""+description");
w.document.write("
</html>");
w.document.close();
}



et le code de ma page html:
[javascript:PopupImage('dossier/monImage.jpg','width','height','Ma legende') ]


Merci d'avance. :)

Veuillez m'excuser si ma demande n'est pas posée au bon endroit, je ne sais pas ou la poser.

20 réponses

Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
16
Bonjour,
on repére déjà une erreur
w.document.write("" +description +"");
et non
w.document.write("" +description");
ensuite les problèmes d'accent se résolvent en utilisant une balise META, par exemple
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
et en utilisant les entitées html, é pour é par exemple


;O)
Messages postés
36
Date d'inscription
lundi 29 mars 2010
Statut
Membre
Dernière intervention
5 novembre 2011

Oups désolée pour l'erreur de code, c'est en inscrivant la code que je l'ai faire.
C'est bien "+description+" que j'ai dans mon script.

Concernant les charset, j'ai déjà testé bien sûr(en utf-8 et en iso-8859-1)
aussi bien dans la balise meta Content-Script-Type que dans la balise meta Content-Type et ça ne fonctionne pas.
Les entités dans une balise url (a href) ne s'écrivant pas en ascci (é pour é) mais en utf-8 (%E9 ou %C3%A9 pour é)
Ça fonctionne d'ailleurs très bien sous tous les navigateurs sauf sous safari qui me place des carrés à la place des caractères accentués et hors mis ce détail (qui n'est pas sans importance) je trouve ça un peu long d'écrire des légendes de cette façon.
(aucun espace n'est autorisé, aucune apostrophe, aucun accent, aucun caractère spécial ...)

Aucune solution à ma question?
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
16
aucune raison si il y a le bon charset déclaré, voir du coté des préférences encodage par défaut de SAFARI...

;O)
Messages postés
36
Date d'inscription
lundi 29 mars 2010
Statut
Membre
Dernière intervention
5 novembre 2011

Oui enfin, je teste mon site sur plusieurs navigateurs et safari n'est pas celui que j'utilise par défaut ...
Ceci dit ma question initiale n'était pas de savoir pourquoi safari ne lisait pas les caractères d'échappement correctement mais plutôt s'il y avait une autre méthode pour afficher une légende sous mes images dans cette popup.

Dans le style par exemple:
[javascript:PopupImage('dossier/monImage.jpg','width','height') ]

Ce qui me permettrais de ne plus écrire mes légendes avec ces fameux échappements.

Comment modifier mon script dans ce sens?
Merci d'avance.
Messages postés
36
Date d'inscription
lundi 29 mars 2010
Statut
Membre
Dernière intervention
5 novembre 2011

Up
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
16
- Si tu ne veux pas taper les entités HTML, pourtant bien plus portable et recommandé, il te suffit de mettre un charset acceptant les accents et autres dans le document de base, ta page HTML donc et dans la fenêtre popup.
dans ton cas <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">, je pense qu'il doit bien exister des outils qui se charge de cette conversion.
- Concernant l'affichage d'une légende sous ton image, qu'est ce qui ne te convient pas, la TABLE, le passage du paramètre ???

;O)
Messages postés
36
Date d'inscription
lundi 29 mars 2010
Statut
Membre
Dernière intervention
5 novembre 2011

Bonjour et merci pour ta réponse.

Concernant les charset, comme dis plus haut, j'ai déjà essayé.
Ça fonctionne sans problème sous IE, FireFox, Opéra, Seamonkey, K-meleon mais sous Safari qui me mes des carrés à la place des accents.

Ce qui ne me convient pas c'est d'avoir à écrire mes légendes ainsi:
Voici%20la%20l%C3%A9gende%20de%20cette%20image pour Voici la légende de cette image
parce que cette légende se trouve ici dans la balise:
[javascript:PopupImage('dossier/monImage.jpg','width','height','Ma legende') 

et que le w3c me demande de fermer les entités (] escaping malformed URI reference).

En mettant ma légende ici, dans une balise title="":


Je n'aurais pas ce problème.

N'y a t il vraiment aucune solution pour modifier le script en ce sens?
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
16
quel DOCTYPE utilises tu ?
;O)
Messages postés
36
Date d'inscription
lundi 29 mars 2010
Statut
Membre
Dernière intervention
5 novembre 2011

Le même dans ma page principale et dans le fichier JS

page principale:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">


fichier JS
w.document.write("<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN'");
w.document.write("'http://www.w3.org/TR/html4/loose.dtd'>");
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
16
je crois que je viens de percuter,
essaies cette formulation
[# ]

;O)
Messages postés
36
Date d'inscription
lundi 29 mars 2010
Statut
Membre
Dernière intervention
5 novembre 2011

Ohh grand merci à toi, ça fonctionne impec.
Merci beaucoup.

Me permet tu d'abuser de tes compétences et de ta gentillesse pour te demander autre chose?

Dans mon script j'ai rajouter une ligne permettant à la popup de se centrer sur ma page.

function PopupImage(img,largeur,hauteur, description) {
var titre="Mon titre"
w=open("",'image','width=1,height=1,toolbar=no,scrollbars=no,resizable=yes');
w.document.write("<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN'");
w.document.write("'http://www.w3.org/TR/html4/loose.dtd'>");
w.document.write("<html><head><title>"+titre+"</title>");
w.document.write("<script language='javascript' type='text/javascript'>function checksize() { if (document.images[0].complete) { window.resizeTo(document.images[0].width+15,document.images[0].height+100); moveTo( ( screen.width-document.images[0].width)/2 , ( screen.height-document.images[0].height)/2); window.focus();} else { setTimeout('checksize()',250) } }</"+"script>");


au lieu de:

function PopupImage(img,largeur,hauteur, description) {
var titre="Mon titre"
w=open("",'image','width=650,height=650,toolbar=no,scrollbars=no,resizable=yes');
w.document.write("<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN'");
w.document.write("'http://www.w3.org/TR/html4/loose.dtd'>");
w.document.write("<html><head><title>"+titre+"</title>");
w.document.write("<script language='javascript' type='text/javascript'>function checksize() { if (document.images[0].complete) { window.resizeTo(document.images[0].width+15,document.images[0].height+80); window.focus();} else { setTimeout('checksize()',250) } }</"+"script>");


Ça fonctionne bien mais elle se charge d'abord dans le coin supérieur gauche et se centre après seulement.
Comment faire pour qu'elle se centre dès le départ?
Qu'elle s'ouvre déjà centrer.

Merci encore à toi, tu m'as lever une épine du pied.
Messages postés
36
Date d'inscription
lundi 29 mars 2010
Statut
Membre
Dernière intervention
5 novembre 2011

Edit:

Non, le code que j'ai modifié (post si dessus) pour centrer la popup n'est pas si adapté que ça finalement, il centre bien la popup même s'il le fait seulement après le chargement, mais il la centre toujours au même endroit.
Ce qui fait que si le visiteur est sur les photos du milieu ou du bas de page, il doit scroller sans arrêt pour redescendre voir le reste des photos parce que ça le fait remonter.

Quelle poisse!
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
16
dans ce cas une façon de procéder pourait être la suivante :
ouvrir la fenêtre centrée avec une largeur de 100 x 100 par exemple et la redimensionner et la recentrer, l'effet sera peut être plus soft...

;O)
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
16
on a oublié de mettre un return(false) dans la fonction PopupImage et de modifier le lien comme suit
[# ]

;O)
Messages postés
36
Date d'inscription
lundi 29 mars 2010
Statut
Membre
Dernière intervention
5 novembre 2011

Ben en fait que la popup soit renseignée à 1 de large et de haut, à 100 ou à 600 ne change rien.
Elle s'ouvre dans le coin supérieur haut/gauche puis une fois chargée se centre (au lieu de le faire avant le chargement), mais ce n'est pas ce qui est le plus génant.
Le plus génant c'est que j'ai l'impression qu'elle ne le fait pas en fonction de où se trouve le visiteurs sur ma page.
C'est à dire, que si ma page contient plus de 40 images, sur plusieurs lignes, ça n'aura pas de conséquence sur les premières lignes mais sur celles du bas de page, le visiteur se retrouve systématiquement au début de la page une fois la popup chargée et centrée. (un peu comme s'il y avait un #top)
Du coup il doit redescendre pour continuer de visualiser le reste des images.
Je voudrais quelque chose qui permet à la popup de se centrer mais en conservant la position du visiteur sur la page. (je ne sais pas si mes explications sont très claires )

Concernant ton deuxième message, le return(false) manquant est pour la légende?
Parce que ça fonctionne très bien là ... sans erreur de script et sur tous les navigateurs.
Ceci dit, si je dois tout de même l'ajouter, où dois je le mettre s'il te plait?

Merci encore pour ton aide précieuse.
Messages postés
36
Date d'inscription
lundi 29 mars 2010
Statut
Membre
Dernière intervention
5 novembre 2011

En fait, je crois que c'est le a href="#" qui fait remonter la page lorsque la popup est chargée.
Le return(false) réglerait ce souci?
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
16
Bonjour,
il y a eu croisement des messages apparemment...
...revenons sur le point le plus important le scroll de la page principale
effectivement le return( false) règle le problème attendu qu'il n'autorise pas le HREF.
La mise en oeuvre est simple, ajoutes le en fin de fonction PopupImage, cela donne cela
//-------------------------------------------------------
function PopupImage( img, largeur, hauteur, description){
  var titre = "Mon titre";
  // ...
  // le reste de ta fonction
  // ...
  return( false); // pour annuler le onclick sur le lien
}// fin de function

ensuite comme je te l'ai indiqué ci dessus sur l'événement onclick du lien il faut retourner false pour annuler l'effet du click sur le lien, le tour est joué le document ne scrollera plus vers le haut.

concernant le centrage de la fenêtre il faut modifier la partie script de l'ouverture pour affecter les positions et les dimensions.
Sur cette ligne...
w=open("",'image','width=650,height=650,toolbar=no,scrollbars=no,resizable=yes');

... tu ne précises pas la position d'où elle se positionne en 0.
Il existe les paramètres left et top pour placer une fenêtre.

Je te mets un lien, window.open, ou tu devrais tout trouver sur les paramétrages des fenêtres, un peu long mais très instructif.
;O)
Messages postés
36
Date d'inscription
lundi 29 mars 2010
Statut
Membre
Dernière intervention
5 novembre 2011

J'ai résolu mon souci de centrage:

function PopupImage(img,largeur,hauteur, description) {
var titre="Mon titre"
var top=(screen.height-hauteur)/2;
var left=(screen.width-largeur)/2; 
w=open("",'image','top='+top+', left='+left+',width=850,height=650,toolbar=no,scrollbars=no,resizable=yes');


Concernant le returm=false

J'avais fait ça (sans toucher au fichier js):
[# ">]

Et ça fonctionne très bien.
Est ce que c'est correct?

En tout cas, merci beaucoup pour ta patience et ton aide PetoleTeam
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
16
Est ce que c'est correct?
pas de problème cela reviens au même...
bonne continuation...
;O)
Messages postés
36
Date d'inscription
lundi 29 mars 2010
Statut
Membre
Dernière intervention
5 novembre 2011

Merci à toi