Médiaforma

All posts tagged rectangle

Dans la rubrique précédente, vous avez appris à mettre en place des zones réactives élémentaires “à la main”, c’est-à-dire en définissant une par une les balises <area>. L’exemple était élémentaire puisqu’il consistait à définir quatre zones carrées de 100×100 pixels dans un carré de 200×200 pixels.

Il peut être intéressant de définir des zones réactives en utilisant des cercles et/ou des polygones. Vous pouvez procéder comme dans la rubrique précédente, mais cela risque vite de devenir rébarbatif. Dans cette rubrique, je vais vous montrer comment utiliser un programme en ligne pour faciliter la création de zones réactives rectangulaires, circulaires ou polygonales.

Ouvrez votre navigateur et rendez-vous sur la page http://www.maschek.hu/imagemap/imgmap.

En face du libellé Use an image on your computer, cliquez sur Parcourir et désignez l’image à utiliser dans vos unités de masse. Cliquez sur Upload puis sur Accept.

Il ne vous reste plus qu’à choisir une forme dans la liste déroulante, à délimiter la zone concernée avec la souris, et à définir la page cible.

Ici par exemple, nous choisissons circle dans la première liste déroulante et nous dessinons un cercle dans l’image. Comme vous pouvez le voir, la zone de texte Coords est automatiquement remplie en fonction du tracé. La page visée a pour nom cercle.html.

Nous allons tracer un polygone autour de la flèche. Nous sélectionnons polygon dans la deuxième liste déroulante et nous traçons le polygone. Un Shit+clic met fin au tracé. La page visée a pour nom fleche.html.

Un clic sur l’icône Get image map HTML et la balise <map> est affichée dans la partie inférieure de la page.

Il ne reste plus qu’à copier ce code dans Notepad++. Nous mettons un peu d’ordre pour que le code soit plus lisible, puis nous faisons coïncider l’attribut usemap de la balise <img> et l’attribut name de la balise <map>.

Le code est sauvegardé et exécuté dans Firefox. Comme vous pouvez le voir les deux zones réactives suivent bien le tracé qui a été défini sur le site Online Image Map Editor.


Dans une rubrique précédente, vous avez appris à tracer un rectangle plein avec la fonction fillRect(). Dans cette rubrique, vous allez apprendre à tracer des rectangles vides et des rectangles pleins avec la fonction rect(). Voici le code utilisé :

Le tracé des rectangles est effectué avec deux boutons insérés dans un formulaire.

Le premier bouton exécute la fonction rectangleVide() et le deuxième la fonction rectanglePlein().

Examinons le code JavaScript mis en œuvre dans ces deux fonctions.

La fonction rectangleVide() trace un rectangle sans le remplir. Après avoir récupéré le contexte du canevas, la fonction beginPath() est exécutée pour indiquer qu’un nouveau tracé va commencer. Ce tracé est effectué avec la fonction rect(). Ses deux premiers paramètres définissent les coordonnées du coin supérieur gauche du rectangle. Ses deux derniers paramètres définissent la largeur et la hauteuir du rectangle.

La fonction stroke() réalise le tracé.

La fonction rectanglePlein() trace un rectangle et le remplit. Après avoir récupéré le contexte du cannevas, la fonction beginPath() indique que le tracé va commencer. Le rectangle est tracé avec la fonction rect(), similaire en tout point à celle utilisée dans la fonction rectangleVide(). L’instruction suivante définit la couleur de remplissage du rectangle en initialisant la propriété fillStyle. Enfin, la fonction fill() trace le rectangle et le remplit.


Cette rubrique s’appuie sur la précédente. Elle va vous montrer comment tracer des rectangles dans un canevas.

Voici le code utilisé :

Le canevas mis en place est le même que dans la rubrique précédente. Pour y afficher un rectangle, nous avons inséré un bouton à l’aide d’un formulaire. Ce bouton exécute la fonction JavaScript rectangle() lorsqu’il est pressé.

Examinons cette fonction.

Les deux premières instructions de la fonction rectangle() vous sont familières. Elles récupèrent le contexte du canevas. Pour afficher un rectangle plein, on commence par définir sa couleur de remplissage en initialisant la propriété fillStyle du contexte. Ensuite, il suffit d’exécuter la fonction fillRect() à laquelle on transmet les coordonnées de l’angle supérieur gauche du rectangle, ainsi que la largeur et la hauteur du rectangle. Ici, le rectangle sera affiché à 10 pixels du bord gauche et à 40 pixels du bord supérieur du canevas. Il aura une largeur de 130 pixels et une hauteur de 60 pixels.

Voici le résultat :