Discussion :

[CrasherSEP]

Bonjour,

J'aimerais créer un jeu des 7 erreurs en Javascript.

Pourriez-vous m'aider ?

Ce que j'aimerais, c'est :

• 2 images
• Pouvoir cliquer sur des zones (les 7 erreurs), si la zone est bonne, une croix apparaît, autrement rien...
• Evidemment, il ne faut pas que lorsque la souris est sur une des bonnes zones, la flèche change de forme... :-)
• Un petit message comme quoi les 7 erreurs ont étés trouvées.

Merci d'avance pour vos lumières et votre future code :-)

[SpaceFrog]

regarde du coté la balise img et de map et de area

[CrasherSEP]

Bonjour,

Je sais effectivement mettre des zones cliquables [AREA] sur une image, mais mes problèmes sont les suivants :

• faire que la souris ne change pas au survol de la zone,
• faire apparaître une croix, un rond après clic, sur une des zones cliquables,
• faire apparaître une message, comme quoi toutes les erreurs ont étés trouvées.

:-)

[SpaceFrog]

1) css

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

area {cursor:none;}

2) il te faut récupuérer les coordonnées de l'area et placer une image de croix en zindex supérieur et en position absolute

3)a chaque erreur trouvé tu incrémentes une variable globale et tu vérifies si elle == 7

[CrasherSEP]

Etant très mauvais, voir nul... si ce n'est pas trop demander... serait-il possible d'avoir un exemple de code (page html) avec deux AREA par exemple...? :-/

[SpaceFrog]

ben essaye déja ça

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<map name="mymap">
         <area href="#" shape="circle" coords="6, 11, 2" onclick="alert(this.coords)" >
</map>
<img border="0" src="[source image]" usemap="#mymap">

[CrasherSEP]

Le code fonctionne, et j'ai une fenêtre qui apparaît au clic avec les coordonnées de la zone, mais :

• la souris, change au survol de l'area,
• comment faire apparaître une croix (image) au clic sur la zone,
• ne faire apparaître la fenêtre qu'après la 7ième erreurs trouvées.

:-)

EDIT :

J'ai trouvé pour la souris au survol : style="cursor:default", à la fin de la ligne AREA

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<area href="#" shape="circle" coords="6, 11, 2" onclick="alert(this.coords)" style="cursor:default" >

[SpaceFrog]

1) css
area {cursor:none;}

j'ai déja donné les pistes ...
mais vu que ça n'a pas l'air de t'émouvoir plus que ça, je vais m'abstenir ...

Bonne continuation

[CrasherSEP]

Ok... merci :-/

[SpaceFrog]

comment faire apparaître une croix (image) au clic sur la zone,
ne faire apparaître la fenêtre qu'après la 7ième erreurs trouvées.

2) il te faut récupuérer les coordonnées de l'area et placer une image de croix en zindex supérieur et en position absolute

ne faire apparaître la fenêtre qu'après la 7ième erreurs trouvées.

3)a chaque erreur trouvé tu incrémentes une variable globale et tu vérifies si elle == 7

[CrasherSEP]

Je sais, je sais, mais je ne suis pas programmeur..., juste une personne qui essaye de faire un petit jeu des 7 erreurs... ;-)

[SpaceFrog]

Alors pose les questions pour avancer ...
N'attend pas que l'on te file le code tout fait ...

Demande plutot que l'on éclaircisse les points que tu n'as pas compris
procéde par étape ...

si tu as déja résolu le point des areas reactifs, il me semble que la prochaine étape serait faire apparaitre une image lors du click sur un area

[CrasherSEP]

Juste, je suis désolé ;-)

Ps : C'est gentil de continuer à m'aider :-)

[Invité]

C'est somme toute comme un enfant qui aurait un livre et qui demanderait a des lettrés de lui lire les paragraphes parce que ca le fait chier d'apprendre a lire et qu'il se complet allegrement dans son absence d'effort.

[CrasherSEP]

Heee... non, je ne demande pas un code complet avec les 7 erreurs etc...

Juste de l'aide visuel (morceau de code)... :-)

Comme pour la prochaine étape, ok, je doit récupérer les coordonnées, comment ? je dois insérer une image en zindex au clic d'une zone, comment ? Encore une fois, je ne suis pas programmeur...

[Darkyl]

A croire que vous vous êtes passer le mot : topic

Tu es sûr que c'est pas pour un exam?

[CrasherSEP]

Heeee, non, j'ai 39 ans et les exam. cela fait longtemps que... ;-)

J'ai juste un site pour les enfants (Sclérose en Plaques): http://www.sep-pas-sorcier.be/

Et j'aimerais y insérer un jeu des 7 erreurs... :-)

[Darkyl]

il est mignon tout plein ton site.
Tu es sûr que c'est toi qui l'as fait, parce qu'il est plus dur à faire qu'un jeu des 7 erreurs...
A moins que tu l'ai fait comme tu veux faire ton jeu, avec un code déjà tout fait.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 je dois insérer une image en zindex au clic d'une zone, comment ?

Non, tu ne dois pas l'insérer, pas la peine de t'embêter non plus... Tes images d'erreurs trouvés sont déjà créer dans ta page mais elles sont invisibles (display=none), tu les rends juste visible (display=true).

Si tu n'es pas informaticien, trouves un jeu déjà tout fait, passes une annonce de recrutement dans le forum projet (cela peut intéresser un programmeur d'avoir une vitrine comme ton site), mais n'essaie pas de faire ce jeu, car visiblement tu n'as pas envie d'apprendre...sinon, avec le site que tu as 'codé', cela serait un jeu d'enfant

[SpaceFrog]

Heu ben fallait commencer par là ...

Je ne peux pas ne pas participer à la bonne cause ...;

Bon alors tu as tres deux images
l'une avec le map

et une autre image, celle de la croix cachée sur la page

sur le click des areas, le principe est d'appeler une fonction en lui passant le top et left de l'area , de cloner l'image de lui attibuer le point origine de l'image augmenté de coordonnées recupérées:

Voici un bout de 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
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nouvelle page 1</title>
<style type="text/css">
#croix {
position:absolute;
z-index:100;
style:display:none;
}
 
</style>
 
<script type="text/javascript">
function croix(errtop,errleft){
trouve=document.getElementById('croix').cloneNode()
originX=document.getElemetnById('modele').offsetLeft;
originY=document.getElemetnById('modele').offsetTop;
trouve.style.top=origineY+errtop"px";
trouve.style.left=origineX+errleft+"px";
trouve.style.display=block
)
 
 
 
</script>
</head>
 
<body>
<img src="croix.png" id="croix" />
 
<img id="modele" src="...." />
<img id="copie" src="...." />
 
 
</body>
 
</html>

ce n'est qu'une piste, à toi de compléter, et n'hesite pas a poser des questions ...
Ta prochaine mission est de trouver comment recupérer le top et left de l'area ( de préférence circulaire ) pour les passer en para mètre à la fonction sur le onclick de l'area


[edit]
à la reflexion une seul image peut suffire ...
as tu une seule ou deux images poru les différences, je veux dire un modèle et la copie? ou les deux sont ils regourpés en une seul image?
as tu un schéma de ce que tu souhaites ?

[CrasherSEP]

Darkyl : cool... je n'ai JAMAIS dit que j'avais fait le site, je suis simplement l'administrateur...