Système checkbox et image de validation

**drag0vich** · 13/11/2012, 16h31

Bonjour,

Je possède tout d'abord un faible niveau en html et php, les bases pour ainsi dire.

Je voudrais créer sur une page une petite partie possédant une checkbox avec à son côté une image.

Lorsque la checkbox n'est pas cochée l'image à côté possède le statut NON, une fois la checkbox cochée l'image change avec un statut OUI.

Voici deux images pour résumer le tout

Merci pour votre aide

**Bovino** · 13/11/2012, 16h39

Ce n'est pas possible en HTML. Il faudra passer par JavaScript.

Pour rappel, HTML n'est pas un langage de programmation mais un langage de structuration de données.

**drag0vich** · 13/11/2012, 16h45

Aye,

Effectivement le javascript, tout autre chose, auriez-vous un début de piste ?

**Bovino** · 13/11/2012, 16h48

Gérer l'événement onclick des checkbox.
Vérifier l'état de la checkbox.
Mettre à jour l'attribut src de l'image en fonction de l'état.

**NoSmoking** · 13/11/2012, 18h17

Bonjour,
c'est jouable en CSS3 mais...bon, un exemple quand même

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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>[CSS3 Checked]</title>
<style>
#img_1{
  display:inline-block;
}
#img_2{
  display:none;
}
#check:checked + #on_check > #img_1 {
  display:none;
}
#check:checked + #on_check > #img_2 {
  display:inline-block;
}
</style>
</head>
<body>
<div id="page">
  <input type="checkbox" id="check" name="check">
  <label for="check" id="on_check">
    <img id="img_1" src="http://www.developpez.com/images/logos/firefox.gif">
    <img id="img_2" src="http://www.developpez.com/images/logos/chrome2.gif">
  </label>
</div>
</body>
</html>

Système checkbox et image de validation

HTML

Discussions similaires

Partager

Partager