Se connecter / S'enregistrer

Résolu Javascript popup image avec legende de 'limage

Solutions (8)
Tags :
  • Popup
  • Javascript
  • Script
  • Programmation
|
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:
  1. function PopupImage(img,largeur,hauteur, description) {
  2. var titre="Mon titre"
  3. w=open("",'image','width=650,height=650,toolbar=no,scrollbars=no,resizable=yes');
  4. w.document.write("<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN'");
  5. w.document.write("'<a href="http://www.w3.org/TR/html4/loose.dtd" rel="nofollow" target="_blank">http://www.w3.org/TR/html4/loose.dtd</a>'>");
  6. w.document.write("<html><head><title>"+titre+"</title>");
  7. 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>");
  8. w.document.write("<style type='text/css'>");
  9. w.document.write("body {margin: 0px;}");
  10. w.document.write("</style></head>");
  11. w.document.write("<body onload='checksize()' onblur='window.close()' onclick='window.close()'>");
  12. w.document.write("<table style='width: 100%; height: 100%; vertical-align: middle; text-align: center;' border='0' cellspacing='0' cellpadding='0'><tr>");
  13. w.document.write("<td style='vertical-align: middle; text-align: center; '><img src='"+img+"' border='0' alt='' title='cliquez pour fermer la fenêtre.'>");
  14. w.document.write("<span style='font-weight: bold;'>"+description+"</span>");
  15. w.document.write("</td></tr></table></body></html>");
  16. w.document.close();
  17. }


et le code de ma page html:
  1. <a href="javascript:PopupImage('dossier/monImage.jpg','width','height','Ma legende')" ><img style="width: Xpx; height: Xpx;" alt="" src="dossier/monImage-miniature.jpg"></a>


Merci d'avance. :) 
Contenus similaires
Meilleure solution
partage
, Modérateur |
Ah oui, en effet, il semblerait que ça ne fonctionne pas quand on utilise l'attribut href, on va plutôt utiliser l'évènement onclick.
  1. <a href="javascript:void(0);" onclick="PopupImage('dossier/monImage.jpg','width','height', this)" title="Ma légende ici"><img style="width: Xpx; height: Xpx;" alt="" src="dossier/monImage-miniature.jpg"></a>


Ca devrait fonctionner.
  • Commenter cette solution |
Score
0
òh
òi
|
Meilleure réponse sélectionnée par Chris31300.
  • Commenter cette réponse |
Score
0
òh
òi
|
Rectificatif pour ceux qui chercheraient une réponse au même problème.
La bonne commande doit s'écrire ainsi:
  1. <a href="#" onclick="PopupImage('dossier/monImage.jpg','width','height', 'Ma légende ici');return false;"><img style="width: Xpx; height: Xpx;" alt="" src="dossier/monImage-miniature.jpg"></a>
  • Commenter cette réponse |
Score
0
òh
òi
|
Ça fonctionne impec. ;) 

Sinon, il y a aussi, sans modifier le fichier JS et en laissant la légende là où je l'avais mise au départ:

  1. <a href="#" onclick="PopupImage('dossier/monImage.jpg','width','height', 'Ma légende ici')"><img style="width: Xpx; height: Xpx;" alt="" src="dossier/monImage-miniature.jpg"></a>


Ça fonctionne aussi très bien, plus besoin de caractères d'échappement.

Merci à toi OmaR et à PetoleTeam du site javascriptfr ;) 
  • Commenter cette réponse |
Score
0
òh
òi
|
Merci beaucoup pour ta réponse.

Je viens d'essayer mais ma légende ne s'affiche pas, j'ai "undefined" à la place. :( 
  • Commenter cette réponse |
Score
0
òh
òi
, Modérateur |
Salut,

Ok, dans ce cas, avec quelque chose comme ça, ça doit pouvoir se faire:

  1. <a href="javascript:PopupImage('dossier/monImage.jpg','width','height', this)" title="Ma légende ici"><img style="width: Xpx; height: Xpx;" alt="" src="dossier/monImage-miniature.jpg"></a>


(le "this" sert à passer l'objet actuel (le lien <a>) à la fonction PopupImage)
Du coup, dans la fonction PopupImage, tu peux récupérer la valeur de l'attribute title de ton objet:

  1. function PopupImage(img,largeur,hauteur, link) {
  2. var titre="Mon titre";
  3. var description = link.title;
  4. ...
  5. }


Et ça devrait le faire.
  • Commenter cette réponse |
Score
0
òh
òi
|
Bonjour OmaR,

Merci bien pour ta réponse, ceci dit, même si beaucoup désapprouve l'utilisation de popup, pour l'instant ça me convient.
J'aimerais donc pouvoir conserver ce système (pour l'instant en tout cas).
As tu une solution pour placer ma légende ailleurs que là où je la place actuellement?

du genre par exemple:

  1. <a href="javascript:PopupImage('dossier/monImage.jpg','width','height')" title="Ma légende ici"><img style="width: Xpx; height: Xpx;" alt="" src="dossier/monImage-miniature.jpg"></a>


Merci d'avance.
  • Commenter cette réponse |
Score
0
òh
òi
, Modérateur |
Salut,

Les popup c'est vraiment pourri. La plupart des navigateurs vont te la bloquer, et tu peux difficilement faire ce que tu veux avec.

Le plus simple c'est d'utiliser une lightbox, tu peux prendre celle-ci par exemple:
http://www.huddletogether.com/projects/lightbox2/

Et elle a une feature pour facilement afficher une légende (entre autres).
(Clique sur la 2ème image de la catégorie "Simple Image" pour voir une légende)
  • Commenter cette réponse |

Ce n'est pas ce que vous cherchiez ?

Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS