div afficher/masquer sur image interactive

div afficher/masquer sur image interactive - HTML/CSS - Programmation

Marsh Posté le 14-12-2009 à 22:04:10    

Bonsoir,
 
J'ai une image interactive : avec des zones area.
Lorsque la souris passe sur une zone (mouseover), je souhaite afficher un <div> avec des liens sous forme de liste.
Un peu comme ce que propose le site du Cismef sur le titre " Accès par type de ressources" : http://www.cismef.org/
 
J'ai trouvé des scripts en javascript mais aucun qui concerne une image interactive :(
 
Je suis preneuse de toute idée.
 
Merci,
 
Salsalera69.

Reply

Marsh Posté le 14-12-2009 à 22:04:10   

Reply

Marsh Posté le 16-12-2009 à 17:37:28    

salsalera69 a écrit :

Bonsoir,
 
J'ai une image interactive : avec des zones area.
Lorsque la souris passe sur une zone (mouseover), je souhaite afficher un <div> avec des liens sous forme de liste.
Un peu comme ce que propose le site du Cismef sur le titre " Accès par type de ressources" : http://www.cismef.org/
 
J'ai trouvé des scripts en javascript mais aucun qui concerne une image interactive :(
 
Je suis preneuse de toute idée.
 
Merci,
 
Salsalera69.


 
Salut!
 
Je connais pas bien le javascript, qui serait en effet peut être plus performant dans ce cas là.  
 
Par contre, je pense que tu peux jouer avec des propriétés css.
 
en html

Code :
  1. <div class="source">
  2.     texte sur lequel il faut passer la souris
  3. </div>
  4. <div class="liens">
  5.   <ul>
  6.     <li>liens sous forme de liste</li>
  7.     <li>liens sous forme de liste</li>
  8.     <li>liens sous forme de liste</li>
  9.     <li>liens sous forme de liste</li>
  10.   </ul>
  11. </div>


 
La css associée :  

Code :
  1. .liens
  2. {
  3.     display: none; /* va cacher ta div */
  4. }
  5. .liens:hover
  6. {
  7.     display: block; /* va la div en passant la souris devant */
  8. }


 
Après, il te suffit de bien régler la feuille de style pour faire apparaitre ta div là ou tu veux. À priori, si tu as plusieurs "sources" qui affichent chacune leurs "liens" au même endroit, tu peux jouer à coup de position: absolute et de z-index.


Message édité par lautrejojo le 17-12-2009 à 11:39:05

---------------
Question sur la programmation ? DevWeb it!
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed