Bonsoir mon ami,
Voici une solution utilisant JQuery et l'attribut "data" du HTML5:
soluce.zip
J'explique :
voici le code complet :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Jquery Plugin - Menu déroulant</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<form method="post" action="Send.php">
<p align="center">Commentaire : <input type='text' size='100' name='Comment' id="field"></p>
<p align="center"><input type="submit" value="Confirmer"></p>
<p align="center"><input type="button" value="Annuler" onClick="window.location.href='http://xxx.php'"></p>
</form>
<div class="btn">
<div class="btn-1" data-message="je suis le texte du premier bouton"><img src="aaa.png" /></div>
<div class="btn-1" data-message="je suis le texte du deuxième bouton"><img src="bbb.png" /></div>
</div>
<script>
$(document).ready(function() {
var field = $("#field");
$(".btn-1").click(function() {
field.val( $(this).data('message') );
});
$(".btn-2").click(function() {
field.val( $(this).data('message') );
});
});
</script>
</body>
</html>
dans le code précédent j'ai ajouter un "id" nommé "field" au champ edit principale pour simplement pouvoir l'identifier:
...
<p align="center">Commentaire : <input type='text' size='100' name='Comment' id="field"></p>
...
puis j'ai ajouter deux images dans des "div" j'ai utiliser les div pour pouvoir stocké des donnée avec l'attribut "data" du html5 :
...
<div class="btn">
<div class="btn-1" data-message="je suis le texte du premier bouton"><img src="aaa.png" /></div>
<div class="btn-1" data-message="je suis le texte du deuxième bouton"><img src="bbb.png" /></div>
</div>
...
la "div" principale qui englobe les deux "div" des image est utilisé pour le style tu peut la supprimer ou l'adapté a ton design.
maintenant il faut faire appel a JQuery dans le "head" du html :
...
<script type="text/javascript" src="jquery.js"></script>
</head>
...
maintenant venons au JavaScript (JQuery), nous avons le code suivant à la fin du html:
[javascript]
$(document).ready(function() {
var field = $("#field");
$(".btn-1").click(function() {
field.val( $(this).data('message') );
});
$(".btn-2").click(function() {
field.val( $(this).data('message') );
});
});
[/javascript]
le code suivant :
[javascript]
$(document).ready(function() {
...
});
[/javascript]
est en fait le principe de base de JQuery, c'est ce code qui assure que le code a l'intérieur n'est exécuter que lorsque les éléments de la page html sont tous mis en place et bel est bien présent dans le dom. ça évite qu'on fait appel à des élément non encore télécharger du serveur...
puis on à :
[javascript]
...
var field = $("#field");
...
[/javascript]
ici on a juste mis une instance du champ edit dans une variable pour éviter d'aller le chercher à chaque foi.
puis :
[javascript]
...
$(".btn-1").click(function() {
field.val( $(this).data('message') );
});
...
[/javascript]
ici on détecte l’événement "onclick" sur l'élément html dont la classe est "btn-1" donc notre div qui englobe la première image, alors si on clique dessus on va remplir le champ edit récupérer précédemment dans la variable "field" par le contenu de l'attribut data html5 "message". et c'est la meme logique avec la deuxième image.
voila, j’espère avoir aider avec cette intervention
il y a des améliorations a faire mais je ne sait pas si vous avez le bon niveau en JQuery? mais si tu a assimiler ce code on peut l'améliorer ultérieurement.
tu peut aussi faire un tour sur mon blog pour trouver quelques tutoriels.
Bon Codage
Vous n’avez pas les permissions nécessaires pour voir les fichiers joints à ce message.
