Utilisation de imapic2 (html)

à quoi sert imapic2?

Ce petit logiciel gratuit vous permet de créer des map réactives, c'est-à-dire de créer des liens sur des portions d'images.

le fonctionnement

Télécharger imapic [Vous devez être inscrit et connecté pour voir ce lien]. Vous n'avez qu'à double-cliquer sur le fichier imapic2.exe.


L'application vous demande tout de suite de sélectionner une image. Choisir l'image sur laquelle vous désirer placer vos liens et cliquer sur le bouton Ouvrir. Attention, le logiciel ne peut ouvrir que les fichiers d'extentions .jpg, .gif .bmp. Si vous utilisez des images d'extension .png comme moi, enregistrez temporairement vos images en format .jpg pour pouvoir les ouvrir dans imapic.


Votre image est maintenant ouverte dans imapic. La prochaine étape et de réaliser les liens. Enfoncez le bouton de votre souris et tracer un contour autour de l'endroit où vous désirez faire un lien. Relâchez ensuite le bouton de votre souris.


Un rectangle jaune se place par-dessus l'endroit sélectionné. Répétez la même étape pour tous vos liens.


Maintenant que vos liens sont tous tracés, il vous faut générer le code corresponsant. Cliquer sur le bouton [Vous devez être inscrit et connecté pour voir cette image].


Le code généré contient trop de code à mon avis. Nous allons simplifier tout ca. Tout d'abord, vous devez placer le code de votre image de façon standard comme suit:

Code:

<img src="image.jpg" border="0">

Par contre, il faut faire le lien entre votre image et la carte qui contient vos liens. Il faut donc rajouter un peu de code dans votre image comme suit:

Code:

<img src="image.jpg" border="0" usemap="#image.jpg">

Maintenant, il ne reste plus qu'à copier le code que vous avez obtenu du logiciel dans votre page. Ce code peut être placé n'importe où entre vos balises BODY. Je le place souvent après l'ouverture de la balise ou tout juste avant la fermeture de la balise.

Code:

<map name="image.jpg">
<area shape="rect" coords="15,13,66,28" href="" target="" alt="" />
<area shape="rect" coords="46,34,101,48" href="" target="" alt="" />
<area shape="rect" coords="74,54,139,69" href="" target="" alt="" />
<area shape="rect" coords="104,72,152,89" href="" target="" alt="" />
<area shape="rect" coords="134,94,170,109" href="" target="" alt="" />
</map>

Il ne vous reste plus qu'à remplir les liens avec les destinations voulues. Les paramètres target et alt sont optionnels et peuvent être retirés.

Code:

<map name="image.jpg">
<area shape="rect" coords="15,13,66,28" href="index.html">
<area shape="rect" coords="46,34,101,48" href="apropos.html">
<area shape="rect" coords="74,54,139,69" href="portfolio.html">
<area shape="rect" coords="104,72,152,89" href="extras.html">
<area shape="rect" coords="134,94,170,109" href="liens.html">
</map>

Et voilà, c'est tout!