Discussion :

[laurentSc]

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]

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 ?

[Auteur]

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

[emmanuel.remy]

Salut,

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

ERE

[laurentSc]

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]

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]

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]

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]

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]

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