Mettre une bordure sur une image lors d'un click

Version imprimable

28/02/2012, 18h00
absot

Mettre une bordure sur une image lors d'un click

Bonjour, j'ai dans ma page html,j'ai un formulaire qui comporte 2 images et un bouton submit qui est également une image.

Lorsque je clique sur l'une des deux images, je souhaiterais que celle-ci soit entouré d'une bordure et si jamais je clique par la suite sur la deuxième, c'est la deuxième qui a une bordure et plus la première.

Une fois que je valide mon formulaire, je souhaite savoir qu'elle image a été cliquée (obligatoirement une et une seule).

Ma première question est, comment mettre une bordure sur mon image lorsque je clique dessus? avec du javascript?

Une fois que j'ai cliqué sur mon image et valider mon formulaire, comment puis-je savoir sur quelle image j'ai cliqué?

Ca ressemble à des boutons radio mais ce sont des images.. :/
28/02/2012, 19h19
NoSmoking

Bonjour,
en HTML pur cela va être très dur de gérer tout cela, il te faut avoir recours au javascript.

Dans le principe sur le click de tes images
- tu modifies le style des images
- tu initialises un champ hidden qui possédant un NAME sera transmis

J'ai réussi à faire ce que je voulais. :)

Je mets le code pour ceux qui voudrait faire la même chose que moi.

index.php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
<form method="POST" action="traitement.php">
 
<input type="hidden" name="vote" id="vote" value="0">
 
<a href="#" onClick="changeMaillot('1');"><img id="maillot_fr" src="images/maillot_fr.png" width="200px" /></a>
 
<a href="#" onClick="changeMaillot('2');"><img id="maillot_uk" src="images/maillot_uk.png" width="200px" /></a>
 
<input border=0 src="images/valider.png" type=image value=submit align="middle" >
 
</form>

traitement.php

Code:

1
2
 
$vote = $_POST['vote'];

javascript.js

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
function changeMaillot(maillot)
{
	if(maillot == 1){
		$('#maillot_fr').css('border','1px solid black');
		$('#maillot_uk').css('border','1px solid white');
		document.getElementById('vote').value = 1;
	}else if(maillot == 2){
		$('#maillot_uk').css('border','1px solid black');
		$('#maillot_fr').css('border','1px solid white');
		document.getElementById('vote').value = 2;
	}
}

style.css

Code:

1
2
3
4
5
6
7
8
 
#maillot_fr, #maillot_uk
{
	border:1px solid white;
	border-radius:10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
}

finalement c'est pour jQuery que tu as opté, pourquoi pas!

Dans ce cas que fait un document.getElementById('vote').value = 1; dans ton code, tant qu'a utiliser jQuery autant le faire entièrement ;).

Tu pourrais par la même dissocier le HTML du JS en utilisant l'initialisation au chargement de la page, le fameux

Code:

1
2
3
$(function(){
  // le code à exécuté ici
};

Ton code présente un soucis, le onclick sur la balise A n'empêche pas l'exécution de l'action par défaut des liens, pas trop grave dans ton cas d'ailleurs, il te faudrait retourner false dans la fonction exécutée sur le onclick.

Une dernière chose, concenant le style="200px" dans tes images, autant prendre l'habitude de le mettre dans la partie STYLE.

Ci dessous ce que cela aurait pu donner

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html>
<html>
<head>
<style>
a img{
  width : 200px;
  border:1px solid white;
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
  border-radius:10px;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(function(){
  // récup des images concernées
  var oImage = $('a > img');
  // pour chaque éléments de la liste
  $.each( oImage, function( /*ind, value*/){
    // affectation de la fonction sur le onclick du parent
    $(this).parent().on( 'click', function(){
      // probléme de scope sur le this dans le each
      var oParent = this;
      // on traite toutes les images de la liste
      $.each( oImage, function( ind, value){
        // le parent est le lien cliqué ?
        if( this.parentNode === oParent){
          // bordure en noir
          $(this).css('border','1px solid black');
          // mise à jour champ caché
          $('#vote').val( ind+1);
        }
        else{
          // sinon bordure en blanc
          $(this).css('border','1px solid white');
        }
      });
      // évite l'action par défaut de la balise A
      return false;
    });
  });
});
</script>
</head>
<body>
<form method="POST" action="traitement.php">
  <input type="hidden" name="vote" id="vote" value="0">
  <a href="#"><img src="images/maillot_fr.png"></a>
  <a href="#"><img src="images/maillot_ku.png"></a>
  <input border=0 src="images/valider.png" type=image value=submit align="middle">
</form>
</body>
</html>