Des outils en ligne pour créer une image map

L'idée de ce tutoriel m'est venue par hasard en visitant le site d'un (enfin je soupçonne plutôt d'une) Jimdonaute, plus particulièrement cette page : http://wakfu-powa.jimdo.com/booster-mon-personnage/ En voyant la planche des personnages et, juste au-dessus, l'invitation "Choisissez la classe (de personnages) que vous souhaitez consulter", je me suis naturellement ruée sur l'image... pour découvrir avec dépit qu'elle n'était pas cliquable :

Capture du site à l'image-map nécessaire
Les personnages ne sont pas cliquables. Ce serait pourtant très naturel qu'ils le soient, non ?

En fait, pour consulter les fiches de chaque personnage, il fallait se reporter au menu latéral. Il n'y a rien de plus frustrant que de ne pas pouvoir cliquer sur une image quand tout nous y invite explicitement. On se dit que ce serait chouette si, en cliquant sur chaque personnage de la planche représentée, on pouvait accéder à la fiche correspondante.

 

La bonne nouvelle, c'est que ce principe existe : ce genre d'image à plusieurs zones cliquables s'appelle une image map et - cerise sur la crème Chantilly - c'est super facile à faire et encore plus à intégrer dans Jimdo !

Démonstration du résultat

Une fois n'est pas coutume, je commence par la fin. Voici donc ce que nous allons réaliser : une image map à multiples zones cliquables. Essayez-la : en cliquant sur un personnage, on arrive à sa fiche. Pour ne pas perdre les visiteurs, j'ai fait en sorte que les liens s'ouvrent dans de nouveaux onglets, mais ce n'est évidemment pas recommandé.

Iop Féca : le bouclier humain Pandawa Eniripsa Crâ Image Map

Comme je manque un peu de temps, je n'ai créé de zones cliquables que pour 5 personnages, mais on peut évidemment en créer autant que de personnages.

Flèche vers le haut

Des outils en ligne gratuits et performants

  • http://www.maschek.hu/imagemap/imgmap
  • http://www.kolchose.org/simon/ajaximagemapcreator/ (voir aussi http://code.google.com/p/imagemap/)
Flèche vers le haut

Des logiciels pour Mac et pour PC

Map Design (Mac)

Flèche vers le haut

Map Expert (PC)

Flèche vers le haut

Création pas-à-pas de l'image-map

Flèche vers le haut

Insertion du code dans Jimdo

Flèche vers le haut

Commentaires, critiques, suggestions

Écrire commentaire

Commentaires : 8
  • #1

    Amélie (lundi, 10 octobre 2011 14:53)

    je n'arrive pas a télécharger le logiciel, est ce normal ?

  • #2

    Amélie (mercredi, 12 octobre 2011 15:09)

    Bonjour,
    je n'arrive vraiment pas a rentrer mon code html dans l'onglet "widget / html", l'image apparaît mais aucun lien se fait pourriez
    Voici ce que j'ai mis sur l'onglet :
    <img usemap="#map" src="http://u.jimdo.com/www27/o/sd65905603db7d9a1/img/i4e85c7a6f19c3690/1318405687/std/image.jpg" width="600" height="400" border="0" alt="Désolé" /> <map name="map" id="map">
    <area shape="rect" coords="257,22,594,399" href="http://u.jimdo.com/www27/o/sd65905603db7d9a1/img/ic96a45aa62169592/1318419027/thumb/image.jpg" />
    <area shape="rect" coords="2,3,250,397" href="http://www.campingbaiesomme.com/le-camping-de-la-haie-pen%C3%A9e/photo-plan/#" />
    </map>
    vous m'aider s'il vous plait ?

  • #3

    Webmastips (lundi, 03 décembre 2012 10:54)

    Bonjour,
    Pour ceux que cela intéresse, voici un lien sur divers exemples d'image mapping :
    http://webmastips.com/fr/image-mapping
    A+

  • #4

    aloeverasante (samedi, 23 mars 2013 20:58)

    Super idée,

    quand j'aurais du temps je le ferais pour une carte de France avec tous les départements cliquables;)
    (la waoh bar cela ne marche toujours pas :( mais comme j'ai changé mon design en F255, je réessayerais)
    en tout cas encore merci

    Pour te remercier de tes aides je crois que je vais mettre ta page dans mes liens partenaire!
    As tu une image que je peux prendre pour associer à ton site ?

    Christophe
    ps: tu peux aussi visiter ce site que j'ai créer il y a qq temps a propos des free hugs que j'organise:
    http://calinsgratuitsgrenoble.jimdo.com/7

  • #5

    Abdessamade BAYROUNE (lundi, 25 mars 2013 17:58)

    merci realia c'est magnifique

  • #6

    fannyhiboux (samedi, 05 octobre 2013 20:21)

    Bonjour Realia,

    Tout d'abord merci pour votre site qui est une vraie mine d'or !!
    Je rencontre un problème avec l'image map. J'ai utiliser photoshop pour créer mon image, mais lorsque j'insère mon code dans widget-html, tout est là sauf l'image : toutes les zones que j'ai délimité sont bien là, avec le lien fonctionnant mais l'image en elle-même n'apparait pas. Je suppose qu'il faudrait l'enregistrer quelque part, mais c'est la que je sèche, je ne sais pas comment indiquer à Jimdo où se trouve mon image...

    Merci d'avance pour ton aide.

    fannyhiboux.jimbo.com --> c'est à l'image en page d'accueil que je souhaite applique le processus.

  • #7

    Isabelle (mercredi, 16 octobre 2013 13:12)

    Bonjour Fanny,
    Tu peux enregistrer ton image sur une page cachée de ton site. Ensuite, clique droit sur l'image pour récupérer son adresse URL. Dans le code de ton image map, tu remplaces l'adresse URL de l'image turbinée par Photoshop par l'adresse de l'image hébergée sur ton site. Tu peux aussi utiliser un hébergeur en ligne type Imageshack pour héberger ton image.
    A bientôt !

  • #8

    les-murmureuses (mardi, 31 décembre 2013 13:25)

    Le lien est visiblement mort...
    "Téléchargement
    http://www.le-didacticiel.com/telechargement "

    Merci pour ce blog si utile!!!

Ruban