Logo site Des Geeks et des lettres

L'application pour surveiller / sauvegarder vos smartphonesL'oeil inquisiteur de Bibispy

Image-maps.com pour faire votre mapping

Je voulais vous faire découvrir un petit service internet bien utile, qui peut vous faciliter la vie si vous créer un blog ou un site internet.

Lorsque vous créez une telle plate-forme, vous êtes soumis à une double contrainte :

  • 1/ Faire un site le plus beau possible, avec des images originales qui vont parler au lecteur. De nombreuses études ont mis en évidence le fait que des images grandes retenaient plus l’attention que des petites.
  • 2/ Faire en sorte que votre site soit rapide à l’affichage, Google prenant en compte ce facteur dans son positionnement et le lecteur ayant tendance à ne pas s’attarder sur un site qui rame.

Pas évident, du coup, de faire un site à la fois imagé et rapide.

C’est là qu’intervient une petite astuce : au lieu de mettre côte à côte plusieurs images cliquables, pourquoi ne pas rassembler tous ces petits bouts d’images en une seule grande image tout en permettant de faire cliquer l’internaute à plusieurs endroits de cette image ?

C’est ce que l’on appelle le MAPPING. L’avantage est qu’une seule image peut être facilement réduite à l’aide de logiciels spécifiques (personnellement j’utilise RIOT que j’adore, mais il en existe d’autres).

Le MAPPING est un code qui permet cet exploit. Pour ceux qui ne savent pas coder, IMAGE-MAPS.COM devient un service en ligne très efficace.

image-maps.com

  • Tout ce que vous avez à faire, c’est de préparer votre image, comme par exemple celle ci-dessous, de l’héberger sur votre site (ou sur n’importe quel site d’hébergement) puis de coller l’adresse.

icones réseaux sociaux

  • Ensuite vous cliquez sur « Start Mapping Your Image ».
  • Vous avez alors accès à un rectangle. Vous dessinez les rectangles qui seront vos zones cliquables et insérez leur adresse de renvoi du lien.
  • Vous découpez ainsi de multiples zones dans votre image.
  • Enfin, le service vous donne votre code « Get Your Code » que vous pourrez insérer dans votre code source. 

Le code délivré ressemble à ça :

Code image-maps

Rien ne vous empêche de coder à la main, mais j’ai trouvé que ce service permettait un gain de temps bien sympathique.

Résultats après quelques essais de ma part ?

  • ==> Un gain dans la vitesse d’affichage non négligeable.
  • ==> Par contre, en terme de référencement, j’ai des doutes : Est-ce que Google parvient à savoir que cette image est cliquable en de multiples endroits et la prend-elle en compte de la même manière ? Vos expériences en la matière sont les bienvenues.

Trois flèches vers le bas

1- Logiciel de brouillage d’adresse IP :

Contourner la censure en surfant anonyme

2- L’article explicatif :

La différence entre un proxy et un VPN

3- Comment espionner un smartphone (app) :

L’application de référence

Commentez ici

  • Mimie 25 mars 2013, 23 11

    Personnellement je pense que les balises « map » et « area » sont obsolètes, et devront passer « deprecated » dans les prochaines versions d’HTML. Il vaut mieux à présent passer par la technique des « images sprites » qui permet le même gain en quantité de ko à télécharger, un meilleur balisage HTML et une maintenance plus aisée, voir cet ancien article qui en parlait.

    En terme de SEO par contre je ne pense pas que ça coince tant que l’attribut « alt » est bien renseigné.

    Réponds !

  • Greg 26 mars 2013, 0 12

    Ok, tu m’as convaincu.

    Réponds !

Article suivant:

Article précédent:

Recherche

A vos stylos !

  • Greg: “Ahah. Tu m'étonnes.Déc 8, 21:19
  • Benjamin: “Ahah ! J'aime ces coups de gueule, pour la peine je verrai pas ce film, fuck !Déc 8, 19:52
  • Greg: “Non, j'ai l'impression que Pinterest empêche l'utilisation de plugin annexes (je me trompe peut-être)Déc 8, 18:26
  • danielle: “vous avez réussi à afficher? j'ai le meme problème avec Safari je n'arrive pas à afficher certaines photosDéc 8, 18:12
  • Greg: “Salut Ben, Peut-être, je ne me souvenais plus que tu m'en avais parlé, mais bonne perle sympathique en effet…Déc 7, 21:33
  • etienne minsongo mendo: “Bsr à tousje suis Etienne Minsongo apprenti programmeur! je voudrais savoir: le serveur local XAMPP.... aurait-il des inconvénients?Déc 7, 15:45
Share This