Image avec liste déroulante cliquable

**Marc31** · 15/07/2014, 20h27

Bonjour,

J'aimerais savoir comment on fait pour avoir une image et lorsque l'on passe la souris dessus, il y a une liste deroulante qui apparaît et qui comporte plusieurs choix cliquable?
Si quelqu'un pouvait m'aider, merci.

Bonne soirée

**NoSmoking** · 15/07/2014, 22h37

Bonjour,

J'aimerais savoir comment on fait pour avoir une image...

si mes souvenirs sont bons il suffit d'être bien sage

...et lorsque l'on passe la souris dessus...

événement onmouseover (javascript) :hover (CSS)

...il y a une liste deroulante qui apparaît...

passage du display de la liste de display:none à un display:block par exemple

...et qui comporte plusieurs choix cliquable?

ça c'est du HTML avec des INPUTs type="checkbox" ou type="radio" suivant le besoin.

**Marc31** · 16/07/2014, 09h25

Bon ça va j'ai étais sage et merci pour le début de solution.

**NoSmoking** · 16/07/2014, 19h44

Comme tu as été sage, voici une façon de faire...en CSS

Code html :

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

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
37
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>:hover sur IMG</title>
<style>
div{
  border:1px solid #CCF;
  cursor:pointer;
  width:7em;
}
div img{
  margin:0.25em;
}
div ul{
  display:none;
}
div:hover ul{
  display:block;
}
div:hover{
  width:200px;
}
</style>
<script>
</script>
</head>
<body>
<div>
  <img src="http://club.developpez.com/webdesign/Developpez.com/Boutons/bouton_logo_dev4.gif" alt="">
  <ul>
    <li><input type="checkbox" value="check_1">Check #1</li>
    <li><input type="checkbox" value="check_2">Check #2</li>
  </ul>
</div>
</body>
</html>

tu noteras quand même que le :hover s'applique sur la DIV conteneur et non sur l'IMG

Image avec liste déroulante cliquable

JavaScript

Vue hybride

Discussions similaires

Partager

Partager