Je sais dessiner des rectangles en PHP (avec GD), mais comment les rendre interactifs? Je veux dire, y a-t-il un moyen d'être informé quand et où l'utilisateur clique?Comment dessiner une image interactive en PHP?
Finalement, je voudrais permettre à l'utilisateur de sélectionner un rectangle parmi un ensemble en cliquant dessus, et en cliquant n'importe où ailleurs pour le déplacer.
Merci d'avance.
Cordialement,
. Mister Mystère
Vous pouvez le faire avec image maps. Ceci s'applique cependant vous créez l'image. La syntaxe de base (de Wikipedia) est:
<img src="bild.jpg" alt="alternative text" usemap="#mapname" />
<map name="mapname">
<area shape="rect" coords="9,372,66,397" href="http://en.wikipedia.org/" />
</map>
Vous pouvez avoir un certain nombre d'éléments area. Vous pouvez soit utiliser une URL href régulière comme indiqué ci-dessus, soit utiliser des événements JavaScript. Si vous avez seulement des rectangles simples, une alternative sans cartes consiste à positionner simplement plusieurs images de manière contiguë sans marge ou padding.
Une entrée type = "image" vous donnera les coordonnées cliquées sur l'image, mais c'est à peu près tout dans le langage HTML "plaine" & côté serveur PHP.
HTML:
<input type="image" name="myimage" src="whatever.png">
PHP:
$x = $_POST['myimage_x'];
$y = $_POST['myimage_y'];
Pour plus d'interaction, vous devrez regarder javascript, et encore plus de possibilités, je recommande vivement Raphael comme cross-browser (VML pour IE, SVG pour le reste) outil capable d'images plus complexes & événements sur (parties de) cette image.
Merci. Et comment puis-je obtenir ces coordonnées? P.S: Je vais essayer Raphael en parallèle. –
Edité le strict nécessaire dans input type = image dans la réponse. – Wrikken
Un rectangle en GD est une image comme dans l'exemple suivant:
// Create a 55x30 image
$im = imagecreatetruecolor(55, 30);
$white = imagecolorallocate($im, 255, 255, 255);
// Draw a white rectangle
imagefilledrectangle($im, 4, 4, 50, 25, $white);
// Save the image
imagepng($im, 'imagefilledrectangle.png');
imagedestroy($im);
Pour le rendre interactif, vous pouvez utiliser CSS comme placer l'image en arrière-plan pour une balise d'ancrage:
<a href="#" id="myRectangle"></a>
puis en CSS (en supposant 2 images):
a#myRectangle{
background-image: url(imagefilledrectangle1.png);
}
a#myRectangle:hover{
background-image: url(imagefilledrectangle2.png);
}
Vous pouvez faire attribuer plus avec CSS ou jeter un oeil à http://jquery.com/ pour utiliser JavaScript
Merci pour l'alternative, je préfère la solution de cartes d'images de Matthew Flaschen, mais je le garde à l'esprit cependant. –
Pour ce que vous décrivez, vous pouvez envisager d'utiliser plutôt les fonctionnalités de canevas HTML5. C'est-à-dire, au lieu de créer une image statique en utilisant GD en PHP, créez l'image à la volée en utilisant Javascript dans le navigateur. Ensuite, vous pouvez offrir toute la gamme de l'interactivité et réagir aux mouvements de la souris, clics.
Jetez un oeil à cette application de peinture pour un exemple: http://mugtug.com/sketchpad/
Cette volonté, cependant, demander aux utilisateurs un navigateur qui prend en charge Canvas (firefox, chrome), ou pour IE, utiliser quelque chose comme " explorercanvas ". IE9 quand il sort prendra en charge la toile je crois, ce qui devrait supprimer ce problème.
Pourriez-vous préciser le votre, s'il vous plaît? –
OK merci, beaucoup plus explicite :) Alors, où devrais-je mettre "onclick =", comme attribut de la zone? Devinez, non? –
Cependant, créer un rect pour chaque pixel possible cliqué serait une douleur :). Vous pourriez même renoncer à l'imagemap et capturer simplement les coordonnées x/y avec javascript si vous avez besoin d'une différence par pixel. – Wrikken