Pop up avec Dreamweaver (extra newb inside) » Programmation » FH

Vous devez vous connecter pour répondre au topic.

Pop up avec Dreamweaver (extra newb inside)

picmonac
[DISTR4CTION M4SSIVE]

Messages : 4 624
Inscrit le 17/02/02
Ville : Grenoble/Moirans
Non connecté

Posté le 29 juin 2007 - 16 h 29 m 36 s

Salut!!

Que ce soit dit, le HTML, c'est pas mon metier.
Du coup, j'utilise un Dreamweaver MX 2004 pour faire une page de favoris sur serveur.
Le projet serait de faire un pop up dans ce genre http://css.alsacreations.com/xmedia/exemples/popup/popup2.htm
Cette page ne me suffit pas du tout pour la mise en oeuvre, est ce que qq'un peut me guider un peu plus et aurait la patience de me dire ce que je fais avec ce .js et ce .css...presque du chinois pour moi.
Merci aux plus courageux :dde:

Message édité 1 fois, la dernière par picmonac le 29 juin 2007 - 16 h 41.

Achéte:
-attelage remorque pour Scenic I
-pneus 185/65/15
-tuiles mécaniques type "Moirans"
-Scie circulaire sur table
"L'abus de modération nuit gravement à la consommation"

(¯`'·.¸(`'·.¸_ ¤: picmonac :¤_¸.·'´)¸.·'´¯)

grabber
Coordinateur
MacBook Pro 2,4 Powered

Messages : 8 528
Inscrit le 06/03/02
Ville : Angers
Non connecté

Posté le 29 juin 2007 - 17 h 01 m 57 s

hello,

bon alors on va faire simple, faut que tu cherches un peu sinon c pas drole

dans ta page tu as 2 sections : head et body
body contient le corps de ta page, c'est a dire tout ce que tu vois.
dans head, tu as des balises d'entetes et tu y colles aussi tout ce qui doit se charger et rester en memoire, typiquement, ta feille de style css et tes scripts javascript.

donc ici, tu prends ta page vierge sous dreambeurk.
ensuite tu copie colle ce qui est sur la page d'alsa pour le css dans un fichier popup.css, pareil pour le popup2.js
ensuite, tu mets ces 2 fichiers a la racine de ton site.

sur ta page, pour que les fichiers soient utilises, tu dois les appeler, donc dans le head, tu mets ca :

Code html

1.   <style type="text/css" media="print">@import url(./popup.css);</style>
2.   <script type="text/javascript" src="./popup2.js"></script>

la deja t'as fait le gros du taf.

ensuite, forcement, tes popups vont s'afficher dans le corps de la page, donc il va falloir intervenir dans ton body cte fois

regardes la source de la page, il y a l'instruction dedans

1ere ligne du body
tu sauvegardes, tu test et tu dis la ou t'as des problemes si t'en as

picmonac
[DISTR4CTION M4SSIVE]

Messages : 4 624
Inscrit le 17/02/02
Ville : Grenoble/Moirans
Non connecté

Posté le 29 juin 2007 - 22 h 41 m 56 s

Merci grabber, je me penche là dessus en début de semaine...et on en reparle.Bon WE!!

picmonac
[DISTR4CTION M4SSIVE]

Messages : 4 624
Inscrit le 17/02/02
Ville : Grenoble/Moirans
Non connecté

Posté le 02 juillet 2007 - 13 h 17 m 34 s

Bon, je crois que j'ai fait ce qu'il fallait mais je ne vois rien apparaitre dans le style popup.
A ce stade, elle devrait bien apparaitre sauvagement dans la page, non?

grabber
Coordinateur
MacBook Pro 2,4 Powered

Messages : 8 528
Inscrit le 06/03/02
Ville : Angers
Non connecté

Posté le 02 juillet 2007 - 19 h 02 m 25 s

bah voui !
files le listing de ta page, si ya trop de merde je la modifierai pis jte la remettrai en nikel :jap:

enfin a moins quee t'aies envie de te prendre le chou dessus bien sur

picmonac
[DISTR4CTION M4SSIVE]

Messages : 4 624
Inscrit le 17/02/02
Ville : Grenoble/Moirans
Non connecté

Posté le 02 juillet 2007 - 21 h 18 m 40 s

ok,ben si tu as 2 min, j'dis pas non....
Tu me laisses un mail?

grabber
Coordinateur
MacBook Pro 2,4 Powered

Messages : 8 528
Inscrit le 06/03/02
Ville : Angers
Non connecté

Posté le 03 juillet 2007 - 08 h 54 m 16 s

copie colle ici

picmonac
[DISTR4CTION M4SSIVE]

Messages : 4 624
Inscrit le 17/02/02
Ville : Grenoble/Moirans
Non connecté

Posté le 03 juillet 2007 - 09 h 20 m 00 s

C'est un document pro, ça m'embête un peu...et j'ai 16300 lignes....

grabber
Coordinateur
MacBook Pro 2,4 Powered

Messages : 8 528
Inscrit le 06/03/02
Ville : Angers
Non connecté

Posté le 03 juillet 2007 - 09 h 48 m 14 s

oula !
bon alors changement de methode, on va pas aller taper dans 16000 lignes pour une infobulle lol !!!
alors la methode est la suivante : oublies ton document pro, crees une page vierge et refait ce que je t'ai dit au dessus, juste pour faire un essai, tu postes ici si ca marche pas.
ensuite on fait marcher l'exemple mini, pis une fois que ca marche, tu patcheras ta page pro, mais on bosse pas sur 16000 lignes, trop de raisons possibles pour que ca merde :jap:

met ton code dans les balises [ code ]

picmonac
[DISTR4CTION M4SSIVE]

Messages : 4 624
Inscrit le 17/02/02
Ville : Grenoble/Moirans
Non connecté

Posté le 03 juillet 2007 - 12 h 26 m 42 s

Voici un test sur un page blanche...pas vu de pop up...

Code

 1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 2. "http://www.w3.org/TR/html4/loose.dtd">
 3. <html>
 4. <head>
 5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 6. <title>Document sans nom</title>
 7. <style type="text/css" media="print">@import url(./popup.css);</style>
 8. <script type="text/javascript" src="./popup2.js"></script>
 9. </head>
10. 
11. <body>
12. </body>
13. </html>

et l'extrait de mon head original.

Code

 1. <html>
 2. <head>
 3. <meta http-equiv="Content-Language" content="fr">
 4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 5. <META NAME="Author" CONTENT="D+">
 6. <META name="keywords" content="DOM2424 - Guide D+">
 7. <title>GUIDE D+</title>
 8. <link rel="stylesheet" href="dom2424.css" type="text/css">
 9. <script src="dom2424.js"></script>
10. <style type="text/css" media="print">@import url(./popup.css);</style>
11. <script type="text/javascript" src="./popup2.js"></script>
12. <script language="Javascript">
13.   <!--
14.   function clickdep(dep) {
15.     var z=false;
16.     var ind;
17.     for (var i=0; i < document.forms[0].TYPE.length; i++) {
18.       if (document.forms[0].TYPE[i].checked) {
19.         ind=i;
20.         z=true;
21.       }
22.     }
23.     if (!z) {
24.       alert("Veuillez préciser un type d'établissement !");
25.       //document.location="/dom2424/retraite/index.php";
26.       //return false;
27.     }
28.     else {
29.       document.location="recherche.php?TYPE="
30.                          +escape(document.forms[0].TYPE[ind].value)
31.                          +"&DEP="+dep;
32.     }
33.   }
34. 
35.   function verifsaisie(Form1) {
36.      var z=false;
37.      for (var i=0; i < Form1.TYPE.length; i++) {
38.        if (Form1.TYPE[i].checked) {
39.          z=true;
40.        }
41.      }
42.      if (!z) {
43.        alert("Veuillez préciser le type d'établissement !");
44.        return false;
45.      }
46.     if (Form1.MOTCLE.value=="") {
47.       alert("Veuillez saisir une valeur !");
48.       return false;
49.     }
50.     return true;
51.   }
52.    //-->
53. </script>
54. <style type="text/css">
55. <!--
56. .Style1 {
57. 	font-family: Arial;
58. 	font-size: 10pt;
59. }
60. .Style3 {font-family: Arial; font-size: 10pt; color: #000000; }
61. .Style4 {font-size: 10pt}
62. .Style8 {color: #c94e01}
63. .Style9 {
64. 	font-size: 24px;
65. 	font-weight: bold;
66. }
67. .Style10 {color: #0000FF}
68. .Style16 {color: #000000}
69. .Style24 {font-size: 18px}
70. .Style26 {font-size: 18px; color: #FF0000; }
71. .Style34 {color: #FF0000; font-weight: bold; }
72. .Style35 {color: #000000; font-weight: bold; }
73. .Style36 {color: #FF0000}
74. .Style38 {font-family: Arial; font-size: 10pt; color: #0000FF; }
75. .Style39 {font-size: 10px}
76. .Style43 {font-size: 12px}
77. .Style46 {font-size: 10pt; color: navy; }
78. .Style47 {font-size: 24px; font-weight: bold; color: #CCFF33; }
79. body {
80. 	background-color: #CCFF66;
81. 	background-image: url();
82. }
83. body,td,th {
84. 	color: #660066;
85. }
86. .Style49 {color: #CCFF33; font-weight: bold; }
87. .Style50 {font-size: 18px; font-weight: bold; }
88. -->
89. </style>
90. </head>
91.

grabber
Coordinateur
MacBook Pro 2,4 Powered

Messages : 8 528
Inscrit le 06/03/02
Ville : Angers
Non connecté

Posté le 03 juillet 2007 - 14 h 41 m 44 s

hello,

la ca peut pas marcher effectivement car rien dans le body, jpense qu'on devrait avoir quelque chose au moins.
attends, jfais un exemple de mon cote en vierge et je te le met quand ca marche, laisses moi un pti moment g plein de taff...

oliv

grabber
Coordinateur
MacBook Pro 2,4 Powered

Messages : 8 528
Inscrit le 06/03/02
Ville : Angers
Non connecté

Posté le 03 juillet 2007 - 15 h 04 m 53 s

bon c bon jlai fait, jte copie colle le merdier

Code html

 1. <html>
 2. 
 3. <head>
 4.   <title>Test popup</title>
 5.   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
 6.   <script type="text/javascript" src="popup2.js"></script>
 7.   <style type="text/css">
 8.     <!--
 9.     @import url(popup.css);
10.     -->
11.   </style>
12. </head>
13. 
14. <body>
15. 
16.   <a href="#pop1" class="pop">Lien (ouvre pop1)</a><br /><a href="#pop2" class="pop">Lien (ouvre pop2)</a>
17. 
18.   <div id="pop1">
19.     <h1>Popup !</h1>
20.     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum in mauris vel ipsum viverra tincidunt. </p>
21.     <p>venenatis et, elementum et, sapien. Donec nonummy. Vestibulum condimentum</p>
22.     <img src="http://css.alsacreations.com/xmedia/exemples/popup/image.gif" alt="image d'exemple" />
23.     <p>sit amet consectetuer dolor magna ac ante. Pellentesque consequat. </p>
24.   </div>
25. 
26.   <div id="pop2">
27.     <h1>Annonce</h1>
28.     <p>Autre popup sur la page</p>
29.     <p>sit amet consectetuer dolor magna ac ante. Pellentesque consequat. </p>
30.   </div>
31.   
32. </body>
33. </html>
34.

alors j't'explique : 1- comme je te l'ai deja dit, le fichier js et le fichier css sont appeles dans le head, regarde la source que je t'ai filee

2- ces 2 fichiers, tu les pompes direct sur la page d'alsacreations que tu as fourni dans ton 1er post, il ya 2 liens pour les recup, donc tu te met au desus du lien puis tu fais "enregistrer sous". tu les met dans un nouveau dossier vide sur ton buro. 3- il faut renommer le fichier .css car de base quand tu le telecharges, il n'a pas le bon nom, donc renomme le en popup.css 4- ensuite tu copies colle le code ci-dessus dans une page vierge dans le dossier que tu as cree et tu sauvegardes cette page comme test.html par exemple. 5- normalement maintenant tu as 3 fichiers dans le dossier, le .html qui est ta page de code, le .css qui contient les donnees de style, le .js qui contient le code pour l'affichage des popups. 6- sauvegardes tout. 7- va dans ton dossier et double clic sur le fichier .html et ca marche ! tu vas voir 2 liens, mets toi au dessus et c regle. EXPLICATION DU POURQUOI DU COMMENT : alors si tu regardes dans le code, dans le body pour etre precis, t'as ca :

Code html

1. <a href="#pop1" class="pop">Lien (ouvre pop1)</a><br /><a href="#pop2" class="pop">Lien (ouvre pop2)</a>

ca ce sont les liens que tu dois creer dans ta page pour voir le popup s'afficher.
les noms "pop1" et "pop2" correspondent aux 2 divs que tu vois en dessous dans le body. au depart, ils sont caches, et c'est le survol de ces liens qui affiche le contenu du div correspondant.
ce qui veut dire que toi de ton cote, tu mets ce que tu veux dans les divs et tu peux en creer autant que tu veux, aucune limitation.

voila !

tu piges ?