Contenu

histoire-géographie-citoyenneté

Recherche simple Vous recherchez ...

espace pédagogique > disciplines du second degré > histoire-géographie > approfondir

créer une image mappée facilement

mis à jour le 08/09/2016


IMAGEMAPICO.jpg

Cette page explique comment créer une image mappée dans un e-lyco ? c'est à dire une image sur laquelle des zones réagissent au passage de la souris.

mots clés : e-lyco, image, mappée,


Les images mappées sont des documents graphiques, photos, tableaux, affiches, graphiques numérisés sur lesquels des zones réactives ont été ajoutées. Cela permet d'introduire des commentaires dans le document par exemple pour faire le corrigé d'une étude de document ou pour présenter l'analyse d'une oeuvre.

Le logiciel mcc html mapper permet de réaliser facilement un fichier html qui lancé depuis votre clé usb où vous l'aurez créé vous permettra d'afficher une image mappée dans votre navigateur. Vous pourrez même incorporer ce fichier dans un site perso mais attention à l'adresse et à la taille de l'image.

La méthode  la plus simple est d'ouvrir en classe votre image mappée depuis le logiciel mais vous pouvez aussi récupérer le code de l'image mappée et le coller dans  le code d'une page web.

Telechargez mcc html mapper
http://www.lelogicielgratuit.com/logiciel/mcc-html-mapper/

on appelle map le fichier contenant l'ensemble des zones créées sur l'image avec les propriétés associées

Préalable :  choisir un document et lui donner la taille qu'il devra avoir dans la page de votre site en le redimensionnant dans un logiciel de traitement d'images.


1° produire l'image mappée
 ici avec le gratuiciel mcchtmlmapper
 choisisez une image et donnez lui les dimensions qui seront les siennes dans la page web puis importez la dans le logiciel.

 créer votre map en définissant des zones à l'écran
 attribuez des propriétés à ces zones en ajoutant la fonction title

 Ajoutez et remplissez la fonction title. votre texte s'affichera au survol de la souris
 La fonction href vous permet d'indiquer un hyperlien pour faire ouvrir une page web.

 enregistrez la map
 
  NB dans mcc html mapper en ouvrant la map, l'image associée s'ouvre elle aussi


 2 transférer l'image mappée dans votre page html

  Dans votre site web, importez l'image dans un article et donnez lui les dimensions prévues au départ : 500 pixels par exemple.

 3  puis dans le logiciel mcc html mapper ouvrez la map puis cliquez sur exportez le code de l'image mappée en html
   sélectionnez et copiez le code

 4  dans l'article du site collez le code dans le code de la page sous l'image.
  Il y a donc 2 blocs de code : celui de l'image importée et celui de la map.

Important : pour que l'image la map coincide avec l'image, il faut lui donner l'adresse que l'image a desormais dans le site par la manipulation suivante :

   1° Dans dans la ligne de code de l'image, copiez la ligne src vers l'image et son identité pour que l'adresse de l'image devienne celle de l'image enregistrée dans votre site.

   2° dans la ligne de code de la map collée depuis le logiciel copiez le src désignant l'image importée à la place du src qui designait l'image sur votre disque dur.


    Enregistrez c'est fait.
 

information(s) pédagogique(s)

niveau : tous niveaux

type pédagogique :

public visé : non précisé

contexte d'usage :

référence aux programmes :

haut de page

histoire-géographie-citoyenneté - Rectorat de l'Académie de Nantes