Utiliser une image mappée créée avec MapSpinner
27 octobre 2006 Catégorisé dans : Techniques
MapSpinner est un logiciel
qui permet très simplement de créer une image
mappée. Une image mappée permet de définir des
liens lorsqu'on clique sur différentes zones de
l'image. Vous lui indiquez un fichier image et
vous suivez les indications pour construire les
zones et le lien qui est rattaché à chacune.
Lorsque vous en avez terminé avec MapSpinner, celui a généré un code HTML que vous pouvez insérer dans votre page web.
Lorsque vous en avez terminé avec MapSpinner, celui a généré un code HTML que vous pouvez insérer dans votre page web.
Tout d'abord, il faut récupérer le code HTML généré
par MapSpinner. Si le tiroir de code de MapSpinner
n'est pas ouvert, vous pouvez le faire avec le menu
Outils > Afficher le tiroir de code.
Dans ce tiroir, vous voyez le code complet d'une page html. Ce qui nous intéresse, c'est le seul code concernant notre image. Il commence à partir des 2 lignes de commentaire :
et il s'arrête avec la ligne :
Vous copiez donc dans le presse-papier tout ce qui se trouve entre ces 2 blocs (vous pouvez inclure les commentaires eux-mêmes).
Vous ouvrez ensuite votre page sous RapidWeaver et vous collez le code html à l'endroit où vous souhaitez que l'image s'affiche. Ceci fait, vous sélectionnez le code et vous appliquez l'option "Ignorer le format" du menu Format afin que le code html ne soit pas affiché comme du texte (il doit apparaître en fond rose).
Pour terminer, il convient de reprendre un peu le code pour que l'image qui se trouvera sur un site (le vôtre ou un autre, peu importe). MapSpinner référence cette image comme si elle était placée au même endroit que votre page avec un lien relatif. On a donc tout simplement :
Il faut donc que vous corrigiez ce lien, soit en indiquant un chemin relatif partant de l'emplacement de votre page, soit une adresse URL complète. Par exemple, supposons que vous ayiez mis votre image dans les éléments de votre page et que votre page s'appelle "mapage.html", elle sera publiée dans un sous-répertoire "mapage_assets". Le lien s'écrira donc :
Voilà ! Il ne vous reste plus qu'à publier votre page et vérifier que vous ne vous êtes pas trompé dans les liens. Si tel était le cas, vous pouvez reprendre à la main le code HTML de votre page et y apporter les corrections nécessaires.
Pour voir le résultat de cette manip, cliquez sur cette page
Dans ce tiroir, vous voyez le code complet d'une page html. Ce qui nous intéresse, c'est le seul code concernant notre image. Il commence à partir des 2 lignes de commentaire :
<!-- Created by MapSpinner -->
<!-- Beginning -->
et il s'arrête avec la ligne :
<!-- End -->
Vous copiez donc dans le presse-papier tout ce qui se trouve entre ces 2 blocs (vous pouvez inclure les commentaires eux-mêmes).
Vous ouvrez ensuite votre page sous RapidWeaver et vous collez le code html à l'endroit où vous souhaitez que l'image s'affiche. Ceci fait, vous sélectionnez le code et vous appliquez l'option "Ignorer le format" du menu Format afin que le code html ne soit pas affiché comme du texte (il doit apparaître en fond rose).
Pour terminer, il convient de reprendre un peu le code pour que l'image qui se trouvera sur un site (le vôtre ou un autre, peu importe). MapSpinner référence cette image comme si elle était placée au même endroit que votre page avec un lien relatif. On a donc tout simplement :
<img src="image.jpg" ...
Il faut donc que vous corrigiez ce lien, soit en indiquant un chemin relatif partant de l'emplacement de votre page, soit une adresse URL complète. Par exemple, supposons que vous ayiez mis votre image dans les éléments de votre page et que votre page s'appelle "mapage.html", elle sera publiée dans un sous-répertoire "mapage_assets". Le lien s'écrira donc :
<img src="mapage_assets/image.jpg" ...
Voilà ! Il ne vous reste plus qu'à publier votre page et vérifier que vous ne vous êtes pas trompé dans les liens. Si tel était le cas, vous pouvez reprendre à la main le code HTML de votre page et y apporter les corrections nécessaires.
Pour voir le résultat de cette manip, cliquez sur cette page
|