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