Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1577 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  div afficher/masquer sur image interactive

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

div afficher/masquer sur image interactive

n°1950302
salsalera6​9
Posté le 14-12-2009 à 22:04:10  profilanswer
 

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.

mood
Publicité
Posté le 14-12-2009 à 22:04:10  profilanswer
 

n°1950985
lautrejojo
Posté le 16-12-2009 à 17:37:28  profilanswer
 

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!

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  div afficher/masquer sur image interactive

 

Sujets relatifs
Modifier et compiler code sourceProblème de redimensionnement image en javascript
image survolée qui s'affiche dans 2 div différenteshtml et object image dans le lecteur avant visualisation
& Php > bordure speciale à une image, perdu dans le codeBeginner > Aligner un texte à droite d'une image !?
inserer un lien dans une imageInsérer une image dans un bouton ! Pb de taille
afficher les combinaisons de chaine de caractèresstockage et affichage d'une image dans une variable php
Plus de sujets relatifs à : div afficher/masquer sur image interactive


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR