Allez, je retrousse mes manches et j'écris l'article qui m'attend depuis quelques semaines.. 
Je voulais vous apprendre à mapper une image. Mais durant ma recherche sur Google d'une définition adéquate du fameux "mappage", je suis tombée sur un site qui va économiser à la fois mon temps et le votre.
Mais c'est quoi mapper une image ? Eh bien, c'est définir une ou plusieurs zone(s) sensible(s) à votre image afin de rendre ces zones cliquables.
Exemple sur cette image immonde :

Là, vous pouvez uploader une image ou utiliser une adresse url (je vous conseille d'uploader votre image sur votre blog, et ensuite d'utiliser son adresse pour le mappage car il vous sera dit plus tard que le site ne stocke pas les images, et que l'image que vous aurez uploadé sera effacée deux jours après).
Appuyez sur "Start mapping your image" et "Continue to next step". Ensuite plein d'options s'offrent à vous, vous pourrez les découvrir par vous même, mais il suffit de se servir du basique pour obtenir un résultat décent.
Ce site vous sera surtout utile pour mapper des rectangles et des polygones. Je vous expliquerai plus tard comment faire un rond plus facilement.


Donc si on veut mapper un rectangle, on appuye sur "Rectangle". Un rectangle apparaît, déplaçable et redimensionnable, qu'il suffit d'adapter au rectangle de son image.

Ensuite on appuye sur "Save", et le tour est joué.

Pour notre polygone, on va cette fois appuyer sur "Custom shape" et on clique sur chaque pointe, de cette façon (regarder les points verts) :

Ensuite, "Save". Vu qu'on laisse tomber le rond pour le moment, on va appuyer sur "Get your code".
Ensuite il suffit d'appuyer sur "HTML Code" situé en haut, le copier et le coller. Si vous avez uploadé votre image sur le site, n'oubliez pas de la déposer sur un autre site, et de changer l'adresse dans le code fourni.

Attention ! Si comme le mien votre rond fait partie d'une image avec d'autres formes, il suffit d'insérer la ligne en bleu en dessous des autres "<area shape=.../>".

X, Y et Z sont des valeurs en pixels. Et pour savoir ce qu'ils représentent, rien ne vaut une image :

A peu près tout le monde connaît ce mot, "hover", qui permet de donner des propriétés différentes à un élément selon si on le survole de la souris ou non. Il peut s'insérer aussi bien dans le css qu'en HTML.
Justement, en HTML, il existe un code bien simple pour changer les propriétés d'une image au passage de la souris, sans utiliser de codes css ou de background-image :

Voici un petit exemple :

Oui, mais. Dès que l'image devient un tout petit peu "lourde", on remarque un décalage entre le moment où on passe la souris et l'affichage de l'image. Ce retard n'apparaît que la première fois qu'on survole l'image, puisqu'ensuite elle est chargée. C'est tout de même un peu fâcheux. Exemple :

C'est pourquoi on préfèrera une autre technique (il en existe sûrement d'autres), légèrement plus contraignante que la précédente, mais plus efficace. Pas de chargement supplémentaire puisque les deux images n'en font en fait qu'une.

Voici les deux images sur lesquelles nous allons travailler :

Nous les assemblons pour n'en faire qu'une, avec l'image apparente en haut, et l'image "survol" en bas :


On insèrera l'image de cette façon :

<div id="exemple"><img src="adresse de l'image" alt="" /></div>

Le nom de la balise (donc ici "exemple") peut être changé, il faudra juste choisir quelque chose d'inutilisé jusqu'à présent et d'assez explicite pour ne pas s'emmêler les pinceaux dans son css.

Justement, dans son css, on insérera ce code :

#exemple {
width:200px;
height:200px;
overflow: hidden;
}
#exemple img {
border: none;
}
#exemple:hover img {
margin-top: -200px;
}

200 et 200 sont bien sûr à adapter. Ils correspondent à la largeur (width) de l'image apparente, et à la hauteur (height) de cette même image (donc techniquement la moitié de l'image regroupant les deux).

Traduit, modifié et adapté d'ici.

Astuce dont il ne faut pas abuser, n'oublions pas qu'il y a environ 500 000 épileptiques en France, on voudrait pas les tuer juste parce que faire clignoter un lien c'est chouette. Mais ça peut être pratique sur un blog, pour indiquer une mise à jour par exemple. Si vraiment vous pensez que vous allez vous en servir souvent, vous pouvez insérer directement dans votre feuille de style CSS :

Ensuite, dès que vous voulez faire clignoter du texte, vous l'entourez de ces balises :

Vous voulez faire cette manip' rapidement, ne changez pas votre feuille de style mais insérez tout simplement ce code :