Système checkbox et image de validation

Version imprimable

13/11/2012, 16h31
drag0vich

Système checkbox et image de validation

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 :)

http://nsa31.casimages.com/img/2012/...3036579478.png

http://nsa32.casimages.com/img/2012/...3106610004.png

Merci pour votre aide :)
13/11/2012, 16h39
Bovino

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.
13/11/2012, 16h45
drag0vich

Aye,

Effectivement le javascript, tout autre chose, auriez-vous un début de piste ?
13/11/2012, 16h48
Bovino
- 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.

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

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
<!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>