Images actives

Aller à la version HTML.

Version flash:

Pour obtenir ce résultat nous allons utiliser le logiciel de création d'image actives du CRDP de l'académie de Versailles. Après installation lancez-le et vous obtiendrez cette interface:

Choisissez votre image. Puis créez des détails à l'aide de l'outil polygone et associez-y un commentaire.

Le titre du détail et son commentaire sera ce qui apparaîtra au survol de l'image.

On choisi ensuite son modèle.

On peut ensuite choisir quelques paramètres comme le fond etc...

Et nous arrivons à la génération du fichier flash. Voilà il ne vous reste plus qu'a insérer votre fichier flash dans votre article.

Version HTML5

Soit vous avez un serveur sur lequel vous avez déposé vos fichiers html dans l'arborescence du serveur web et votre source sera donc l'adresse de votre serveur. Il vous faudra donc copier la ligne suivante en "source" dans l'aticle:
<p><iframe height="500" src="http://www.mon-ent-occitanie.fr/html/packages/package_1464005618218_1285933255336/Evolution/xia/index.html#" width="730"></iframe></p>

Soit vous utilisez les "ressources pédagogiques" du site inter établissements, en s'identifiant et avec la trousse on crée une ressource de type html. Il faut que le fichier soit de type ".zip". Pour récupérer l'adresse à insérer dans un iframe il suffit de regarder le travail sur le site inter établissement.

Soit vous déposez par ftp sur un hébergement mutualisé vos fichier html à coté de votre site web.

L'exemple ci-dessous est déposé sur le site inter établissement.

Pour obtenir ce résultat nous allons utiliser le logiciel de création d'image actives du CRDP de l'académie de Versailles qui s'appelle "xia".

Pour préparer notre image ".jpg" ou ".png" nous allons l'incorporer dans un projet d'image vectorielle en utilisant le logiciel "Inkscape" libre et gratuit.
Puis nous utiliserons l'outil "Tracer des courbes de Bezier et des segments de droites":

Nous entourons les zones à sélectionner et allons dans les propriétés de l'objet en double cliquant sur la zone définie. On règle l'opacité à 50%.

Ensuite on rempli les propriétés de l'objet pour incorporer dans l'image le nom des zones et le commentaire.

Le titre de notre image ainsi que son commentaire seront définis dans les propriétés de l'image de fond.

Une fois toutes les zones définies et renseignées on lance Xia :

Nous cliquons sur le dossier pour sélectionner notre image vectorielle préparée.
on utilise les roues pour renseigner la résolution de notre travail en final et définir si nous voulons obtenir un fichier html qui contient tout ou bien un index et une arborescence.

Dans notre exemple nous avons demandé un seul fichier HTML.

Reste plus qu'a cliquer sur le modèle voulu, dans notre cas nous cliquons sur la dernière icône à droite en bas. Il nous reste à déposer notre travail sur un serveur web comme décrit au début.

BRAVO!