Forum d'entraide PHPFrance

J'appel une fonction pour créer une fenetre popup avec une image agrandie (zoom). Le paramètre de la fonction est le chemin vers cette image sur mon serveur. Hors je souhaite ajouter un 2e paramètre, un titre pour la fenêtre surgissante entre les balise <TITLE> et </TITLE> mais je n'y arrive pas. Si je met 'titre' il m'affiche le mot "titre" dans la fenetre popup ! Je ne connais pas trop le javascript et je pense que c'est simplement un problème de syntaxe

Code : Tout sélectionner

<a href="javascript:;" onclick="afficheMaxi('../softwares/images/monimage_big.gif', 'MonTitre')">

Voici ma fonction (dans un fichier .js) :

function afficheMaxi(chemin, titre)
    {
 
    i1 = new Image();
    i1.src = chemin;
 
    html = '<HTML><HEAD><TITLE> titre </TITLE></HEAD><BODY LEFTMARGIN=0 MARGINWIDTH=0 TOPMARGIN=5 MARGINHEIGHT=0 body bgcolor="white"><CENTER><A HREF="#"><IMG SRC="'+chemin+'" HSPACE=0 VSPACE=0 BORDER=0 NAME=imageTest onLoad="window.resizeTo(document.imageTest.width+24,document.imageTest.height+60)\" onclick=\"javascript:window.opener.focus();window.close()\"></A></CENTER></BODY></HTML>';
    popupImage = window.open('','_blank','toolbar=0,directories=0,status=0,location=0,menubar=0,resizable=auto,scrollbars=auto,width=500, height=375, left=250, top=125');
    popupImage.document.open();
    popupImage.document.write(html);
    popupImage.document.close()
    
    }

Merci de votre aide

M. DUBOIS

Salut,
déjà, même pour un pop-up, tu peux faire un code html propre, conforme et même valide.

Voilà ton code remis en forme et plus lisible avec quelques corrections, j'ai même carrément mis le pop-up en XHTML :

function afficheMaxi(chemin, titre)
{
    i1 = new Image();
    i1.src = chemin;
    html  = '<?xml version="1.0" encoding="iso-8859-1" ?>\n';
    html += '<!DOCTYPE html PUBLIC "-\/\/W3C\/\/DTD XHTML 1.0 Strict\/\/EN" "http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-strict.dtd">\n';
    html += '<html xmlns="http:\/\/www.w3.org\/1999\/xhtml" xml:lang="fr" lang="fr">\n';
    html += '<head>\n';
    html += '<meta http-equiv="Content-Type" content="text\/html; charset=iso-8859-1" xml:lang="fr" \/>\n';
    html += '<title>'+ titre +'<\/title>\n';
    html += '<meta http-equiv="Content-language" content="FR-fr" xml:lang="fr" dir="ltr" \/>\n';
    html += '<style type="text\/css">\n';
    html += '\/* <![CDATA[ *\/\n';
    html += 'body {\n';
    html += '    text-align: center;\n';
    html += '}\n';
    html += '\/* ]]> *\/\n';
    html += '<\/style>\n';
    html += '<\/head>\n';
    html += '<body onload="window.document.resizeto(document.imagetest.width+24,document.getElementById(\'imagetest\').height+60)">\n';
    html += '<a href="#"><img src="'+ chemin +'" hspace="0" vspace="0" border="0" id="imagetest" onclick="window.opener.focus();window.close();" alt="" \/><\/a>\n';
    html += '<\/body>\n';
    html += '<\/html>\n';
    popupImage = window.open('', '_blank', 'toolbar=0, directories=0, status=0, location=0, menubar=0, resizable=auto, scrollbars=auto, width=500, height=375, left=250, top=125');
    popupImage.document.open();
    popupImage.document.write(html);
    popupImage.document.close()
}

À noter : l'évènement onload ne peut pas être dans une autre balise que <body>, donc je l'ai déplacée et j'ai modifié la manière de pointer sur l'image en modifiant également au passage l'attribut name de la balise img en attribut id.

Teste déjà comme ça en envoyant un chemin et un titre en paramètre de ton appel de fonction.

Génial ! merci pour cet excellent code.

La fenetre Popup es trop grande par rapport à l'image. J'aimerais qu'elle se redimentionne auto en fonction de la taille de l'image...

J'ai remarqué que le curseur sur l'image ne se transforme en main que lorsqu'il passe sur l'image. Mais si la fenetre s'affiche a l'endroit du curseur, alors seul le curseur normal est visible ! il faut alors sortir de l'image et repasser dessus pour qu'il s'active !
Ya t-il une solution ?

Merci,

M. DUBOIS

Forum d'entraide PHPFrance

Comment ajouter un paramètre à une Fonction Javascript ?

Comment ajouter un paramètre à une Fonction Javascript ?