Image et Maparea

Version imprimable

Image et Maparea

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:

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:

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 ! :ccool:
[/EDIT]

29/10/2011, 20h30
SpaceFrog

Tu as du rater ceci lors de tes recherches préliminaires ...http://www.developpez.net/forums/d96...-larea-survol/
29/10/2011, 20h33
DropMsZ

Merci, je vais essayer de comprendre ce tuto ! :ccool:
29/10/2011, 23h16
DropMsZ

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?
30/10/2011, 09h43
SpaceFrog

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 !
30/10/2011, 16h12
DropMsZ

Ok merci ! Je vais essayer cela :ccool:
30/10/2011, 19h16
DropMsZ

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 ? :oops: 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. :(

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

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
<!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>