8797 sujets

Développement web côté serveur, CMS

[RESOLU] Maitriser l'action d'un input de type image

Bonjour,
je souhaiterai créer un bouton avec une image qui lorsque cliqué provoque une action.
Ici dans mon code, pour simplifier il m'affiche une phrase.
Je sais que les input type image renvoient les coordonnées cliquées par la souris.

Voici ce que j'ai fait:
<div id="contenu_page_de_texte">
          <div class="image_de_titre">
          <img src="images/fl-rouge-orange.gif">
          </div>
          <H1>Bienvenue <?php echo htmlentities(trim($_SESSION['prenom'])); ?> !</H1>
          
          <form action="espace_admin.php" method="post" > 
                <table>
                    <tr>
                        <td><input type="image" name="mise_a_jour" value="horloge" src="images/horloge.gif" /></td>
                        <!-- <td><input type="button" name="connexion" value="Connexion"></td>
                        <td><input type="button" name="connexion" value="Connexion"></td>
                        <td><input type="button" name="connexion" value="Connexion"></td>
                        <td><a href="deconnexion_admin.php">Déconnexion</a></td> -->
                    </tr>
                 </table>
          </form> 
          <?php if (isset($_POST["mise_a_jour_x"]) && isset($_POST["mise_a_jour_y"])){
          $texte = 'cela fonctionne';
          echo $texte;}?>
</div>


Le souci est que déjà au départ $_POST["mise_a_jour_x"] et $_POST["mise_a_jour_y"] possèdent une valeur et donc fatalement ma condition est vrai. Smiley biggol
Je voudrais que l'action n'ai lieu que sur selection de l'image Smiley murf
Pouvez vous m'aider, merci Smiley biggrin
Modifié par Boubou57 (21 Nov 2008 - 07:53)
Modérateur
Boubou57 a écrit :
Bonjour,
je souhaiterai créer un bouton avec une image qui lorsque cliqué provoque une action.
Ici dans mon code, pour simplifier il m'affiche une phrase.
Je sais que les input type image renvoient les coordonnées cliquées par la souris.

...


Salut Boubou57,

Ce genre de chose, je ne vois qu'en Flash. Le code serait à peu près ceci de mémoire :


this.mon_img_btn.onPress=function(){
  _root.mon_champ_txt.text=_xmouse+" "+_ymouse;
}


++
Salut,

@Nolem > pas bien compris l'histoire du flash Smiley biggol . Je pense que Boubou57 ne parlait que de PHP mais même s'il s'agissait d'une action côté client le Javascript serait quand même plus simple à mettre en place (onsubmit, onclick...). Smiley cligne

Pour en revenir à l'INPUT de type image il se comporte en fait exactement comme s'il ne s'agissait que d'un simple type submit. En clair il ne fait que soumettre le formulaire (avec en plus les coordonnées du point de l'image cliqué ce qui peut être utile). Donc si tu n'as qu'une image le test est effectivement inutile.

Cela devient tout de suite plus intéressant dès que le formulaire peut être soumis de plusieurs façons (par exemple 2 INPUT de type image et 1 de type submit). Un pitit code pour que tu fasses des tests :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test</title>
</head>
<body>
<?php
if($_SERVER['REQUEST_METHOD'] == 'POST') {
	echo '<pre>';
	print_r($_POST); 
	echo '</pre>';
	if (isset($_POST['moins_x'])) {
		echo "<p>image 'moins' cliquée.</p>\n";
	} elseif (isset($_POST['plus_x'])) {
		echo "<p>image 'plus' cliquée.</p>\n";
	} else {
		echo "<p>aucune image cliquée.</p>\n";
	}
}
?>
<form method="post" action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>">
<div>
	<input type="image" name="moins" src="image_moins.gif" alt="image moins" title="moins" />
	<input type="image" name="plus" src="image_plus.gif" alt="image plus" title="plus" />
	<input type="submit" />
</div>
</form>
</body>
</html>

Modifié par Heyoan (20 Nov 2008 - 22:55)
Modérateur
Heyoan a écrit :
Salut,

@Nolem > pas bien compris l'histoire du flash Smiley biggol . Je pense que Boubou57 ne parlait que de PHP mais même s'il s'agissait d'une action côté client le Javascript serait quand même plus simple à mettre en place (onsubmit, onclick...). Smiley cligne

Pour en revenir à l'INPUT de type image il se comporte en fait exactement comme s'il ne s'agissait que d'un simple type submit. En clair il ne fait que soumettre le formulaire (avec en plus les coordonnées du point de l'image cliqué ce qui peut être utile). Donc si tu n'as qu'une image le test est effectivement inutile.

Cela devient tout de suite plus intéressant dès que le formulaire peut être soumis de plusieurs façons (par exemple 2 INPUT de type image et 1 de type submit).
...


Salut Heyoan, Smiley smile

Je ne savais pas qu'en js, on peut récupérer les coordonnés de la souris et je savais bien qu'un submit ou une image type submit ne renvoie pas de coordonnées. Elle en fait assez Smiley ravi

erf le js, connais pas vraiment. Je reconnais ça syntaxe qui est très proche de l'AS. Mais son vocabulaire, pas du tout.

Je viens d'écrire un script AS 2.0 (houlala je vais me faire taper sur les doigts) Smiley confused et tu récupères très facilement les coordonnées de la souris (_xmouse et _ymouse). Là, ils sont affichés dans un champ texte (mon_champ_txt) après le clic de l'utilisateur sur le bouton (mon_img_btn). Ce n'est pas difficile à mettre en place, mais automatiquement on sort des «standards» du net.

Je ne savais pas qu'il était possible de mettre 2 submit dans un formulaire. Smiley smile

++
Modifié par Nolem (20 Nov 2008 - 22:31)
Nolem a écrit :

Je ne savais pas qu'en js, on peut récupérer les coordonnés de la souris
On peut le faire mais je ne pense pas que c'était la question.

Nolem a écrit :

je savais bien qu'un submit ou une image type submit ne renvoie pas de coordonnées.
Euh... c'est quoi une image de type submit ? Smiley langue

Nolem a écrit :

mais automatiquement on sort des «standards» du net.
Yep.
Modifié par Heyoan (20 Nov 2008 - 22:37)
Merci Heyoan pour ton aide (une nouvelle fois Smiley smile )

J'ai essayé ton code et je l'ai adapté sur ma mouture et cela fonctionne.

Pour te "rassurer" Smiley langue je vais mettre plusieurs boutons sur cette page.
Une petite question encore avant d'estampiller le post comme résolu et pour faire les choses proprement:

quel est le rôle de cette condition:

if($_SERVER['REQUEST_METHOD'] == 'POST')...


Merci pour tout Smiley biggrin
$_SERVER['REQUEST_METHOD'] indique la méthode HTTP utilisée pour obtenir la ressource serveur. Les valeurs (toujours en majuscules) les plus courantes sont GET et POST (qui correspondent aux valeurs possibles de l'attribut method de l'élément FORM). Il existe d'autres valeurs comme HEAD et d'autres que je n'ai plus en tête...

Donc le test en question permet de vérifier que l'appel de cette page provient de la soumission d'un formulaire (à priori le sien Smiley cligne ) en method POST ou pour être plus clair que le formulaire a bien été soumis.
Sujet clos
Aller à