Accueil Images Boîte à outils Liens Contact
 

 

 

 

 

Bote outils

Cottages victoriens

J'ai dcouvert par hasard un site proposant quelques adorables petites maisons victoriennes dj configures en "imagemap". Le code correspondant aux liens est fourni pour chaque maison.

Cottage Row

Cliquer sur ce lien pour dcouvrir les autres modles de cottages : Victoria Road

Pour illustrer le procd, j'ai choisi le petit cottage de gauche, (mais toutes les maisons sont configures selon le mme principe), sur lequel j'ai cr les zones chiffres (de 1 8) qui reprsentent les zones cliquables; elles correspondent chacune un lien (on peut donc crer 8 liens avec ce modle) :

Zones cliquables

Juste sous les images, deux lignes de liens permettent d'accder 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 apparatre la maison

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

Voici le rsultat obtenu avec le code ci-dessus utilis tel quel (en passant votre souris sur les fentre et la porte, vous remarquez qu'elle se transforme en main aux endroits correspondant aux zones illustres 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 suggre 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 adapts en fonction des diffrentes sections de votre site. Voici le rsultat :

  
 

 

Accueil Images Boîte à outils Liens Contact

  Hit-Parade 

© Grenadine.net - 1998-2011