Système d'Help sur un site

Version imprimable

06/08/2012, 16h31
_Major_

Système d'Help sur un site

Bonjour,
Dans le cadre de mon stage, je dois réaliser un système d'help sur un site.
Il faudra donc, que dès que l'on clique sur le bouton "Help", chaque zones sur la page internet que je devrais décrire change de couleur, et ensuite affiche une sorte de bulle ou autre, avec la description de la zone en question.

Donc on m'a demandé d'apprendre le Javascript (je vous avouerais que je n'ai eut que 2 jours pour l'apprendre (donc je ne connais que la théorie.)
Est-ce que vous pourriez me donner des conseils ou m'indiquer.

pour le moment :
-bouton Help fait.
-évènement quand on click sur le bouton.
-tableau avec (id, side, width, weight).

Il me manque :
-comment délimiter les zones que je devrais griser ou changer de couleur.(avec findpos()?)
-comment afficher un bulle ou un carré avec la description par dessus la zone grisé.
-Et encore d'autres choses auxquels je n'ai pas pensé étant novice dans ce domaine.

Et si je poste sur ce forum c'est parce que je suis assez pressé en sachant que mon entreprise ma donné un faible délai pour réaliser ce mini-projet.

Merci d'avance.;)

Arf j'ai du mal a concevoir la chose...
Je n'ai jamais fais de web... et là on me demande de l'apprendre en quelques jours. Vous comprendrez pourquoi je suis un peu perdu.
Si on me demandait de le faire en C, je le ferais en 2 min.

Et le pire, c'est que je sais que c'est simple, mais comme je ne connais pas assez le HTML, CSS, JavaScript et jQuery, j'ai du mal !

Donc je vais faire comme d'habitude et apprendre sur le tas (ça commence a rentrer quand même... ).

Donc les étapes qu'il faudrait faire :
- créer un tableau pour chaque zone.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 var zones = new Array(); var zones = [ { id : "zone 1", help : "HTML", side : "right", width : "300", weight : "200" }, { id : "zone 2", help : "HTML", side : "left", width : "250", weight : "150" }];
- ensuite, créer un bouton Help :

Code:

<input id = button type="button" value="Help" onclick="Humm no lo se :( "

>

Aprés value, je dois mettre quoi ? (je peux mettre une fonction ?)
Par exemple une fonction qui grise toutes zones du tableau et qui ensuite affiche les bulle d'aide ?

- Et plus tard je récupère l'id, width, et le weight pour délimiter la zone que j'aurai à griser (que je mettrai dans la fonction dont je parle plus haut).

Est-ce que je suis sur la bonne voie ou pas du tout ?

ps: voici un google doc qui présente a peu prés ce que je dois faire.
https://docs.google.com/drawings/d/1...ooLUEgJiM/edit

Merci a Vermine pour l'edit, j'avais oublié les balises Thx

07/08/2012, 15h59
NoSmoking

Bonjour,

Citation:

Aprés value, je dois mettre quoi ? (je peux mettre une fonction ?)

l'action est à mettre sur le onclick.

Tant que l'on y est utilise un BUTTON, cette balise à été conçue pour cela

Code:

<button onclick="fctHelp();">Help!</button>
07/08/2012, 16h44
_Major_

Merci pour ta réponse "NoSmoking"

Ok je vais utiliser ce que tu m'as conseillé, merci
et je vais essayer de continuer a avancer jusqu'a reussir :aie:
07/08/2012, 16h51
NoSmoking

une question a passage, tu as un bouton Help dans chaque zone ou un global?
tiens une deuxième, tu affiches toutes les aides ou uniquement une sur une zone particulière mais qui peut changer?
07/08/2012, 16h56
_Major_

c'est vrai que je ne l'ai pas précisé.
Donc il y aurait un bouton Help Global.
Une fois le click effectué, toutes les zones sont grisées et décrites en même temps.
07/08/2012, 23h49
NoSmoking

typiquement donc il s'agit d'afficher via un display:block des éléments cachés, DIV par exemple, via un display:none à l'appui sur le bouton.

Major, est-ce que tu as la main sur le code HTML ? parce que si tu peux faire en sorte que tes zones correspondent à des éléments HTML, ça rendrait à la fois la structure de la page meilleure, et ta vie plus facile :mrgreen: Tu n'aurais plus besoin de findpos, mais seulement de l'évènement jQuery hover et de quelques classes CSS bien placées.

Un exemple complet :

Code:

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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!DOCTYPE html>
<html lang=fr>
<head>
	<meta charset=utf-8>
	<title>Système d’aide</title>
	<style>
        
        body {
                margin: 0;
                padding: 1px;
                position: relative;
        }
        
        #content {
                width: 400px;
                height: 300px;
                background: #dfa;
                border: solid thin #9c5;
                margin: 1em;
                padding: 1ex 1em;
        }
        
        #button {
                position: absolute;
                top: 1em;
                right: 1em;
                color: #666;
                text-decoration: none;
                border: solid thin #666;
                background: #eee;
                padding: 0.5ex 1em;
        }
        
        #button:hover {
                color: #238;
                border-color: #238;
                background: #def;
        }
        
        p.balloon {
                display: none;
                position: absolute;
                margin: 0;
                padding: 1ex 1em;
                background: #feb;
                border: solid thin #eb5;
        }
        
        div.zone {
                display: none;
                position: absolute;
                background: black;
                cursor: help;
        }
        
        #zone1 {
                width: 200px;
                height: 400px;
                top: 0;
                left: 0;
        }
        #zone2 {
                width: 500px;
                height: 150px;
                top: 0;
                left: 203px;
        }
        
        #balloon1 {
                top: 10px;
                left: 10px;
        }
        #balloon2 {
                top: 10px;
                left: 213px;
        }
        
        </style>
	<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
	<script>
        
        $(document).ready(function(){
                $("#button").toggle(function( event ){
                        event.preventDefault();
                        $("div.zone").fadeTo("slow", 0.33);
                }, function( event ){
                        event.preventDefault();
                        $("div.zone").fadeOut();
                });
 
                for (var i = 1; i <= 2; i++) {
                        (function( i ){
                                $("#zone" + i).hover(function(){
                                        $("#balloon" + i).fadeIn("fast");
                                }, function(){
                                        $("#balloon" + i).fadeOut("fast");
                                });
                        })(i);
                }
        });
        
        </script>
</head>
<body>
 
<div id="content">Ici, le contenu de la page.</div>
 
<div class="zone" id="zone1"></div>
<div class="zone" id="zone2"></div>
<p class="balloon" id="balloon1">Bulle d’aide 1</p>
<p class="balloon" id="balloon2">Bulle d’aide 2</p>
<a href="#" id="button" title="afficher/masquer l’aide">Aide</a>
 
</body>
</html>

Bon j'avoue que j'ai eu la flemme de mettre des commentaires (ouuuuh c'est mal !), alors n'hésite pas à poser plein de questions ;)