> Tous les forums > Forum des Webmasters
 Bouton-image dans un formulaire HTML [resolu]
Ajouter un message à la discussion
Page : [1] 
Page 1 sur 1
Panoramiks
  Posté le 14/09/2004 @ 16:00 
Aller en bas de la page 
Petit astucien
Sur une page web je voudrais mettre une serie de vignettes a cliquer pour passer des variables a un script PHP. Chaque vignette represente une image differante et doit envoyer au clic une valeur particuliere de la variable $var parmi d'autres variables entrees dans la meme <FORM>. Je pourrais utiliser : <INPUT name="var" type="image" src="source_de_l'image" [etc.]> mais ca passe au script les coordonees du clic au lieu du contenu du champ "value". On peut recuperer $var avec du code PHP aproprier mais c'est acrobatique. La doc W3C dit qu'une balise <BUTTON> de type "submit" se comporte comme un <INPUT> de type "submit" quand elle est activer. J'ai essaye: <BUTTON name="var" type="submit" value="ce_qu'il_faut"><img [source, taille, legende]></BUTTON> Ca produit la vignette qu'il faut mais quand on clique dessus il ne se passe rien. Comment fait'on pour "activer" ce bouton ? Je voudrais le rendre cliquable. Je veux que ce soit compatible tous navigateurs, donc pas de javascript ou autre.

Modifié par Panoramiks le 17/09/2004 16:12
Publicité
jpf91
 Posté le 14/09/2004 à 16:02 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien
Pour suivre
RPG3000
 Posté le 14/09/2004 à 20:56 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien
<form action="page.php" method="post" name="Vigne" id="Vigne"> <p>Input: <input name="entree" type="text" id="entree"> <input type="submit" name="Submit" value="Envoyer"> </p> <?php if (isset ($_POST['entree'])) { echo ("$_POST['entree']") } ?> si c ça ke tu cherche. Il faut ke ta page s'appel page.php et jpftruc, t un peut lourd avec t "pour suivre..."s
Panoramiks
 Posté le 15/09/2004 à 09:20 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien
Merci RPG3000 mais ca ne repond pas a ma question. Ton code va faire un bouton gris avec "Envoyer" marquer dessus. Si on clique sur le bouton ca va passer au script la variable $Submit avec pour valeur la chaine de caractere "Envoyer". Ca va passer aussi la variable $entree avec pour valeur la chaine de caracteres tapee par le visiteur dans une fenetre. Je sais faire ce genre de choses depuis longtemps. Ce que je veux c'est que le bouton a cliquer soit une image et qu'il soumette le formulaire. On peu le faire avec : <INPUT type="image" etc.> Mais ca passe comme donnees l'endroit ( x, y ) ou on a cliquer sur l'image alors que je voudrais que ca passe une "value". La doc dit qu'on peu aussi le faire avec : <BUTTON name="var" type="submit" value="une_valeur"><img src="URL_d'image" height="sa_hauteur" width="sa_largeur" alt="un_texte"></BUTTON> Ca doit passer $var avec pour valeur ce qu'il y a dans "value". Mais quand on clique sur le bouton-image il ne se passe rien. Comment faire pour que ca marche ? En fait je voudrais plusieurs boutons comme ceci : <BUTTON name="var" type="submit" value="valeur_1"><image_1></BUTTON> <BUTTON name="var" type="submit" value="valeur_2"><image_2></BUTTON> Ca doit passer la variable $var avec une valeur qui depend de l'image sur laquelle on clique

Modifié par Panoramiks le 15/09/2004 10:06
RPG3000
 Posté le 15/09/2004 à 13:36 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien
aaaaaaaaaaa ça change tout! Il te fo un cod javascript: HREF="javascript:document.nomduformulaire.submit()">Valider</A> Ca te donne un lien. Affecte ce lien à une image. Exemple: HREF="javascript:document.nomduformulaire.submit()"><img src="http://membres.lycos.fr/rpg3000/rpg3k_banner1.gif" width="468" height="60"></A> @++

Modifié par RPG3000 le 15/09/2004 13:39
Panoramiks
 Posté le 15/09/2004 à 14:29 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien
Re-merci Mais une condition est pas de javascript pour que ce soit compatible tous navigateurs. Sinon j'aurais fait un bouton de type "push" avec un "event" qui lance le script au clic.
RPG3000
 Posté le 15/09/2004 à 14:56 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien
je c bien mais je vois pas dotr moyen, désolé. Si INPUT ne fonctionne pas, aucune autre soluce me passe par la tête. Si t'as aucune réponse convenable, essaye sur le forum de siteduzero.com @++
Panoramiks
 Posté le 15/09/2004 à 16:15 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien
Merci quand meme encore. Peut-etre que quelqun d'autre ici saura. Mais le niveau des questions et reponses ne semble pas tres elever. Tu donnes une piste vers un autre forum. Il y en a sans doute plusieurs. Mais souvent il faut s'inscrire comme membre et je ne me vois pas le faire partout.
RPG3000
 Posté le 15/09/2004 à 16:31 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien
ouais mais siteduzero est fait pour. Et y'a un tutorial HTML dessus, regarde si tu trouve bonheur...
Publicité
cops122
 Posté le 16/09/2004 à 00:00 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien
j'ai retrouvé sa dans mes fonds de tiroir si sa peut aider!!!
<input type="button" onClick="window.location='machin (détails).htm';" value="détails" /> <input type="button" onClick="window.location='mailto:machin@fai.com';" value="contact" /> <input type="button" onClick="window.location='machin (accueil).htm';" value="accueil" /> En général si tu te sers de boutons en dehors d'un formulaire, n'utilises pas la balise <form>, qui ne sert qu'a récupérer le contenu du formulaire.


Modifié par cops122 le 16/09/2004 00:03
Panoramiks
 Posté le 17/09/2004 à 12:43 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien
J'ai trouver avec un petit coup de main ailleurs mais je croyais les astuciens plus experts. Ca ne fait rien je vais donner la solution au cas ou d'autres aient le meme probleme. LE PROBLEME Dans un formulaire cree par la balise <FORM> .../... </FORM> il faut mettre des bouton-images a cliquer qui passent une variable $var avec une valeur qui depend de l'image sur laquelle on clique. Je pensais pouvoir le faire avec : <BUTTON name="var" type="submit" value="valeur1"><image1></BUTTON> <BUTTON name="var" type="submit" value="valeur2"><image2></BUTTON> etc. Cela doit se faire sans script cote client pour etre compatible tous navigateurs. Mais il ne semble pas possible d'activer ces boutons dans ces conditions. LA SOLUTION Elle utilise <INPUT type="image"> a la place de <button> La difficulté est que ca ne passe pas valeur1 ou valeur2 pour une variable $var, mais l'endroit ( x, y ) ou on clique sur l'image. Avec : <INPUT name="var" type="image" value="une_valeur" src="source_de_l'image" [etc.]> On aura les variables $var_x et $var_y et "une_valeur" ne sera pas prise en compte. On n'aura pas non plus $var tout court. L'astuce consiste a detourner la fonction de name pour passer la valeur et a recuperer $var par du code PHP. On met : <INPUT name="valeur1" type="image" src="URL_image1" [etc.]> <INPUT name="valeur2" type="image" src="URL_image2" [etc.]> etc. Avec <FORM action ="une_page_php" method="get"> on aura un tableau $_GET avec les differentes variables et valeurs passees a la page PHP. Dans chaque ligne du tableau il y a un nom de variable ( key ) et sa valeur ( value ). Si on a cliquer sur l'image 1 il y a quelque part dans le tableau une "key" qui s'appelle valeur1_x et si on a cliquer sur l'image 2 il y a une key qui s'appelle valeur2_x. La valeur est une distance par rapport au bord de l'image et on s'en moque. Il faut recuperer "valeur1" ou "valeur2" comme valeur de $var en reperant "_x". Voici avec ses commentaires le code PHP qui fait ca : reset($_GET); # positionner le tableau $_GET a la ligne 0 foreach ($_GET as $key => $value) { # extraire la cle et la valeur de chaque ligne if (ereg("_x",$key)) { # si la cle contient "_x" $var=substr($key,0,-2); # couper les deux derniers caracteres (_x), le reste est la valeur de $var } } LES CONDITIONS Pour que ca marche il faut que "_x" apparaisse une seule fois dans le tableau. Donc : Un seul jeu de boutons-image a cliquer. Pas d'entree contenant "_x" dans un <INPUT type="text"> ou dans un <TEXTAREA> ... </TEXTAREA>

Modifié par Panoramiks le 17/09/2004 16:10
zevlad
 Posté le 11/10/2004 à 19:58 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Nouvel astucien
Autre solution, très simple: faire croire au navigateur que tu lui envoie un GET en ajoutant tes valeurs après un ? après l'url ou tu veux renvoyer les données : <A HREF="/accueil.html?valeur1=1"> <img src="images/icone3.gif" width="15" height="15"></A> Bien sûr si tu code tu peux cfaire générer une valeur différente pour chaque bouton-image. Inconvénient: on voit les paramètres dans la barre de nav. Pour le gui sur les chênes, c possible mais c rare : Le gui croît sur un grand nombre d'arbres et spécialement sur le pommier, le poirier, l'amandier, le hêtre, le noyer, le frêne, l'orme, le tilleul, etc.; mais ce qui est remarquable, c'est qu'on ne le trouve que rarement sur le chêne, ce qui peut paraître extraordinaire à cause de son nom. Cette rareté est peut-être cause que le gui de chêne était en si grande vénération, et que l'on attribuait sans doute à cette espèce une propriété extraordinaire et mystérieuse.
Page : [1] 
Page 1 sur 1

Vous devez être connecté pour participer à la discussion.
Cliquez ici pour vous identifier.

Vous n'avez pas de compte ? Créez-en un gratuitement !
Recevoir PC Astuces par e-mail


La Lettre quotidienne +226 000 inscrits
Avec l'actu, des logiciels, des applis, des astuces, des bons plans, ...

Les bonnes affaires
Une fois par semaine, un récap des meilleurs offres.

Les fonds d'écran
De jolies photos pour personnaliser votre bureau. Une fois par semaine.

Les nouveaux Bons Plans
Des notifications pour ne pas rater les bons plans publiés sur le site.

Les bons plans du moment PC Astuces

Tous les Bons Plans
58,99 €SSD PNY XLR8 CS3030 500 Go (NMVe M.2, 3500 Mo/s) à 58,99 €
Valable jusqu'au 28 Janvier

Amazon fait une promotion sur le SSD PNY XLR8 CS3030 500 Go (NMVe M.2) qui passe à 58,99 € alors qu'on le trouve ailleurs à partir de 80 €. Ce SSD utilise une interface M.2 NVMe PCIe Gen3 x 4 pour une connexion simple et des performances exceptionnelles : jusqu’à 3500 Mo/s en lecture séquentielle et jusqu’à 2000 Mo/s en écriture séquentielle.

Le SSD est doté de la technologie 3D TLC NAND haute densité offrant une endurance d’écriture durable et assorti d’une garantie de cinq ans.


> Voir l'offre
29,99 €Clé HDMI Fire TV Stick 2020 à 29,99 €
Valable jusqu'au 28 Janvier

Amazon fait une promotion sur sa nouvelle clé HDMI Amazon Fire TV Stick qui passe à 29,99 € au lieu de 39,99 €. Cette clé HDMI à brancher sur votre TV possède un processeur quadricoeur, 1 Go de RAM et 8 Go d'espace de stockage, le WiFi et le bluetooth. Avec elle, vous allez pouvoir voir facilement Prime Video, Netflix, Disney+, YouTube, Molovov, MyCanal, Spotify sur votre TV Full HD. Cette nouvelle version 2020 est compatible Alexa. Une télécommande avec des boutons pour contrôler également la TV est fournie.

Notez qu'il est possible de coupler un casque bluetooth avec le Fire TV Stick afin de regarder tranquillement la TV sans déranger vos proches.


> Voir l'offre
89,99 €Amazon Fire TV Cube à 89,99 €
Valable jusqu'au 27 Janvier

Amazon fait une promotion sur son Fire TV Cube qui passe à 89,99 € au lieu de 119,99 €. Fire TV Cube est l'appareil Fire TV le plus rapide et le plus puissant (4K ultra HD, 6 coeurs, 16 Go, Ethernet, Dolby Atmos) : il vous livre une expérience d'utilisation fluide et rapide pour profiter de vos films et séries préférés (Netflix, Prime Video, Disney+, Molotov, YouTube). Fire TV Cube vous permet de poser la télécommande et de vous plonger dans vos films et séries préférés en utilisant uniquement le son de votre voix. Vous pouvez aussi demander à Alexa de régler le volume ou de couper le son de votre TV ou barre de son compatible. 

 


> Voir l'offre

Sujets relatifs
Integration d'un bouton flash dans une page HTML
bouton radio dans formulaire
probleme bouton envoyer formulaire [Résolu]
Image dans HTML
Bouton dans une page HTML pour copier un texte
[Resolu]CSS adapter une image dans un cadre precis
image dans 1 forum/resolu
Cases à cocher dans un formulaire (résolu)
decallage dans un tableau html - RESOLU
introduction image dans <input=bouton....
Plus de sujets relatifs à Bouton-image dans un formulaire HTML [resolu]
 > Tous les forums > Forum Forum des Webmasters