ATTENTION : cette page vous offre le choix d'utiliser plusieurs méthodes pour faire le travail.
Votre tâche consiste à produire un minimum des deux zones cliquables sur une image de votre choix et de produire deux autres zones cliquables sur une deuxième image de votre choix.
ou
Notez également que vous pouvez utiliser des logiciels spécialisés pour la création d'image MAP.
VOUS POUVEZ ÉGALEMENT UTILISER LA MÉTHODE 1 QUI VOUS EST PRÉSENTÉE DANS LES SECTIONS VERTES (IL Y EN A TROIS).
LES SECTIONS JAUNES ET LA SECTION BLANCHE CONTENANT DU TEXTE EN ROUGE NE SERVENT QU'À EXPLIQUER LES CONCEPTS THÉORIQUES RELIÉS À CETTE ACTIVITÉ.
Affichez le site La Différence et ajoutez une page à votre portfolio en affichant l'assistant HTML ainsi que la directive 1185
Complétez les champs suivants:
Titre : Balise Map
Matière : Informatique
No de la directive 1185:
Sélectionnez dans la boîte à liste déroulante "SECTION", "Module 01 : HTML".
Cliquez le bouton de votre barre de boutons.
Insérez dans votre page le titre de niveau 1 suivant dans votre page : La Balise Map en utilisant le bouton TITRE
Le thème de travail est :
Pour les élèves de l'option :
Sciences et technologies : choisissez un des thème suivant :
- La relation Prédateur - Proie
- Les organes internes du corps humain
Pour les élèves de l'option Arts plastiques : Sculpture-scuplteur
Pour les élèves de l'option Arts de la scène : Une affiche d'un film
Pour les élèves de l'option Sport : Le logo des Jeux Olympiques
Pour les autres élèves : Choisissez une image de votre choix
Trouvez une image reliée à ce thème de taille inférieure à 200 ko et téléchargez-la dans votre espace de téléchargement
Trouvez deux sites web reliés à votre thème en utilisant GOOGLE.
Copiez les URLs (adresse http://...) de ces sites et collez-les temporairement dans votre page, vous aurez besoin de ces adresses plus loin.
Enregistrez votre page (vous reviendrez plus tard compléter cette page).
Cette section (jaune) est à lire. Elle vous expliquera globalement le travail à effectuer et le code utilisé.
Vous utiliserez :
- la Balise Map et son paramètre Name
- la balise Area et ses paramètres Shape, Href, TARGET et Coords
- la balise IMG et ses paramètres SRC et USEMAP
et
- En suivant les procédures ci-dessous, vous allez insérez le code HTML de façon à ce qu'un clic sur une zone rectangulaire de l'image affiche un site internet relié à votre thème et qu'un clic sur une deuxième zone de forme circulaire affiche un autre site internet relié à votre thème.
Cette section est à lire. Elle présente un exemple de code.
Vous pourrez comparer le code que vous produirez à ce code afin d'identifer des erreurs commises.
Voici un exemple :
Lorsque tu fais un clic sur mon visage tu afficheras le site PIERREMORISSETTE.CA/
Lorsque tu fais un clic sur ma poitrine tu afficheras le site GOOGLE
Ce code est utilisé pour afficher l'image ci-dessus (ma photo). <img src="http://ladifference.info/i/images/pierrem.jpg" usemap=#face /><MAP NAME="face"><AREA SHAPE=circle COORDS="50,30,20" HREF="http://pierremorissette.ca/" target=_blank><AREA SHAPE=RECT COORDS="10,70,100,101" HREF="http://www.google.com" target=_blank></MAP>
Explications du code utilisé :
<img src="http://ladifference.info/i/images/pierrem.jpg" usemap=#face />
Explications : On inscrit le code HTML d'insertion d'une image en y ajoutant le paramètre USEMAP dont la valeur est le nom choisi pour nommer notre carte.
<MAP NAME="face">Explications : On identifie la carte avec le nom choisi.
<AREA SHAPE=circle COORDS="50,30,20" HREF="http://pierremorissette.ca/" target=_blank>Explications : On utilise la balise AREA afin de créer une zone cliquable.
On utilise le paramètre SHAPE afin de définir la forme de cette zone. Dans cet exercice, nous utiliserons deux valeurs : RECT (pour un rectangle) et CIRCLE pour un cercle.
On utilise le paramètre COORDS afin de définir les coordonnées de cette zone (emplacmeent et grandeur)
On utilise le paramètre HREF afin de définir le site web qui sera affiché si le visiteur clique que cette zone.
On utilise le paramètre TARGET=_blank afin que le site web s'affiche dans une nouvelle fenêtre. <AREA SHAPE=RECT COORDS="10,70,100,101" HREF="http://www.google.com" target=_blank>Explications : On utilise une deuxième fois la balise AREA et ses paramètres afin de créer une deuxième zone cliquable.
</MAP>Explications : On termine la carte avec la balise /MAP
Afin d'insérer une image cliquable dans votre page, je vous suggère d'utiliser la Méthode 1 suivante :
À cette fin,
Enregistrez votre image sur le bureau
Ouvrez cette image avec le logiciel GIMP (faites un double clic sur le document et il s'ouvrira automatiquement avec GIMP si vous utilisez un ordinateur du local informatique).
Notez que vous pouvez également utiliser le logiciel gratuit Mcc Html Mapper pour réaliser cette activité.
À partir d'ici vous avez le choix de faire les directives D à I ou suivre le tutoriel vidéo ci-dessous : Au besoin, faites un "clic droit + enregistrer la cible sous" sur ce lien Voir le tutoriel vidéo afin de voir le tutoriel vidéo des procédures qui suivent.
Lorsque vous aurez terminé le tutoriel vidéo, poursuivez à la directive J...
Sélectionez le menu FILTRES / WEB / IMAGE CLIQUABLE
Cette fenêtre sera affichée:
Agrandissez cette fenêtre au besoin
Définissez vos zones cliquables en utilisant les boutons de gauche (cercle et rectangle). ATTENTION, ces zones ne doivent pas se superposer et ne doivent pas déborder de l'image.
Définissez pour chaque zone (Onglet LIEN) votre paramètre HREF (URL) (enlever le crochet dans la case à cocher LIEN RELATIF)
Au besoin, utilisez l'outil POINTEUR FLÈCHE ou l'onglet Rectangle ou l'onglet Cercle afin de bien dimensionner et localiser votre zone cliquable (cochez la case APERÇU afin de voir les modifications apportées à votre zone).
ou
Choisissez le menu AFFICHER / SOURCE
Sélectionnez et copiez le code affiché
Collez ce code dans votre page
Remplacez le nom de votre image par l'URL (adresse) de votre image.
ATTENTION, si vous utilisez plus d'une carte (MAP) dans votre page, vous devez renommer vos cartes afin que chacune ait un nom différent.
SI VOUS N'AVEZ PAS UTILISÉ LA MÉTHODE 1, EFFECTUEZ LES DIRECTIVES SUIVANTES :
Insérez votre image dans votre page en utilisant le bouton IMAGE. Observez la balise IMG ainsi que son paramètre SRC
Ajoutez un paramètre USEMAP dont la valeur sera #MAMAP.
Exemple :
<img src="nomdevotreimage" USEMAP="#MAMAP" />Ce paramètre indique que les zones cliquables définies dans la carte "MAMAP" seront utilisées pour cette image.
Copiez et collez le code en rouge ci-dessous à la suite de votre image.<MAP NAME="MAMAP"><AREA SHAPE=circle COORDS="0,0,0" HREF="" target="_blank"><AREA SHAPE=RECT COORDS="0,0,0,0" HREF="" target="_blank"></MAP>
Coupez et collez vos adresses de sites dans les valeurs des paramètres HREF="" (placez ces adresses entre les guillemets
Définissez ensuite vos valeurs des paramètres Coords pour chacune de vos zones cliquables.
OU Méthode B
Lisez (et comprenez!) les explications ci-dessous (texte rouge) concernant l'utilisation des paramètres COORDS pour les zones de forme circulaire et rectangulaire.
Notez également que pour une zone cliquable en forme de cercle, on utilise 3 valeurs de paramètre COORDS mais pour une zone cliquable de forme rectangle on en utilise 4.
SHAPE qui peut prendre trois valeurs :
RECT pour un rectangle.
CIRCLE pour un cercle.
POLY pour un polygone.
COORDS :
Indique les coordonnées des coins supérieur gauche et inférieur droit de la zone pour un rectangle RECT.
Indique les coordonnées de chaque angle du polygone si vous optez pour la valeur POLY.
Indique les coordonnées du centre du cercle et la dimension du rayon de ce même cercle pour la valeur CIRCLE.
HREF :
HREF définit la page de destination du lien correspondant à la zone. Vous pouvez bien entendu, utiliser un lien interne ou externe.
de votre barre de boutons.
