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.