[Résolu] Pop_up avec du texte et non de l'image.

Bonjour,
je réponds aux autres, mais ça fait 2 jours que je n'ai toujours pas déposé mon problème...
j'ai un document (texte) de 40 fiches à présenter. Je souhaite donc présenter chacune de ces fiches en pop-up, en partant d'une page html normale qui en sera le sommaire. J'ai donc utilisé le 3ème script "pop"-up" proposé sur les tutoriels.
Celui-ci est donné en exemple avec des images, mais il semble adaptable pour du texte : il est dit qu'on peut "changer le nom des documents" ou "ligne 23 remplacer par un autre type de document".
J'ai donc essayé de changer l'extension (.jpg à la place de .html, pour voir...) mais surtout, j'ai changé jpg / JPG par html dans le script (et non htm, sinon, mes pages de menus et liens du site s'ouvrent aussi dans la pop-up...).
Les documents appelés sont bien nommés aussi en .html, j'ai vérifié...
Problème : j'ai bien une pop-up qui monte, mais avec rien dedans, et son icône de fermeture qui se promène à côté (peut-être normal si la taille de la pop-up est en dessous d'une taille critique). Il semble qu'il y a toujours une ligne de code (dans le js) qui appelle une image, puisqu'un carré avec sa croix (image absente) s'affiche au début, lors du 1er chargement.
J'ai donc recherché, et mis en commentaire la ligne 41. Le JS ne fonctionne plus semble-t-il, et j'ai mon contenu de ma fiche (pop-up) qui s'affiche comme page suivante (ce qui prouve que l'appel par le lien est bon, et que ça peut fonctionner sans js...).
Si quelqu'un a une idée de solution ?
un lien pour visualiser :
http://www.macpom.ouvaton.org/essais/
Pour accéder au script, il s'appelle "boite.js", dans le dossier essais.
Modifié par Macpom (18 Oct 2005 - 09:54)

Bonjour, pourquoi n'as-tu pas essayé de me contacter ?

Le script proposé sert à placer une image dans un calque de la page, mais pour un fichier *.html comme tu le souhaites, ce n'est possible que dans une vrai pop-up, une frame,iframe ou balise objet.

Pour du texte (dans la page), j'ai un peu modifié le premier script proposé en infobulle toujours visible :
http://perso.wanadoo.fr/michel.deboom/moncastel/accessBul/bulle.htm
Si tu veux plus de détails, n'hésites pas.
Michel

Bonjour Michel, et désolé pour ma réponse tardive : j'alterne entre Bourges et Orléans, donc difficile de tout suivre...
Question 1 : l'idée ne m'en était tout simplement pas venue, et je n'avais pas fait le lien entre toi et ton pseudo !
réponse 2 : 40 pages (papier) en title pour des infobulles risquent de me faire un document trop lourd... Je vais donc en passer par les pop-up traditionnelles... en essaynat de faire au mieux, pour l'accessibilité et la fonctionalité... (j'aimais bien leur positionnement réglable et leur mobilité....). Je vous tiens au courant.

Macpom a écrit :

réponse 2 : 40 pages (papier) en title pour des infobulles risquent de me faire un document trop lourd... Je vais donc en passer par les pop-up traditionnelles... en essaynat de faire au mieux, pour l'accessibilité et la fonctionalité... (j'aimais bien leur positionnement réglable et leur mobilité....). Je vous tiens au courant.

Bonjour Macpom,

C'est tout à fait possible avec un script non intrusif.
Je l'ai fait ici sur les liens externes au sites, qui sont en bas de page représentés par des images :
- le blason de Fort-Mahon
- la météo
ou - les marées.
Tu ne fait pas attention au code qui a été conçu pour fonctionner sur Netscape4 et sera remis à jour ...

Dans ce cas, il s'uffit d'ajouter target= "_blank" dans le lien pour faire intervenir la popup.
Après m.a.j., ce sera class="externe"

Il n'est pas necessaire de fermer la popup.Elle reviendras au 1er plan à la prochaine solicitation

Sans JS le lien s'ouvre normalement en pleine page.
Modifié par chmel (19 Sep 2005 - 13:01)

Bonjour,
ça fait deux jours que je suis dessus, et j'ai bien avancé. Je suis parti du script d'Olivier pour ouvrir un "lien externe", puis j'ai "cuisiné" avec des éléments d'OpenWeb, AccessiWeb et quelques autres tutoriels. J'ai pas mal avancé et suis en bonne voie. Je te tiens au courant et te mets ça bientôt en ligne.
Et je viens juste de voir le lien que tu me proposes...
(Bug sur le script d'Olivier pour les "fausses pop-up", exemple 2 : Java désactivé et ouverture dans une autre fenêtre (par clic droit), la pop-up cache le texte en arrière plan et n'est pas désactivable ("clicable")(css conservée, mais pas java....). Ouverture dans la même fenêtre, le contenu de la pop-up n'apparaît pas du tout.
Modifié par Macpom (20 Sep 2005 - 17:25)

Voilà !
Et tant qu'à s'épuiser pour de l'ergonomie, côté "producteur", c'est associé avec du php / asp (selon besoins) pour générer les fiches.
La version php (avec les sources en zip) se trouve par là :
http://www.macpom.ouvaton.org/tests/
(Le .zip contient aussi une version asp).
Valide Xhtml 1.0 strict, accessible javascript désactivé.
Juste un tit truc "pas propre" peut-être : le script de fermeture de la fenêtre qui se trouve dans la page et non en externe. Il suffirait de "doubler" le script de départ d'Olivier en remplaçant le nom de la fonction et la classe de lien ?
(En tous cas, Michel, ton script est prêt pour ton changement d'ouverture de liens en externe... ).
Je vous serais gré de bien vouloir tester la fonctionalité de ce sript sur vos navigateurs, avec vos habitudes spécifiques...
(ça se place même en 800 X 600, en principe, et décalé pour ne pas cacher la lecture du Sommaire). D'ailleurs, un regret : la fenêtre se place relativement à l'écran, et non à la fenêtre d'origine. si quelqu'un en connaît la modification, je suis preneur...
Merci d'avance aux testeurs et commentaires.
Modifié par Macpom (18 Oct 2005 - 15:33)

Bonjour Macpom

Macpom a écrit :
Voilà !
Juste un tit truc "pas propre" peut-être : le script de fermeture de la fenêtre qui se trouve dans la page et non en externe.

>> Pas utile, ta fenêtre est recyclable et même un débutant sait la fermer.

(En tous cas, Michel, ton script est prêt pour ton changement d'ouverture de liens en externe... ).

>>Pas tout à fait ... re

un regret : la fenêtre se place relativement à l'écran, et non à la fenêtre d'origine. si quelqu'un en connaît la modification, je suis preneur...
Je ne sais pas. Le visiteur pourra la replacer ou il le souhaite.

Merci d'avance aux testeurs et commentaires.

J'ai juste un petit bémol. Pour les pages lourdes, tes liens vers popup ne seront actifs qu'en fin de chargement de la dernière image (onload) surtout sur IE. Le visiteur pressé aura déja cliqué sur un lien et plouf, raté l'effet. Bon je pousse un peu

Tout ça pour te montrer une autre façon de voir:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
		<title>Essais pop_up</title>
		<meta name="keywords" lang="fr" content="essais de pop_up" />
<script type="text/javascript">
       //pop-up pour liens externes.
gk=window.Event?1:0;// Gecko

function ctrl(e){ 
el=gk?e.target:event.srcElement;//on récupère l'objet sous la souris
if(!el.tagName)el=el.parentNode // pour NS6+ évite le noeud "#text" 
if(el.className == 'lien_ext') el.onclick = function(){
	ff=window.open(this.href,'fiche','height=500,width=400,top=0, left=350,toolbar=no,menubar=yes,location=no,resizable=yes,scrollbars=yes,status=no' ); // l'appellation -ici fiche- permet d'ouvrir les autres liens dans la même pop-up.
	ff.focus(); // on reprend le focus de la pop-up en premier plan pour les liens l'appelant.
	return false; // On ouvre la pop-up ayant pour URL le href du lien cliqué et on inhibe le lien réel.
	}
}

document.onmousemove=ctrl
</script>

	</head>
		<body>
<h1>Essais de pop_up</h1>
  <ul id="fiches">
	<li><a href="http://forum.alsacreations.com/" class="lien_ext" title="Pour webmaster soucieux des règles de bonne conduite">Forum d'alsacréation</a></li>
	<li><a href="http://www.google.fr/" class="lien_ext" title="un célèbre moteur de recherche très pertinent">google</a></li>
</ul>
</body>
</html>

Je n'ai pas mis le title automatique, car tu as déjà la class="lien_ext" pour les différencier. La répétition agace et ça te prives du commentaire additionnel
Modifié par chmel (24 Sep 2005 - 23:22)

Merci Michel ;
pour le bémol : je travaille aussi pour des usagers qui n'ont que du 56k en modem (ruralité oblige, et pour longtemps). Donc, il n'y a en principe que peu d'images pour les pages appelantes, mes contenus étant plutôt textuels. Mais je retiens, pour d'éventuelles autres utilisations (réfléchies, du moins je l'espère, car je ne suis pas vraiment un amoureux de la pop-up... ).
Pour de la photo, par exemple, j'utiliserais plutôt des inclusions... Et pour les liens externes, je suis en train de les abandonner (passage du transitional au strict) en expliquant pourquoi autour de moi...
L'utilisation de la pop-up était donc un choix "raisonné" (voir début du topic.
Plus prosaïquement, je n'y connais pas grand chose en java/ecmascript.
Peux-tu m'indiquer un peu la différence de philosophie entre le script que tu m'indiques et celui que j'ai repris ?
De ce que je comprends :
"gk" = le nom que tu donnes à l'objet "alternative oui-non" pour un événement sur la fenêtre ? (Pourquoi Gecko ?)

"e" = équivaut à la balise "a" pour javascript ? (=les liens ?)
ligne : el=gk?e. ... C'est là que je ne comprends pas ce qu'il se passe... Ou c'est la prise du "contrôle" avant même le chargement de la fin de la page par le "onmousemove" du "document" ?
Le reste me semble assez évident (et comparable au script que j'ai utilisé).
Merci encore pour ta patience et tes explications...
Edit > Je sais, je ferais peut-être mieux d'aller refaire un tit tour sur les tutoriels
Modifié par Macpom (23 Sep 2005 - 14:14)

J'ai cliqué sur le lien de chmel en haut de la page
Les "popups" sont sympathiques l'ennui est que lorsqu'on bouge la souris elle disparait, donc impossible "d'enregistrer sous" une image mise dans ce genre de popup ...

De plus un utilisateur qui désactive JS n'auras pas acces a ces "popups"...

Je me trompe ?
(je peux poser des questions stupides je suis encore débutant en xhtml css etc)

EDIT/ : "Basé sur l'exemple du tutoriel d'alsacréation : des "popups" accessibles."
Je viens de lire l'exemple, et ai donc trouvé la réponse a mes questions /EDIT

Macpom tes popups sont du style de celles d'un skyblog, je me trompe ?
Tu t'en es inspiré (simple curiosité car cela y ressemble beaucoup)

Derniere question : est-il possible de faire une popup sans JS (quel que soit le moyen )

Merci pour vos réponses
Modifié par benjii (23 Sep 2005 - 18:09)

Macpom a écrit :
Merci Michel ;
pour le bémol : je travaille aussi pour des usagers qui n'ont que du 56k en modem (ruralité oblige, et pour longtemps). Donc, il n'y a en principe que peu d'images pour les pages appelantes, mes contenus étant plutôt textuels.

>> Le temps de chargement peut-être ralenti aussi par des inter-actions serveur/client.

a écrit :

Mais je retiens, pour d'éventuelles autres utilisations (réfléchies, du moins je l'espère, car je ne suis pas vraiment un amoureux de la pop-up... ).

>> moi-non plus ...
Je pense que ce n'est pas la meilleure solution, pour palier à la
disparition de "target = _blank" en XHTML strict, de reporter la même gène pour le
visiteur acceptant javascript et les pop-ups, en lui ouvrant autant de fenêtres qu'il clique sur des liens externes.

a écrit :

Pour de la photo, par exemple, j'utiliserais plutôt des inclusions... Et pour les liens externes, je suis en train de les abandonner (passage du transitional au strict) en expliquant pourquoi autour de moi...
L'utilisation de la pop-up était donc un choix "raisonné" (voir début du topic.
Plus prosaïquement, je n'y connais pas grand chose en java/ecmascript.

>> "javascript" ! java est un autre language.

a écrit :

Peux-tu m'indiquer un peu la différence de philosophie entre le script que tu m'indiques et celui que j'ai repris ?

>> Le script d'Olivier utilise une méthode universelle : "onload" qui ajoute les évènements "onclick" sur les liens externes, mais seulement en fin de chargement de la page.
J'emploie pour cette raison la méthode "onmousemove" qui est active dès l'apparition de la page.

a écrit :

De ce que je comprends :
"gk" = le nom que tu donnes à l'objet "alternative oui-non" pour un événement sur la fenêtre ? (Pourquoi Gecko ?)

>> Je ne sais pas ce qu'est "Gecko", mais ce mot apparait dans le logo des navigateurs Netscape et Mozilla et dans le DOM2 .Je m'en sert comme référence pour distinguer 2 syntaxes employées pour l'accés aux objets HTML par javascript en DOM1. La 2ème syntaxe étant celle de Microsoft.
"window.Event" est reconnu par Gecko et OPéra, mais pas par IE. Firefox s'éloigne un peu de Gecko et commence à reconnaître certaines syntaxes destinées à IE. (tout cela provient plus de constatations par tests que par publications lues)

a écrit :

"e" = équivaut à la balise "a" pour javascript ? (=les liens ?)

>> Le nom de cette variable est défini au hazard mais court, il représente l'évènement mis en paramètre dans la fonction. C'est indispensable pour Gecko.

a écrit :

ligne : el=gk?e. ... C'est là que je ne comprends pas ce qu'il se passe... Ou c'est la prise du "contrôle" avant même le chargement de la fin de la page par le "onmousemove" du "document" ?

>> el représente l'élément sous la souris renvoyé par onmousemove.
Pour Gecko ou le DOM2 la commande est "target". IE reconnait "event.srcElement"

>> supplément à intercaler ici dans le script pour que ça fonctionne sur Netscape7 et Mozilla :
if(!el.tagName)el=el.parentNode // pour NS6+ évite le noeud "#text"

a écrit :

Le reste me semble assez évident (et comparable au script que j'ai utilisé).
Merci encore pour ta patience et tes explications...
Edit > Je sais, je ferais peut-être mieux d'aller refaire un tit tour sur les tutoriels

>> Attendons IE7 pour n'utiliser plus qu'une syntaxe ?? .
au plaisir,
Michel
Modifié par chmel (24 Sep 2005 - 23:19)

Salut,

benjii a écrit :
J'ai cliqué sur le lien de chmel en haut de la page
Les "popups" sont sympathiques l'ennui est que lorsqu'on bouge la souris elle disparait, donc impossible "d'enregistrer sous" une image mise dans ce genre de popup ...
Ok très pertinent ta question. C'est réglé ici, mais dit moi si ça ne fait pas trop gadget ?
De plus un utilisateur qui désactive JS n'auras pas acces a ces "popups"...
Je me trompe ?
oui

(je peux poser des questions stupides je suis encore débutant en xhtml css etc)

EDIT/ : "Basé sur l'exemple du tutoriel d'alsacréation : des "popups" accessibles."
Je viens de lire l'exemple, et ai donc trouvé la réponse a mes questions /EDIT

Macpom tes popups sont du style de celles d'un skyblog, je me trompe ?
Tu t'en es inspiré (simple curiosité car cela y ressemble beaucoup)

Derniere question : est-il possible de faire une popup sans JS (quel que soit le moyen )
Je ne crois pas
Merci pour vos réponses

Modifié par chmel (24 Sep 2005 - 23:40)

Salut,

Je m'immisce mais si ça peut vous donner une piste :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr">

<head>
<title>Essai</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">
a:link,a:visited {
color:#196caa;
}
a:hover {
background:#ccc;
color:#000;
text-decoration:none;
}
a:active,a:focus {
color:#000;
background-color:#ccc;
text-decoration:none;
}
#page a span {
display:none;
}
#page a:hover span,#page a:active span,#page a:focus span {
display:block;
position:absolute;
top:150px;
left:150px;
width:189px;
padding:4px;
margin:0px;
z-index:100;
text-align:left;
color:#000;
background:#ccc;
border :1px solid #196caa;
}
</style>
</head>
<body>
<div id="page">
<h1>Essai</h1>
	<p><a href="page.htm">Page 1<span>Description de la page. S'ouvre dans une nouvelle fenêtre.</span></a><br/>
<a href="page.htm">Page 2<span>Tout ce que voulez savoir sur la page. S'ouvre dans une nouvelle fenêtre.</span></a></p>
</div> 
</body>
</html>

Fonctionne sur le a:hover mais sur le focus (active pour IE), permet de copier le contenu. Le style de la pop est à mettre à votre goût. Supporte bien évidemment les images.

Bonjour,

Navré d'être décevant, mais :

Personne ne s'étonne de cet admirable acharnement à réintroduire les pop-ups dans les formats qui les ont opportunément exclus.

Ou à créer un contenu à l'ergonomie quasi-nulle sans javascript à coup d'info-bulles simulées, qui sont par ailleurs inaccessibles à l'utilisateur d'une loupe, par exemple.

Ou à prévenir de l'ouverture des liens dans une nouvelle fenêtre d'une manière qui masquera cet avertissement dans les lecteurs d'écran dont les utilisateurs sont pourtant parmi les premiers intéressés.

Il y a beaucoup de choses à revoir dans tout cela.

Benjii > Je ne fréquente pas les "Skyblogs" ! L'inspiration en serait donc difficile. Je me suis "inspiré", d'une part, d'une nécessité (avoir un sommaire, d'une part, et 40 fiches explicatives liées à ce sommaire d'autre part, et donc comment gérer celà de façon fonctionnelle), et du script d'Olivier pour ouvrir une fenêtre en externe.
Chmel > Merci pour toutes tes explications.

Chmel a écrit :
...en lui ouvrant autant de fenêtres qu'il clique sur des liens externes.

J'ai au moins fait pour que toutes s'ouvrent dans la même fenêtre... (et il s'agit de générer des pop-up, et non plus remplacer les "target=_blank". s'il est recommandé de les supprimer, il serait pour le moins inconvenant de les "remplacer"...).
Java : je sous-entendais javascript, bien-sûr...
Gecko : le nom du "moteur de rendu" des logiciels de la même famille, je crois, si j'ai bien compris.
Implicitement, j'en déduis : ton script se compose de deux alternatives, liées au type de navigateur, alors que celui d'Olivier serait "universel" ? J'ai un faible pour l'universalité...

Pour le temps de chargement : le temps de lire la première ligne du sommaire, bref résumé du contenu de la fiche, au moins (retrouver la fiche que l'on souhaite) devrait permettre un temps de chargement suffisant pour une page pas trop lourde (7ko).
Papyjo > Pour le coup, il me semble, ça nécessite de précharger mes 40 fiches, si je ne me trompe... ?
Laurent Denis > Je crois que la discussion sur "l'ergonomie des pop-ups" sous certaines conditions rejoint un peu celle de l'utilisation des tableaux... Effectivement, un "include" aurait été préférable pour mes fiches, mais s'adaptait mal, ponctuellement, dans la situation développée.
[quote=L]Ou à prévenir de l'ouverture des liens dans une nouvelle fenêtre d'une manière qui masquera cet avertissement dans les lecteurs d'écran dont les utilisateurs sont pourtant parmi les premiers intéressés.

Benjii > Je ne fréquente pas les "Skyblogs" ! L'inspiration en serait donc difficile. Je me suis "inspiré", d'une part, d'une nécessité (avoir un sommaire, d'une part, et 40 fiches explicatives liées à ce sommaire d'autre part, et donc comment gérer celà de façon fonctionnelle), et du script d'Olivier pour ouvrir une fenêtre en externe.
Chmel > Merci pour toutes tes explications.

Chmel a écrit :
...en lui ouvrant autant de fenêtres qu'il clique sur des liens externes.

J'ai au moins fait pour que toutes s'ouvrent dans la même fenêtre... (et il s'agit de générer des pop-up, et non plus remplacer les "target=_blank". s'il est recommandé de les supprimer, il serait pour le moins inconvenant de les "remplacer"...).
Java : je sous-entendais javascript, bien-sûr...
Gecko : le nom du "moteur de rendu" des logiciels de la même famille, je crois, si j'ai bien compris.
Implicitement, j'en déduis : ton script se compose de deux alternatives, liées au type de navigateur, alors que celui d'Olivier serait "universel" ? J'ai un faible pour l'universalité...

Pour le temps de chargement : le temps de lire la première ligne du sommaire, bref résumé du contenu de la fiche, au moins (retrouver la fiche que l'on souhaite) devrait permettre un temps de chargement suffisant pour une page pas trop lourde (7ko).
Papyjo > Pour le coup, il me semble, ça nécessite de précharger mes 40 fiches, si je ne me trompe... ?
Laurent Denis > Je crois que la discussion sur "l'ergonomie des pop-ups" sous certaines conditions rejoint un peu celle de l'utilisation des tableaux... Effectivement, un "include" aurait été préférable pour mes fiches, mais s'adaptait mal, ponctuellement, dans la situation développée.
Il s'agit bien d'ergonomie et de fonctionalité...

Laurent Denis a écrit :
Ou à prévenir de l'ouverture des liens dans une nouvelle fenêtre d'une manière qui masquera cet avertissement dans les lecteurs d'écran dont les utilisateurs sont pourtant parmi les premiers intéressés.

L'inclusion "automatique" du "title=Ouverture dans une nouvelle fenêtre" par le script d'Olivier ne doit effectivement pas fonctionner pour un lecteur d'écran, s'il ne prend pas en compte le javascript. Mais si le javascript n'est pas pris en compte, le mode "pop-up" ne s'active pas, et une page nouvelle s'ouvre dans la même fenêtre. Le contenu reste donc accessible, me semble-t-il ? Sinon, je repasserai le title "à la main" pour chaque lien.
Merci à vous tous pour vos commentaires et analyses.