[résolu] "Faire apparaître des popups sans nouvelle fenêtr

Bonjour,

J'ai hésité à poster dans le forum débutant qui serait plus qu'aproprié pour moi mais comme il s'agit d'un tutoriel Alsacréation ...
(Si l'un des modérateurs préfère déplacer mon sujet, aucun problème)

Il s'agit du tutoriel :
"Faire apparaître des popups sans nouvelle fenêtre"

Plus exactement du dernier paragraphe de ce tutoriel : Des popups complexes et adaptables qui renvoie à un script de Michel Deboom :

http://moncastel.9online.fr/gimg/gimg.htm

Je débute et je n'ai pas de bases de java script aussi j'ai utilisé le code tel que donné et je rencontre deux gros problèmes.
Voici tout d'abord l'adresse où l'on peut voir mon essai :

http://sunland.chez-alice.fr/livres.html

Premier problème :
Il arrive (ce n'est pas systématique ) que lorsque on a cliqué sur un lien 1 pour afficher une image 1 et que l'on clique ensuite sur un lien 2 pour afficher une image 2 il se crée un cadre aux dimensions de l'image 2 mais contenant l'image 1. Celle-cii est ensuite remplacée plus ou moins rapidement par l'image 2.
Mais entre temps on voit l'image 1 déformée.

Deuxième problème :
Avec ie5 et un mac, les images ne s'agrandissent pas lorsqu'on clique sur les vignettes. (Pas de problèmes avec ie sur PC)

Une petite question annexe :
Est-il possible d'afficher la fausse pop up non pas centrée sur l'écran mais au coin gauche de la fenêtre ?

Enfin, je ne désire pas qu'il s'affiche un message "chargement" .Je rappelle que je ne connais pas le java script; j'ai donc contourné le problème en choisissant pour la bulle chargement une font-size nulle. Il y a surement plus simple.

Quelqu'un peut-il m'aider ?
Un grand merci à ceux qui répondront.
Modifié par sunland (04 Oct 2006 - 14:33)

Bonjour,

J'utilise moi même ce script sur mon blog, et il marche pourtant bien. J'ai depuis été en contact avec lui pour certaines modifications. Si tu veux en voir la version modifiée, je te propose de jeter un coup d'oeil sur mon blog (lien en bas de post). Elle a encore été remodifié y'a pas longtemps, pour la version que tu utilise.

Je ne constate ce problème de chargement d'image déformée que lors de la première ouverture de chaque popup, peut être pourrais tu déja commencer par améliorer la compression de tes fichiers pour avoir un poids plus petit, ce qui leur permettrait de se charger plus vite et éviter cette transition facheuse.
Ceci dit il est vrai qu'avec la version de script que j'utilise sur mon blog, lorsqu'on clique sur une image avec une popup déja ouverte, elle commence par se fermer avant d'ouvrir l'autre.

Concernant le problème sur IE5 mac, je pense que tu peux ne pas trop te soucier du problème car il s'agit d'un trop vieux navigateur qui n'évoluera plus, et que peu de gens utilisent encore. Microsoft a arrété de développer pour mac depuis un moment déja.

Pour le positionnement, essaye en supprimant la partie suivante dans le script :

	// centre l'image dans la fenêtre
	gdim.style.left=fen_x/2-gdim.offsetWidth/2+sx+'px'; 
	gdim.style.top=fen_y/2-gdim.offsetHeight/2+sy+'px';

et en repositionnant la popup comme tu veux avec l'id="pop"

Pour le chargement, essaye de voir si çà marche en supprimant la partie de code suivante :

		//montre le message de chargement. 
		msg.firstChild.data='Chargement';
		with(msg.style){display="block";
			left=fen_x/2-msg.offsetWidth/2+sx+'px'; 
	    top=fen_y/2-msg.offsetHeight/2+sy+'px'; 
			}; 
		actif=setTimeout('controleChargement()',300) 

En espérant que ca répond à tes interrogations/attentes.
Modifié par Mikachu (01 Oct 2006 - 11:35)

Merci pour ta réponse mikachu.

Je crois que je vais adopter ton script, c'est à dire l'ancienne version du script de Michel Deboom.
Il semble qu'avec cette version, je n'ai pas la vieille image déformée qui s'affiche dans le nouveau cadre avant de laisser la place à la nouvelle ce qui est l'essentiel !
(L'affichage est un peu moins rapide ou est-ce une illusion ?)

Il y a un détail de peu d'importance :
Lorsqu'on a déplacé une image, la suivante s'affiche avec le même positionnement horizontal donc éventuellement (si elle est plus étroite) complètement hors écran.

Je vais donc utiliser ta version qui me convient mieux. Tant pis pour les fonctionnalités du nouveau script comme déplacer la fausse popup au clavier, la déplacer à la souris avec le curseur sur n'importe quelle position de l'image et pas seulement sur les la barre titre, pouvoir la fermer par "echap" ....

J'ai remarqué un truc (dans les deux versions ) :
Si on déplace la fausse popup trop à droite (partiellement hors du conteneur global de la page) la barre des titres est tronquée. Ce qui n'est heureusement pas le cas de l'image, mais cette barre de titre trop "courte" ne fait pas très joli.



______________________________________________________


Je n'ai pas essayé ta proposition pour modifier le positionnement dans le cas du script que j'avais essayé en premier.
C'est inutile si je ne peux corriger le problème de l'affichage de la vieille image déformée.

Pour ne pas avoir un message de chargement j'avais fini par trouver.
Dans le code ci dessous il suffit de supprimer la dernière ligne.

// Création des éléments de la fausse fenêtre
		// Conteneur :
gdim=D.createElement("div");D.body.appendChild(gdim);gdim.id="pop";
lx=D.createElement("div");gdim.appendChild(lx);
	// message de chargement : 
msg=D.createElement("div");msg.appendChild(D.createTextNode(""));
D.body.appendChild(msg);msg.id="msg";

Merci pour ton aide.
(J'ai visité ton site et ton blog et j'ai beaucoup aprécié ).

a écrit :
Je vais donc utiliser ta version qui me convient mieux. Tant pis pour les fonctionnalités du nouveau script comme déplacer la fausse popup au clavier, la déplacer à la souris avec le curseur sur n'importe quelle position de l'image et pas seulement sur les la barre titre, pouvoir la fermer par "echap" ....

Je vais l'essayer quand à moi, pour voir comment il est utilisable, car il me semble mieux que l'ancien.

a écrit :
Si on déplace la fausse popup trop à droite (partiellement hors du conteneur global de la page) la barre des titres est tronquée. Ce qui n'est heureusement pas le cas de l'image, mais cette barre de titre trop "courte" ne fait pas très joli.

Ca ne fait pas chez moi pourtant j'ai testé sur pas mal de navigateurs pour trouver d'éventuels bugs mais je n'ai jamais vu cela. C'est sur Opera que tu as çà ? (j'arrive pas à reconnaitre l'interface ^^)

a écrit :
(J'ai visité ton site et ton blog cligne et j'ai beaucoup aprécié ).

(merci beaucoup)
Modifié par Mikachu (02 Oct 2006 - 15:12)

a écrit :
Ca ne fait pas chez moi pourtant j'ai testé sur pas mal de navigateurs pour trouver d'éventuels bugs mais je n'ai jamais vu cela. C'est sur Opera que tu as çà ? (j'arrive pas à reconnaitre l'interface ^^)

Là c'est avec Mozilla 1.7.2 et effectivement le problème n'existe pas avec IE6.

_________________________________________________________

Je vais suivre ton essai d'adoption du nouveau script.
Plus rapide et plus complet .

Merci, je vais me l'installer quand j'aurais récupéré mon PC, je croyais qu'il agissait exactement comme Firefox, ce qui semblerait évident, mais visiblement ce n'est pas le cas. C'est pour ca que je n'ai jamais testé dessus.

Bonjour Sunland,
Les remarques m' interressent toujours pour corriger les défauts du script.

sunland a écrit :
Bonjour,

Il arrive (ce n'est pas systématique ) que lorsque on a cliqué sur un lien 1 pour afficher une image 1 et que l'on clique ensuite sur un lien 2 pour afficher une image 2 il se crée un cadre aux dimensions de l'image 2 mais contenant l'image 1. Celle-cii est ensuite remplacée plus ou moins rapidement par l'image 2.
Mais entre temps on voit l'image 1 déformée.

Je n'ai pas rencontré ce problème dans la version actuelle, même sur Firefox (ver 1.5.0.7 chez moi) car dès qu'on clique sur un lien, l'image est cachée et n'apparait que quand la nouvelle est entièrement chargée.

a écrit :

Deuxième problème :
Avec ie5 et un mac, les images ne s'agrandissent pas lorsqu'on clique sur les vignettes. (Pas de problèmes avec ie sur PC)

Je ne savais pas et n'ai pas de moyen de contrôle, mais il ne doit plus y avoir grand monde qui utilise cette vielle charrue

a écrit :
Une petite question annexe :
Est-il possible d'afficher la fausse pop up non pas centrée sur l'écran mais au coin gauche de la fenêtre ?

Mikachu t'as bien répondu à ce sujet, mais pour que la nouvelle image apparaisse toujours en haut et à gauche qqsoit la position dans la page, il faut remplacer le code de centrage par :

// ou image en haut à gauche :
gdim.style.left=sx+'px'; 
gdim.style.top=sy+'px'; 

a écrit :

Enfin, je ne désire pas qu'il s'affiche un message "chargement" .

Ce message est surtout destiné à ceux qui naviguent encore en bas débit, mais si tu trouves ça disgracieux, supprimes plutôt ce code :

//montre le message de chargement. 
msg.firstChild.data='Chargement';
with(msg.style){display="block";
  left=fen_x/2-msg.offsetWidth/2+sx+'px'; 
  top=fen_y/2-msg.offsetHeight/2+sy+'px'; 
  }; 

J'ai rajouté de nouvelles commandes au clavier, et je compte faire une version plus simple, sans drag & drop, sans renvoi de title (détourné de sa fonction normale ). cacher l'image par simple clic dessus.
Ah aussi : tu aurais souhaité que la position déplacée de l'image soit mémorisée par l'utilisateur. On peut prévoir aussi une possibilité de zoom ...

chmel a écrit :

Je n'ai pas rencontré ce problème dans la version actuelle, même sur Firefox (ver 1.5.0.7 chez moi) car dès qu'on clique sur un lien, l'image est cachée et n'apparait que quand la nouvelle est entièrement chargée.

C'est pourtant mon principal souci.

Je ne sais pas si je me fais bien comprendre.

Après avoir affiché une image A lorsque je réclame l'image B j'ai un cadre aux dimensions de l'image B qui s'affiche avec dedans l'image A qui ne reste qu'une fraction de seconde puis elle laisse sa place à l'image B.
Ce n'est pas à tous les coups.
Tu peux voir ici ce que ça donne :

http://sunland.chez-alice.fr/presse.html

(La page est en chantier. Je vais tout reprendre demain pour vérifier si je n'ai pas mal recopier ton code. A force de modifs désordonnées ...).

Peut être est ce dû à la lenteur de ma connection ou/et de mon pc. J'ai remarqué que le phénomène se produit plus souvent lorsque je teste en ligne que lorsque je teste directement sur mon pc et sur une page avec beaucoup d'images. (Avec Mozilla).

Merci pour tes autres réponses mais en l'état je ne peux utiliser le script new look tant que le problème précédent n'est pas réglé. Il sera temps pour moi d'envisager cela ensuite.
Toujours est-il que c'est un script qui répond vraiment à mes besoins.
Merci beaucoup.

Au fait en plus du script utilisé par Mikachu, il y a deux scripts dans le tutoriel. L'un à cette page :

http://css.alsacreations.com/Tutoriels-JavaScript/Faire-apparaitre-des-popups-sans-nouvelle-fenetre

et l'autre ici :

http://moncastel.9online.fr/gimg/gimg.htm

C'est le second que j'ai utilisé car je n'ai pas vu à quelle feuille de style correspondait le premier (le nom des objets à styler comme par ex #pop).
Je suis désolée. Le java script, je ne m'y suis pas encore mise. Je consomme juste.

Bonjour,
Pas la peine de te répéter, j'ai pas Mozilla 1.7, mais j'avais essayé avec Nescape 7, plus vieux mais utilisant le même moteur Gecko.
Tu n'as plus qu'à télécharger de nouveau le script et le modifier comme indiqué plus haut. Et vérifier après chaque modification du style.
A part cela, ton site est agréable à regarder. Je pense juste que les images agrandies ne devraient pas dépasser 800px de large. Il y a encore beaucoup de config en 800X600 comme moi ou c'est une horreur de devoir scroller dans tout les sens.
Bonne continuation

chmel a écrit :
Bonjour,
Pas la peine de te répéter, ..

Excuse-moi, je ne voulais pas être désagréable.

Je vais recharger le style et vérifier.
Tu ne me dis pas si tu as constaté ou non l'erreur sur mon site ?

a écrit :
Je pense juste que les images agrandies ne devraient pas dépasser 800px de large. Il y a encore beaucoup de config en 800X600 comme moi ou c'est une horreur de devoir scroller dans tout les sens.

J'ai essayé de tenir compte des configurations 800x600 et conçu globalement le projet dans cette optique.
Aucune de mes images ne dépassse 800px de large et cette dimension n'est atteinte que par 20 des 160 images. Je peux encore réduire les dimensions de quelques unes mais les quelques reproductions de BD ne seraient plus lisibles en dessous.
C'est d'ailleurs pour cela que je me soucie de faire afficher les images agrandies dans le coin en haut à gauche. Ainsi pour ceux qui n'auraient pas le réflexe d'utiliser "echap" pour les fermer, ils pourront voir une partie de l'image et passer à la suite sans scroller. Du moins verticalement. Horizontalement, il faudrait que je tienne compte de la largeur de l'ascenceur.

Je pense avoir compris ce que tu souhaitais. J'ai viré le drag&drop. Pour fermer la fenêtre --> un clic dessus ou la touche "Echap".
Le script ici
Le CSS ici
La page test ici
Modifié par chmel (03 Oct 2006 - 14:28)

a écrit :
Aucune de mes images ne dépassse 800px de large et cette dimension n'est atteinte que par 20 des 160 images. Je peux encore réduire les dimensions de quelques unes mais les quelques reproductions de BD ne seraient plus lisibles en dessous.

Sauf que quand on surfe en 800x600, 800 est la largeur de l'écran, sans compter les bords du navigateurs, la barre de défilements, etc... La surface réelle serait inférieure à 770 ou 760 px en réalité.

a écrit :
J'ai rajouté de nouvelles commandes au clavier, et je compte faire une version plus simple, sans drag & drop, sans renvoi de title (détourné de sa fonction normale ). cacher l'image par simple clic dessus.
Ah aussi : tu aurais souhaité que la position déplacée de l'image soit mémorisée par l'utilisateur. On peut prévoir aussi une possibilité de zoom ...

le drag'n drop était pourtant très bien, dommage
Le simple clic sur l'image pour fermer, ou la touche échap ca c'est super, mais c'est un plus mais tout le monde n'aura pas le réflexe, je pense que laisser la croix pour fermer sera plus commode pour certains utilisateurs.

Le renvoie du titre supprimé, c'est à dire que l'image seule sera affichée dans l'écran ?

tu aurais souhaité que la position déplacée de l'image soit mémorisée par l'utilisateur, c'était déja le cas non ? Quand j'ouvre une image sur mon blog et que je la déplace la suivante s'affiche à la même position dans l'écran (du moins elle garde la coordonnée horizontale).
Une possibilité de zoom, ca fait pas un peu too much à force
Faut que ca reste simple au final non ?

En tout cas dès que j'ai un peu de temps je teste ta nouvelle version Chmel
Modifié par Mikachu (03 Oct 2006 - 16:41)

Mikachu a écrit :
Sauf que quand on surfe en 800x600, 800 est la largeur de l'écran, sans compter les bords du navigateurs, la barre de défilements, etc... La surface réelle serait inférieure à 770 ou 760 px en réalité.

C'est vrai qu'il reste une barre horizontale, mais le plus gros problème, c'est le poids : 672Ko pour les plus grandes, ça fait 3 minutes d'attente en bas débit. Sunland, tu devrais choisir le format Jpg pour réduire le poids par 10 sans perdre trôp de qualité.

[quote=Mikachu]le drag'n drop était pourtant très bien, dommage
[/code]Je te remercie de tes commentaires.
Bon d'accord, je le laisserais. En fait qqun m'avais dit que ça faisait gadget. Avec l'image centrée, le d&drop ne sert plus.

 
Le simple clic sur l'image pour fermer, ou la touche échap ca c'est super, mais c'est un plus  mais tout le monde n'aura pas le réflexe, je pense que laisser la croix pour fermer sera plus commode pour certains utilisateurs.

Ok je laisserai la croix. Dans la nouvelle version, comme l'image posait problème à certains, c'est un simple X.
J'ai ajouté les commandes clavier pour ceux qui n'ont pas la souris.

 Le renvoie du titre supprimé, c'est à dire que l'image seule sera affichée dans l'écran ?
 

En fait, J'ai lu des topics à ce sujet disant que title est détourné de sa fonction normale et devrait contenir "Agrandir l'image" par éxemple. L'information complémentaire sur l'image devrait être en dur à côté de l'image. Je pense qu'on pourrait ptêtre utiliser alt qui serait plus adéquat puisqu'il doit contenir le texte alternatif pour ceux qui ne voient pas les images

tu aurais souhaité que la position déplacée de l'image soit mémorisée par l'utilisateur, c'était déja le cas non ? 

Pas avec l'image centrée

 Une possibilité de zoom, ca fait pas un peu too much à force  [sweatdrop] 
Faut que ca reste simple au final non ?

En fait c'était pour faire comme IE quand l'image est ouverte normalement, elle est automatiquement redimentionnée pour ne pas dépasser la fenêtre de navigation. Je comptait faire la même chose avec dans ce cas un bouton pour redimentionner en pleine taille. Je ne sais pas si je me suis bien fait comprendre

J'ai trouvé le moyen d'éviter window.onload sans être obligé de mettre le script en bas de page comme ici
Modifié par chmel (03 Oct 2006 - 23:30)

chmel a écrit :


En fait, J'ai lu des topics à ce sujet disant que title est détourné de sa fonction normale et devrait contenir "Agrandir l'image" par éxemple. L'information complémentaire sur l'image devrait être en dur à côté de l'image. Je pense qu'on pourrait ptêtre utiliser alt qui serait plus adéquat puisqu'il doit contenir le texte alternatif pour ceux qui ne voient pas les images

Comme j'ai un tout petit peu à voir avec cette affaire une petite précision,

alt+images actives+navigation clavier+JS inactif = contenu texte inaccessible.

A première vue la combinaison des quatre paramètres peut paraitre forcée ou impressionnante mais finalement c'est une situation que l'on peut très bien imaginée très banale.

Bon d'accord clb56, alt ne peut pas convenir non plus.
J'ai testé aussi l'infobulle css constituée d'un span caché, rendu visible au survol et au clavier.
Le problème est qu'elle est en

position:absolute

avec un rendu différent d'un navigateur à l'autre.
J'ai réussi à le faire marcher sur IE et Gecko mais je coince sur Opéra
Modifié par chmel (04 Oct 2006 - 00:12)

Salut chmel,

je me souviens effectivement que tu as déjà parlé de la possibilité de l'infobulle en pensant, si je comprend bien, que le contenu texte devait être présent dès le survol au sens over de souris ou bien focus du clavier.

Mais je crois pour ma part que celà n'est pas réellement un souci, et que s'il n'y a rien au survol ou au focus, qu'il s'agisse de tooltip html de base ou de dispositifs plus élaborés, celà n'est en rien une entrave (une obstruction) à partir du moment où on a le contenu texte réellement associé à l'image sous l'une des deux modalités :

1. JS inactif : texte associé en dur au lien (à la vignette le cas échéant, comme chez Olivier)

2. JS actif : texte associé à l'image grande taille dans l'environnement généré en javascript.

Dans les deux cas le contenu texte est bien présent et on n'a besoin de rien de plus. Ce qui n'interdit évidemment pas des dispositifs supplémentaires comme ceux que tu évoques.

Bonsoir clb56

clb56 a écrit :
Salut chmel,

1. JS inactif : texte associé en dur au lien (à la vignette le cas échéant, comme chez Olivier)
.

De quoi tu parles ? je ne comprends plus
Chez Olivier c'est pas en dur puisque c'est title dans le lien.

chmel a écrit :

De quoi tu parles ? je ne comprends plus
Chez Olivier c'est pas en dur puisque c'est title dans le lien.

Ah excuse moi, je me suis mal exprimé. Je parlais simplement du fait que chez Olivier les liens vers les images étaient des vignettes et non du texte simple, du type :

<a href="img.jpg">Lien</a>

Cette dernière expression constituant bien le cas de niveau le plus général (tu y fais allusion dans ton tuto)
Modifié par clb56 (04 Oct 2006 - 01:04)

Je vous remercie de l'aide que vous m'avez apportée. MERCI. MERCI.

En reprenant tout depuis le début, le problème a disparu. Tous les torts à ma charge. Un code mal recopié ou imprudemment modifié (qui m'a fait tourner en bourrique pendant des jours ) !
Et j'ai pu comme vous me l'avez indiqué positionner l'image selon mon désir et ne plus afficher le message de chargement.

J'ai opté pour l'image déplaçable plutôt que pour celle facile à fermer par un simple clic. Car après tout sur mon site plutôt que de fermer une image on va plutôt demander qu'une nouvelle s'ouvre !

Je vais réduire le poids de mes plus grosses images et rogner 40px sur les images en 800px de large.

sunland a écrit :
J'ai opté pour l'image déplaçable plutôt que pour celle facile à fermer par un simple clic.

De la façon dont c'est programmé, même si tu la déplace, la fois suivante elle revient dans son coin. Cela te convient alors ?

a écrit :
Je vais réduire le poids de mes plus grosses images .

Il faut penser qu'en bas débit c'est 4Ko/seconde, alors au dessus de 40Ko ça commence à faire long et pense à mettre [résolu] dans ton titre
Modifié par chmel (04 Oct 2006 - 02:13)