Image avec zones cliquables

Pour changer un peu des photos, une de mes passions, et mon ancien métier, la programmation.
Plusieurs personnes me demandes comment faire une image avec des zones sur cette image qui soient cliquables et avec un texte qui s'affiche au passage de la souris , ce qui permet de choisir avant de cliquer. voici un exemple [ http://eglises.over-blog.fr/ ]
Aujourd'hui, comment rendre une image cliquable. Il faut être en mode privilège.

Ces infos ont été trouvées sur internet bien sur, sur des sites ou forums qui parles de la programmation HTML et/ou javascript ,comme:
[ http://www.commentcamarche.net/contents/html/htmlimages.php3 ]
Les images réactives ("images MAP")
ou
[ http://www.allhtml.com/forums/posts_list/topic:422710 ]

Moi je fais mes essais avec un logiciel de creation de page web, comme Front page ou autre Dreamweaver. Cela est utile pour faire des essais et comprendre les termes employés , comme AREA , SHAPE , MAP ou HREF

On fait un essai pour comprendre ces instructions:
Il faut d'abord une image ou une photo. Et déterminer les points entre lesquels on peut cliquer.
J'utilise Photofiltre comme logiciel de dessin , il est performant et gratuit.
Je charge mon image dans photofiltre et je dessine dessus des traits rouges pour faire mes carrés ou rectangles qui seront cliquables, ce n'est pas l'image originale bien sur ,mais une copie.
Je fais l'essai par exemple avec la carte de l'ile d'Yeu:

On voit bien les carrés et rectangles à cliquer.
Pour saisir les coordonnées d'un carré, il suffit dans photofitre,de positionner la souris au dessus du coin supérieur gauche les valeurs relevées seront , 317,106
on positionne la souris au dessus du coin inférieur droit, ici ce sera 360,154
ainsi j'ai déjà les coordonnés du 1er carré cliquable.

Ce qui donne pour faire l'essai:

-- les informations concernant l'image:

on donne l'adresse où est stocké l'image,ici c'est sur OB, la taille et diverses infos que vous recopiées comme ici:
<IMG SRC="http://ekladata.com/yyE82QjZQMWU__MQlrFhMocA9Ng.jpg" Width="730" Height="562" name="Image1" width="730" height="562" border="0" usemap="#Map" id="Image1" alt="mon essai de zone cliquable">

-- et les informations pour créer la map:

on "ouvre" et on "ferme" MAP et dedans on écrit la ligne AREA, autant de fois que l'on a des carrés, il suffit de changer les coordonnés de chaque carré.
le HREF sert a ouvrir une nouvelle fenêtre avec une adresse d'article si on clique sur le carré
  <map name="Map">
<AREA SHAPE="rect" COORDS="317, 105, 360, 154" HREF="http://eglises.over-blog.fr/article-36140914.html" TARGET="_blank">

    </MAP>
Nota: a la place des carrés, on peut faire aussi des cercle ou des polygones, recherche sur Google avec AREA SHAPE vous donneras toutes les infos, voir aussi le 3eme article de cette série avec des AREA SHAPE POLY

un essai: avec le carré en haut: