Discussion :

[mariepierre]

Bonjour,

Dans la page centrale de mon site, j'ai 3 blocs, 1 grand en haut et 2 dessous faisant chacun la moitié du grand.

J'ai un plan de maison en jpg sur un bloc bas et j'aimerais qu'au survol de chaque pièce (zone que j'aurai définie), une image apparaisse dans le bloc du haut.

Je pense qu'il doit y avoir possibilité de faire ça en javascript mais je ne sais pas du tout comment m'y prendre. Quelqu'un pourrait-il m'aider ? Me donner une piste et me guider après...


Je vous remercie d'avance pour votre aide

[saymoneu]

Bonjour,

C'est tout à fait faisable.
Il faut placer toutes les images des différentes pièces dans le bloc haut, en absolute, et leur appliquer un "display:none;".
Ensuite, définir des zones sur votre plan, leur mettre un id, et une classe commune (exemple: classe .piece).

Pour finir, en javascript, définir une action au survol d'un élément de classe piece, récupérer son id ('salon' par exemple) et on peut appliquer le "display:block" sur l'image avec un id similaire "salon.jpg" pour suivre l'exemple.

Ce qui donnerait quelque chose comme ça (je l'ai fait en jquery, je ne suis pas assez sûr de la syntaxe javascript):

Code html :

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

1
2
3
4
5
6
7
8
9
<div id="haut">
    <img src="img/salon.jpg" id="imagesalon"/>
    <img src="img/cuisine.jpg" id="imagecuisine"/>
</div>
 
<div id="plan">
    <div class="piece" id="salon"></div>
    <div class="piece" id="cuisine"></div>
</div>

Code css :

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

1
2
3
4
5
6
7
8
9
#haut{
    position:relative;
    height:300px;
    width:300px;
}
#haut img{
    position:absolute;
    display:none;
}

Code jquery :

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

1
2
3
4
5
6
$(document).ready(function(){
    $(".piece").hover(function(){
         var id=$(this).attr("id");
         $("img#image"+id).css("display","block");
    });
});

J'espère que ça pourra vous aider ...