Image et Maparea

DropMsZ · 29/10/2011, 19h42

Bonjour,

J'ai une image avec une maison qui comporte 4 fenêtres. Je souhaiterais pouvoir allumer les différentes pièces de cette maison en cliquant sur les fenêtres. (je débute en Javascript)

J'ai déjà une fonction pour "allumer" une de mes fenêtres. Cependant, j'aimerais pouvoir les allumer une par une puis les éteindre une par une.

Actuellement, ma fenêtre en haut à gauche s'allume puis s'éteint et c'est tout. Je ne peux plus la rallumer. Comment faire pour pouvoir l'allumer et l'éteindre indéfiniment? Puis, suffit-t-il d'appliquer l'événement OnClick pour que cela s'applique à toutes les fenêtres?

Voici ma fonction :

Code :

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

1
2
3
4
5
6
 
function swapPic(zone,nr){
	var pic=document.getElementById('crofthouse')
	pic.src='images/'+nr+'.jpg'
	zone.onclick=function(){pic.src='images/0000.jpg'}
}

et ma div avec mon image et mes zones cliquables :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
<div id="myImage" style=" width:auto; height:auto;">
 <img src="images/0000.jpg" alt="0000" usemap="#housemap" id="crofthouse" style="border:1px solid red;" title=" All Off " />
   <map id="mymap" name="housemap">
     <area shape="rect" coords="206,139,225,167" title="Top Left" onClick="swapPic(this,1000)">
     <area shape="rect" coords="355,138,374,166" title="Top Right" >
     <area shape="rect" coords="206,194,225,227" title="Bottom Left" >
     <area shape="rect" coords="353,195,374,227" title="Bottom Right" >
     <area shape="rect" coords="278,195,300,242" title="The Door" >
   </map>
 </div>

Pouvez-vous m'aider? Je cherche une démarche à suivre et je ne veux pas de réponse en code, simplement une voie qui peut me conduire à la solution !

[EDIT]
Petite précision :
J'ai déjà nommé toutes mes images. J'ai tous les états possibles soit 16images.
Si la fenêtre en haut à gauche est allumé, mon image est noté comme ceci : 1000.
1 => fenêtre en haut à gauche allumée
0 => fenêtre en haut a droite éteinte
0 => fenêtre en bas à gauche éteinte
0 => fenêtres en bas à droite éteinte

Et, ainsi de suite, je pense que vous avez compris l'idée !

[/EDIT]

SpaceFrog · 29/10/2011, 20h30

Tu as du rater ceci lors de tes recherches préliminaires ...http://www.developpez.net/forums/d96...-larea-survol/

DropMsZ · 29/10/2011, 20h33

Merci, je vais essayer de comprendre ce tuto !

DropMsZ · 29/10/2011, 23h16

Alors, j'ai compris le tuto mais le soucis c'est que je ne peux pas allumer 2 fenêtres en même temps donc ce n'est pas la finalité que je désire. Comment faire pour garder l'état précédent des différentes régions cliquables?

SpaceFrog · 30/10/2011, 09h43

Bien sur que si ...
Les gifs étant transparents, il te suffit de modifier la façon dont les partie allumées s'affichent et par exemple stocker leur été (allumé ou éteint) dans un array que tu parcourres au click d'un area !

DropMsZ · 30/10/2011, 16h12

Ok merci ! Je vais essayer cela

DropMsZ · 30/10/2011, 19h16

Alors, j'ai créé un tableau en dehors de ma fonction swapPic mais je ne sais pas comment m'y prendre pour stocker l'état de mes images. Est-ce que quelqu'un peut m'expliquer la façon d'y arriver avec un exemple simple ?

Cela me permettrait de comprendre plus facilement comment adapter mon code. Car j'ai beau chercher des exemples sur le net je n'y comprends rien.

NoSmoking · 30/10/2011, 22h54

Bonsoir,
un petit exemple d'une façon de faire

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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>[...]</title>
<style type="text/css">
button {
  width : 100px;
  margin : 20px;
}
</style>
<script type="text/javascript">
var etatClick = {
 'top_left'     : false,
 'top_right'    : false,
 'bottom_left'  : false,
 'bottom_right' : false,
 'door'         : false
};
function show( obj){
  etatClick[obj.value] = true;
  var txt = "";
  for( var i in etatClick){
    txt += i +':' +etatClick[i] + '\n';
  }
  alert( txt);
}
</script>
</head>
<body>
<button onclick="show(this);" value="top_left">top_left</button>
<button onclick="show(this);" value="top_right">top_right</button><br>
<button onclick="show(this);" value="bottom_left">bottom_left</button>
<button onclick="show(this);" value="bottom_right">bottom_right</button>
</body>
</html>

29/10/2011, 20h30	#2
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 045 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 045 Points : 45 149 Points : 45 149	Tu as du rater ceci lors de tes recherches préliminaires ...http://www.developpez.net/forums/d96...-larea-survol/ __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

30/10/2011, 09h43	#5
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 045 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 045 Points : 45 149 Points : 45 149	Bien sur que si ... Les gifs étant transparents, il te suffit de modifier la façon dont les partie allumées s'affichent et par exemple stocker leur été (allumé ou éteint) dans un array que tu parcourres au click d'un area ! __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

29/10/2011, 20h33	#3
DropMsZ Invité de passage Inscription : octobre 2011 Messages : 5 Détails du profil Informations personnelles : Sexe : Informations forums : Inscription : octobre 2011 Messages : 5 Points : 0 Points : 0	Merci, je vais essayer de comprendre ce tuto !
	00

29/10/2011, 23h16	#4
DropMsZ Invité de passage Inscription : octobre 2011 Messages : 5 Détails du profil Informations personnelles : Sexe : Informations forums : Inscription : octobre 2011 Messages : 5 Points : 0 Points : 0	Alors, j'ai compris le tuto mais le soucis c'est que je ne peux pas allumer 2 fenêtres en même temps donc ce n'est pas la finalité que je désire. Comment faire pour garder l'état précédent des différentes régions cliquables?
	00

30/10/2011, 16h12	#6
DropMsZ Invité de passage Inscription : octobre 2011 Messages : 5 Détails du profil Informations personnelles : Sexe : Informations forums : Inscription : octobre 2011 Messages : 5 Points : 0 Points : 0	Ok merci ! Je vais essayer cela
	00

30/10/2011, 19h16	#7
DropMsZ Invité de passage Inscription : octobre 2011 Messages : 5 Détails du profil Informations personnelles : Sexe : Informations forums : Inscription : octobre 2011 Messages : 5 Points : 0 Points : 0	Alors, j'ai créé un tableau en dehors de ma fonction swapPic mais je ne sais pas comment m'y prendre pour stocker l'état de mes images. Est-ce que quelqu'un peut m'expliquer la façon d'y arriver avec un exemple simple ? Cela me permettrait de comprendre plus facilement comment adapter mon code. Car j'ai beau chercher des exemples sur le net je n'y comprends rien.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email