Balise <area> dans un <input> ?

Bonjour

Jusqu'à maintenant je suis toujours arriver à trouver les réponses à mes questions mais la ça fait 1 semaine que je sèche.

J'expose mon problème :

Maintenant que mes pages sont réalisées j'aimerai les finir par un quiz.
Seulement pour "valider" la réponse il faut cliquer sur une image avec des <area>. http://www.radioanatomie.com/01_crane/02_avec_inj/quiz.php

Je cherche donc à recuper la valeur du clic (vrai ou faux).
J'ai essayé en php via un <form> et un <input> mais je n'y arrive pas.

Peut-on mettre la balise area dans la balise input ?

Ça peut se faire en php ou je suis obligé de passer en javascript (que je ne connais pas du tout) ?
Modifié par Mendoz (20 Sep 2007 - 08:38)

Salut Mendoz,

Bien que je ne sois pas un pur codeur en php, ton soucis n'est pas bien difficile à réaliser. Il me semble qu'il n'est pas possible de placer un area dans un input. Ce sont deux balises différentes.
Je pense qu'il serait plus simple de faire un formulaire à base de boutons radio :

<form action="mon_script.php" method="post">
<p>Est ce que l'âge du capitaine est important ?</p>
<p><input type="radio" name="capitaine" value="oui" /> Oui 
<input type="radio" name="capitaine" value="non" /> Non</p>
<button type="submit">va chercher</button>
</form>

Pour t'aider à réaliser ton quiz, fais un ptit tour par là

++

oui j'ai essayé avec les bouton radio ; c'est parfait pour le vrai-faux

Sauf que je n'arrive pas à l'intégrer dans la page ; j'ai essayé :
1 -

<input type="radio" name="q1" value="oui" />

mais elles se positionnent après l'image.

2 -

<input type="image" name="q1" value="oui" />

mais pareil

Mon soucis c'est vraiment de l'intégrer dans l'image

Regarde ce sujet.

Je pense que tu trouveras ta solution. Par contre, je me pose la question suivante : Peut on intègrer un formulaire sur une image ? À priori, oui. J'ai pas testé. Sinon, il est peut être possible d'intègrer l'image en background (background-color).

++

Salut Mendoz ,

juste pour faire avancer le schmilblick, il est possible d'avoir un formulaire sous la forme :

<form method="post" action="mapage.php">
	<input src="crane.gif" alt="Crane Quizz" title="Cliquez..." type="image" />
</form>

et de récupérer les coordonnées à l'aide de $_POST['x'] et $_POST['y'].

On peut donc simuler les area :

<?php
$x = (isset($_POST['x'])) ? $_POST['x'] : 0;
$y = (isset($_POST['y'])) ? $_POST['y'] : 0;
if ($x > 50 && $x < 80 && $y > 40 && $y < 70) {
...
}
?>

Bon mais c'est vrai que ça risque d'être un peu fastidieux !

A+

Hello

Heyoan a écrit :
Bon mais c'est vrai que ça risque d'être un peu fastidieux !

Et pas accessible sans souris, malheureusement.
Modifié par Julien Royer (20 Sep 2007 - 11:46)

Julien Royer a écrit :
Et pas accessible sans souris, malheureusement.

Oups... c'est vrai !

Et du coup le schmilblick n'est pas plus avancé !

a écrit :
Et pas accessible sans souris, malheureusement. ohwell

Je comprends que l'accessibilité est importante mais bon en pratique pour mon site, tel qu'il est n'es déjà pas pratique sans souris

a écrit :
On peut donc simuler les area :

<?php

$x = (isset($_POST['x'])) ? $_POST['x'] : 0;

$y = (isset($_POST['y'])) ? $_POST['y'] : 0;

if ($x > 50 && $x < 80 && $y > 40 && $y < 70) {

...

}

?>


Bon mais c'est vrai que ça risque d'être un peu fastidieux murf !

Je vais essayer de voir mais bon refaire toutes mes areas... ; si je pouvait trouver un autre moyen je serai preneur...

Merci en tout cas

Salut,

bon les schmillblik , y faut bien essayé de les faires avancé.....

alors peut-être

1) soit passer tes valeurs dans l'url quand tu cliques? et recuperer dans $_GET au lieu de post?



2) utiliser un formulaire avec juste de champs cachés quand tu cliques sur un image ça donne la valeur vrai/faux au champs cachés
bon la faut un peut de javascript. je suis fort moyen a ce language là mais quelquechose comme ça:

cochedecoche (id) {
area = document.getelementById(id);
inp = document.getElementById("input"+id);
if (inp.value == true ) {inp.value = false; else inp.value = true;}
if (inp.value == true) img.src = "chemin de l'image vrai"; else img.src = "chemin de l'image fausse);
}

En mettant a la fois sur le onclick et le onkeypress. ça devrait marché sans souris.

la seule difficulté que je vois se faire tous ses champs cachés a la main si tu n'as rien pour les générer dynamiquement

Bon,

Donc vraisemblablement il va falloir que je me tourne plus vers du javascript.
Ce qui n'est pas gagné pour moi, mais bon...

Si quelqu'un a une piste vers laquelle me tourner je prends ; je vais déjà voir la méthode de CPascal.

Merci encore

Bon j'ai donc essayé la méthode $_GET qui marche bien sur la première question (en local ; sur le site l'image ne s'affiche pas du aux espace mais bon c'est pas encore mon problème).
Par contre lors du 2ème clic pour la 2ème question, cela ne marche plus (ce qui me parait logique)
http://www.radioanatomie.com/01_crane/02_avec_inj/quiz.php

Pour les champs cachés je n'arrive pas à l'adapter.

Je sèche toujours