Discussion :

[DropMsZ]

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]

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

[DropMsZ]

Merci, je vais essayer de comprendre ce tuto !

[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?

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

[DropMsZ]

Ok merci ! Je vais essayer cela