Elargir la zone cliquable

Bonjour à tous,
j'aimerais savoir s'il était possible de faire ceci: les boutons du menu de mon site sont des images assez petites, j'aimerais que chacun des boutons deviennent cliquable quand la souris s'en approche mais n'est pas encore tout à fait aussi dessus. Est-ce possible à faire?
Que je puisse définir par exemple que si la souris se trouve 5px en dessous de l'image, elle soit déjà en a:hover.

Voici le site actuel : www.vincentgires.com

Merci d'avance

regarde du côté de MAP CSS

Merci, j'ai été voir mais le MAP c'est une balise HTML, non ? et pour mapper dans une image, moi j'aimerais justement "mapper" en dehors.
A moins que je n'ai pas compris et que tu me parles d'autre chose

Bonjour,

Tu peux utiliser du padding sur l'élément <a>, mais il doit être en display block ou inline-block pour que ça fonctionne bien. Par exemple ceci :

div#menu a {
-moz-transition: all .15s ease;
-webkit-transition: all .15s ease;
-o-transition: all .15s ease;
transition: all .15s ease;
padding:0 10px 10px 10px;
display:inline-block;
border:1px solid red;
}

La bordure rouge est pour que tu vois bien la zone sensible.

Attention, sur ton site, si la fenêtre du navigateur n'est pas suffisamment haute, le vidéo embarque par-dessus le menu. Ce serait à corriger par la même occasion.

Génial merci beaucoup ça fonctionne à merveille et c'est très simple à mettre en place. Par contre je n'ai pas bien compris à quoi sert le display block car ça a l'air de fonctionner sans.

Je modifierai effectivement le fait que la vidéo passe au dessus du menu, je n'avais pas remarqué, merci de me l'avoir fait remarqué

Sans le display inline-block ou display:block, le padding-top ne fonctionne pas. Il vaut mieux l'utiliser pour s'assurer que ça fonctionne correctement dans tous les navigateurs.

OK, merci bien.