images d�filantes/pop up

**laurentSc** · 01/08/2009, 11h47

Bonjour,

j'aimerais faire un bandeau d�filant qui apparaisse dans une fen�tre pop up. Je viens de faire une fen�tre pop up avec une image fixe ici (passer la souris sur le mot "club house", 2e ligne du dernier paragraphe), mais il est �vident que c'est trop gros ; donc dans la pop up, je voudrais faire appara�tre des images d�filantes ; la fen�tre n'aurait ainsi plus que la taille d'un peu plus d'une image. Ca doit �tre faisable en javascript, vu que j'avais d�j� utilis� le code de Auteur pour r�aliser des images d�filantes pas dans une pop up, mais ici, comment faire ?

**laurentSc** · 02/08/2009, 11h11

J'ai finalement p� faire �a facilement : j'ouvre une popup avec window.open et celle-ci lance une page html dans laquelle j'ai plac� le code de Auteur ; juste une question : quand j'ouvre la popup, je voudrais supprimer le cadre de la fen�tre ; est-ce possible, et comment ?

**emmanuel.remy** · 02/08/2009, 12h01

Salut,

Je ne crois pas que cela soit possible: aucun param�tre de la fonction window.open ne le permet.

ERE

**Auteur** · 02/08/2009, 15h00

Envoy� par laurentSc

J'ai finalement p� faire �a facilement : j'ouvre une popup avec window.open et celle-ci lance une page html dans laquelle j'ai plac� le code de Auteur ; juste une question : quand j'ouvre la popup, je voudrais supprimer le cadre de la fen�tre ; est-ce possible, et comment ?

Attention, certaines sources du sujet que j'ai ouvert (cf.message #7) ne sont pas fonctionnelles sous IE8. Je n'ai pas encore eu le temps de chercher � comprendre pourquoi.

En cas de souci tu peux te rabattre sur le script de Le_Chomeur

**laurentSc** · 02/08/2009, 15h05

Admettons que ce ne soit pas possible, cela dit, j'aimerais faire des images d�filantes, sans cadre, comme c'est le cas ici (sur les mots "carri�re" et "club-house") (j'avais post� l� car la pop-up c'est du javascript et le code des images d�filantes, c'est un code javascript de "auteur"). Y a-t-il une solution ? (Il me semble avoir d�j� vu des images d�filantes sans cadre, mais je ne sais plus o�).

**Auteur** · 02/08/2009, 15h18

Tu peux faire d�filer des images sans cadre. Mais dans ce cas ce ne sont pas des pop-up qui sont ouvertes, mais des div qui sont plac�s au dessus du texte.

**laurentSc** · 02/08/2009, 15h25

Merci pour ton intervention Auteur. N'�tant qu'en IE06 (c'est la version qu'avait install� ma bo�te, vu que mon PC est un portable professionnel), je n'ai pas remarqu� le pb (par contre, il ne marche pas avec FF). Cela dit, si tu savais faire des images d�filantes sans ce cadre, �a m'int�resse.

**Auteur** · 02/08/2009, 15h31

Ne marchent pas avec FF

Ces scripts fonctionnent avec FF...

Pour �viter ce cadre, place le code dans un div en position:absolute et pr�cise ses coordonn�es (left / top) ainsi que ses dimensions (width / height)

**laurentSc** · 02/08/2009, 15h37

D�cid�ment, tu interviens � chaque fois que je fais une r�ponse ! Ce que tu dis avec les div m'int�resse beaucoup. J'avais d�j� r�cup�r� un code avec des div et qui faisait aussi appara�tre des pop ups. Peux-tu me dire si je dois m'en insipirer ? Voici ce code :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<DIV id=processes style="Z-INDEX: 2; LEFT: 266px; VISIBILITY: hidden; WIDTH: 146px; POSITION: absolute; TOP: 86px; HEIGHT: 180px; BACKGROUND-COLOR: rgb(224,255,255)">
<P>Processes </P></DIV>
<DIV id=test style="Z-INDEX: 2; LEFT: 479px; VISIBILITY: hidden; WIDTH: 134px; POSITION: absolute; TOP: 180px; HEIGHT: 54px; BACKGROUND-COLOR: rgb(224,255,255)">
<P>Test </P></DIV>
<DIV id=mech style="Z-INDEX: 2; LEFT: 476px; VISIBILITY: hidden; WIDTH: 135px; POSITION: absolute; TOP: 395px; HEIGHT: 130px; BACKGROUND-COLOR: rgb(224,255,255)">
<P>mech </P></DIV>
<DIV id=LayerFond style="Z-INDEX: 1; LEFT: 147px; VISIBILITY: visible; WIDTH: 454px; POSITION: absolute; TOP: 85px; HEIGHT: 78px; BACKGROUND-COLOR: rgb(255,255,255)">
<IMG id=bubbles_Electromech2 height=476 alt="" 
src="http://ocp.schneider-electric.com/Global/OCP/OCPPubli.nsf/71a0ac10384c69a0c1256c860049442d/3e0b9c49924680ddc125744300570d75/$FILE/Bubbles_Electromech3.gif" 
width=487 useMap=#m_bubbles_Electromech2 border=0 name=bubbles_Electromech2> <MAP id=m_bubbles_Electromech2 name=m_bubbles_Electromech2><AREA onmouseover="processes.style.visibility='hidden';
test.style.visibility='hidden';mech.style.visibility='visible'" shape=CIRCLE coords=392,347,51 href="#"><AREA onmouseover="processes.style.visibility='hidden';test.style.visibility='visible';
mech.style.visibility='hidden'" shape=CIRCLE coords=393,126,51 href="#"><AREA onmouseover="processes.style.visibility='visible';test.style.visibility='hidden';
mech.style.visibility='hidden'" shape=CIRCLE coords=189,65,50 href="#"><AREA onmouseover="processes.style.visibility='hidden';test.style.visibility='hidden';
mech.style.visibility='hidden'" shape=RECT coords=1,-25,528,473></MAP></DIV>

**Auteur** · 02/08/2009, 18h11

Ce code me semble bien vieux

en plus il utilise des images map.

Voil� un truc tout simple :

Code html :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
 
<head>
 
<title></title>
 
<meta http-equiv="Content-type" content="application/xhtml+xml; charset=ISO-8859-1" />
 
<meta http-equiv="Content-Language" content="fr" />
 
 
<style type="text/css">
<!--
/* feuille de style de la boite du message */
.message{
        border: ridge #AAAAAA 4px; /* une petite bordure à la boite du message */
        height: 200px; 
        width: 50%; 
        top: 50px; 
        left: 25%; 
        background-color: #FFFFFF; /* ne pas oublier de mettre une couleur pour le fond */
        position: absolute; 
        margin: 0px;
        padding: 10px;
        display: none;  /* message cache au chargement de la page */
        z-index: 1000;  /* on place le message bien au-dessus des autre elements */
}
-->
</style> 
 
<script type="text/javascript">
<!-- 
function afficher()
{
        document.getElementById("idMsg").style.display = "block";
}
 
function cacher()
{
        document.getElementById("idMsg").style.display = "none";
}
 
//-->
</script>
 
</head>
 
<body>
<!-- div contenant le message à afficher en pop-up -->
<div class="message" id="idMsg">
	Coucou tout le monde !!!!
</div>
<!-- fin du message -->
 
 
<!-- corps du document -->
<div>
	bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
	bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br/>
	bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
	bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br/>
	bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
	bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br/>
	bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
	bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br/>
	bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
	bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br/>
	bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
	bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br/>
	bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
	bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br/>
	bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
	bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br/>
	bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 	
</div>
 
<div>
	<br /><br /><br /><br /><br /><br /><br />
	<input type="button" value="afficher le message" onclick="afficher()" />
	<br /><br />
 	<input type="button" value="cacher le message" onclick="cacher()" />
</div>
 
</body>
</html>

enregistre ce code dans un fichier html puis clique sur les boutons

**laurentSc** · 02/08/2009, 18h50

Mon code est peut-�tre vieux, mais il a l'int�r�t de marcher, contrairement � ce que tu m'as pass�

; il n'y a s�rement pas grand chose qui ne va pas, mais quand je clique sur le bouton "afficher le message", j'obtiens "erreur sur la page"... Et pour la zone MAP, je comptais bien s�r mettre � la place des liens...
Sinon, quand je disais que ton code ne marchait pas sur FF, c'est sur FF2 (ce que j'ai sur mon PC).

**Auteur** · 02/08/2009, 19h07

Envoy� par laurentSc

Mon code est peut-�tre vieux, mais il a l'int�r�t de marcher, contrairement � ce que tu m'as pass�

; il n'y a s�rement pas grand chose qui ne va pas, mais quand je clique sur le bouton "afficher le message", j'obtiens "erreur sur la page"...

Je l'ai test� et il fonctionne. Tu as copier-coll� le code tel quel ?

Envoy� par laurentSc

Et pour la zone MAP, je comptais bien s�r mettre � la place des liens...
Sinon, quand je disais que ton code ne marchait pas sur FF, c'est sur FF2 (ce que j'ai sur mon PC).

Ma contribution date de 2008, j'�tais sous FF 2. Tu as d� rater un truc

**laurentSc** · 02/08/2009, 22h18

Oui, j'ai fait un copier-coller et pour �tre s�r, je l'ai mis sur le web (ici), mais moi, j'ai toujours l'erreur

(avec IE6)...
Sinon, ton code qui ne veut pas marcher sur FF2

, il est par exemple l� (sur les mots "carri�re" et "club-house" qui pour l'instant lancent des pop-ups avec cadre).

**laurentSc** · 02/08/2009, 22h33

Cela dit, m�me quand �a marchera, je suppose que je remplacerai

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
<input value="afficher le message" onclick="afficher()"
 type="button">

par un lien avec onMouseover=appel � ta fonction ?

**Auteur** · 03/08/2009, 00h54

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
  <script type="text/javascript">
<!-- function afficher()
{
document.getElementById("idMsg").style.display = "block";
}
function cacher()
{
document.getElementById("idMsg").style.display = "none";
}
//-->
  </script>

attention tu as mis la fonction afficher() sur la m�me ligne qu'un d�but de commentaire !! place les termes function afficher() sur la ligne suivante et l� �a marchera

Envoy� par laurentSc

Sinon, ton code qui ne veut pas marcher sur FF2 , il est par exemple l� (sur les mots "carri�re" et "club-house" qui pour l'instant lancent des pop-ups avec cadre).

Si mais regarde bien le message de FF tout en haut de la page : il bloque les pop-up

Pour voir le r�sultat i faut autoriser les pop-up

**laurentSc** · 03/08/2009, 08h40

Effectivement, �a va mieux si je rajoute un retour � la ligne (en fait, quand j'avais copi�-coll� ton code, il n'y en avait pas et je ne m'en �tais pas aper�u). Par contre, tu ne m'as pas dit comment je pouvais lancer ton code ; j'ai essay� comme je pensais (un lien avec onMouseover), mais �a ne va pas...
Et pour FF, je n'ai pas de message d'erreur ; par contre, j'ai regard� dans les options, et il ne bloque pas les popups...

**laurentSc** · 03/08/2009, 11h22

Effectivement, �a va beaucoup mieux avec un retour � la ligne ! Quand j'avais copi�-coll� ton code, il n'y �tait pas, mais je ne l'avais pas remarqu�... Sinon, peux-tu me dire comment appeler ton code. J'ai essay� ce � quoi je pensais (remplacer le bouton "afficher" par un lien avec un onMouseover qui appelle ton code), mais �a ne marche pas.

**laurentSc** · 03/08/2009, 16h11

Ca fait plusieurs fois que je mets une r�ponse, mais quand je v�rifie, elle n'y est pas

Donc, �a marche beaucoup mieux avec un retour � la ligne (mais quand j'avais fait un copier-coller de ton code, �a n'en avait pas mis et je ne m'en �tais pas aper�u). Par contre, j'ai fait l'essai que j'avais imagin� (remplacer le bouton "Afficher le message" par un lien avec onMouseover=appel � ton code), mais �a ne marche pas : comment appeler ton code ?

**Auteur** · 03/08/2009, 18h52

Envoy� par laurentSc

Ca fait plusieurs fois que je mets une r�ponse, mais quand je v�rifie, elle n'y est pas

vide le cache de ton navigateur

Sinon en pi�ce jointe un exemple de diaporama en pop-up (qui ne fonctionne pas sous IE 8, je le rappelle !!) qui fonctionne sous FF. D�compresse l'archive et ouvre exemple.htm dans ton navigateur.

[edit]
Pour IE8, il faut ouvrir l'outil de d�veloppement (F12) et se mettre en mode IE7
[/edit]

**laurentSc** · 03/08/2009, 19h22

Merci beaucoup pour ton exemple : je ne risquais pas de l'inventer ! Sinon, � mon avis, je n'avais pas de probl�me de cache, mais les messages �tant sur une nouvelle page, je pensais qu'il n'y �taient pas (d'o� l'existence de 3 messages). D�s que ce sera au point, je cocherai "r�solu".

images d�filantes/pop up

JavaScript

Discussions similaires

Partager

Partager