Le Blog de MaxiMoi200

vendredi 22 juin 2007

Comment rendre une zone <DIV> cliquable sur toute sa surface (ou comment rendre un lien <A> cliquable sur une surface)?

De manière assez classique, l'utilisation de la balise <a></a> permet de rendre une portion de texte cliquable afin de pouvoir atteindre un autre document sur le site ou sur le web. Exemple : MaxiMoi200 : Cartes de voeux.

Voici l'objectif recherché dans ce billet : rendre une zone entière cliquable, et pas seulement le texte qu'elle contient.

Dans l'exemple 1, une zone DIV contient un lien hypertexte. Seul le texte est cliquable.
Dans l'exemple 2, une zone DIV contient un lien, mais toute la zone est cliquable.

exemple 1 :

<div style="width:100px;height:50px;border:1px solid #999999;text-align:center;">
<a href="http://www.maximoi200.com">MaxiMoi200 </a>
</div>

exemple 2 :

<div style="width:100px;height:50px;border:1px solid #999999;text-align:center;">
<a href="http://www.maximoi200.com" style="display:block;width:100%;height:100%;">MaxiMoi200 </a>
</div>

A quoi tient la différence entre les deux ? Nativement, en HTML, il existe deux principales familles de balises. Les balises de mise en forme de texte "en-ligne", et celles de mise en page du contenu "bloc". Pour plus d'explications sur la différence entre les deux je vous conseille le lien suivant sur alsacreations : Comprendre la structure des balises bloc et en-ligne. Il est nécessaire de maîtriser ces notions pour aller plus loin en CSS.

La balise hyperlien A est de type "en-ligne". En effet, elle a pour but d'enrichier le contenu du texte. Comme toutes les balises "en-ligne", elle n'a pas de dimension et ses propriétés sont dictées par le texte dans lequel elle est insérée. C'est pour cela que dans l'exemple 1, seul le texte lui même est cliquable: la zone "colle au texte".

Pour rendre une surface entière cliquable, au-delà du texte, il est donc nécessaire que son affichage soit de type "bloc". En effet, les éléments de type "bloc" ont une surface active contrôlable : hauteur et largeur notemment (c'est le cas des balises DIV, P etc...).

En CSS, il est possible de forcer le type d'affichage des éléments. Ainsi, afin de profiter de l'aspect cliquable de la balise A mais aussi de l'effet de surface d'un élément de type "bloc", nous allons utiliser la propriété CSS "display". <a href="http://..." style="diplay:block;width:100%;height:100%;">

"display:block" indique au navigateur que même si la balise A est de type "en-ligne", il faut l'afficher comme si elle était "bloc". Il est alors nécessaire d'en spécifier la hauteur et la largeur. Ici, on décide d'étendre la balise à toute la surface du conteneur.

Voilà comment on peut rendre une zone cliquable, avec toutes les applications que l'on peut trouver.

Premier billet

Bienvenue sur le blog de MaxiMoi200

Il a pour vocation de vous faire partager ma propre expérience de webmaster autodidacte commencée en 2005 avec la création de MaxiMoi200 : Cartes de voeux virtuelles. Je vous ferez donc part de mes recherches face aux problèmes que je rencontre ou aux projets que je désire monter et les solutions que j'ai pu trouver!

Les domaines traités sont divers mais tourneront pour la plupart autours de HTML, PHP, mySQL et FLASH.

Il me servira également pour les même raisons... comme un bloc-note ! Vous pourrez alors peut être trouver au détour d'une page une recette de cuisine ou un bon plan !