Image avec liste déroulante cliquable

Version imprimable

15/07/2014, 20h27
Marc31

Image avec liste déroulante cliquable

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
15/07/2014, 22h37
NoSmoking

Bonjour,

Citation:

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

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

Citation:

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

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

Citation:

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

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

Citation:

...et qui comporte plusieurs choix cliquable?

ça c'est du HTML avec des INPUTs type="checkbox" ou type="radio" suivant le besoin.
16/07/2014, 09h25
Marc31

Image avec liste deroulante cliquable

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

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

Code:

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