Accueil Images Boîte à outils Liens Contact
 

 

 

 

 

Boîte à outils

Cottages victoriens

J'ai découvert par hasard un site proposant quelques adorables petites maisons victoriennes déjà configurées en "imagemap". Le code correspondant aux liens est fourni pour chaque maison.

Cottage Row

Cliquer sur ce lien pour découvrir les autres modèles de cottages : Victoria Road

Pour illustrer le procédé, j'ai choisi le petit cottage de gauche, (mais toutes les maisons sont configurées selon le même principe), sur lequel j'ai créé les zones chiffrées (de 1 à 8) qui représentent les zones cliquables; elles correspondent chacune à un lien (on peut donc créer 8 liens avec ce modèle) :

Zones cliquables

Juste sous les images, deux lignes de liens permettent d'accéder au code html des zones cliquables de chaque cottage.

Pour cet maison, il s'agit du code suivant :

<map name="mainmap">
<area shape="rect" coords="40,90,76,140" href="link#1">
<area shape="rect" coords="99,90,131,140" href="link#2">
<area shape="rect" coords="160,90,192,140" href="link#3">
<area shape="rect" coords="220,110,262,170" href="link#4">
<area shape="rect" coords="40,190,75,254" href="link#5">
<area shape="rect" coords="90,190,140,260" href="link#6">
<area shape="rect" coords="160,190,190,250" href="link#7">
<area shape="rect" coords="222,186,260,248" href="link#8">
<area shape="rect" coords="0,0,286,297" nohref>
</map>

La ligne de code suivante est à placer à l'endroit où doit apparaître la maison

<CENTER><IMG src="121cottage.gif" width="286" height="297" align=absmiddle border=0 alt="" USEMAP="#mainmap"></CENTER>

Voici le résultat obtenu avec le code ci-dessus utilisé tel quel (en passant votre souris sur les fenêtre et la porte, vous remarquez qu'elle se transforme en main aux endroits correspondant aux zones illustrées plus haut, indiquant ainsi qu'il s'agit d'une zone cliquable) :

Malheureusement, vous n'avez aucun indice sur la page où conduisent ces liens. Afin de mieux diriger vos visiteurs, je vous suggère d'ajouter l'attribut "title" à chacun des liens. Voici le code correspondant avec l'attribut "title" :

<map name="mainmap">
<area shape="rect" coords="40,90,76,140" href="link#1" title="Lien vers la page 1">
<area shape="rect" coords="99,90,131,140" href="link#2" title="Lien vers la page 2">
<area shape="rect" coords="160,90,192,140" href="link#3" title="Lien vers la page 3">
<area shape="rect" coords="220,110,262,170" href="link#4" title="Lien vers la page 4">
<area shape="rect" coords="40,190,75,254" href="link#5" title="Lien vers la page 5">
<area shape="rect" coords="90,190,140,260" href="link#6" title="Lien vers la page 6">
<area shape="rect" coords="160,190,190,250" href="link#7" title="Lien vers la page 7">
<area shape="rect" coords="222,186,260,248" href="link#8" title="Lien vers la page 8">
<area shape="rect" coords="0,0,286,297" nohref>
</map>

Où les textes "Lien vers la page ..." doivent être adaptés en fonction des différentes sections de votre site. Voici le résultat :

 
 

 

Accueil Images Boîte à outils Liens Contact

  Hit-Parade 

© Grenadine.net - 1998-2011