>>> VML HOME PAGE

COORDONNÉES DE BALISE <area

1-Pour les RECTANGLES:
Exemple 1 (rectangle positionné sur le W du logo): coords="105,50,153,155" soient ( X1 , Y1 , X2 , Y2 )

Créer un rectangle réactif VML dont les coordonnées seront:
left = X1- width (image)
top = Y2- height (image)
width = X2-X1
height = Y2-Y1

EXEMPLE 1

SOURCE 1:

<![if vml]>
<v:image style='width:250;height:210;z-index:1' src="MonImage.png"/>
<v:rect  style='position:relative;left:-145;top:-55;width:48;height:105;z-index:2' stroked="f" filled="f" href="MonLien"></v:rect>
<![endif]>

<![if !vml]>
<img     style='width:250;height:210' usemap="#Map1" src="MonImage.png" border="0">
<![endif]>

<map name="Map1">
<area shape="rect" coords="105,50,153,155"
 href="MonLien" target="_blank">
</map>


2-Pour les CERCLES:
Exemple 2: (cercle positionné sur l'intérieur du C du logo): coords="183,122,13" soient ( X , Y , Z )
Créer un cercle réactif VML dont les coordonnées seront:
left = X - Z - width (image)
top = Y + Z - height (image)
width = Z x 2
height = Z x 2

EXEMPLE 2

SOURCE 2:

<![if vml]>
<v:image style='width:250;height:210;z-index:1' src="MonImage.png"/>
<v:oval  style='position:relative;left:-80;top:-75;width:26;height:26;z-index:2' stroked="f" filled="f" href="MonLien"></v:oval>
<![endif]>

<![if !vml]>
<img     style='width:250;height:210' usemap="#Map2" src="MonImage.png" border="0">
<![endif]>

<map name="Map2">
<area shape="circle" coords="183,122,13"
 href="MonLien" target="_blank">
</map>


3-Pour les POLYGONES:
Exemple 3: (polygone positionné sur le contour du M du logo):
coords="85 96 85 149 94 152 93 72 85 69 75 109 65 93 57 88 54 145 62 149 64 106 76 133 85 96"
soient ( X1 , Y1 , X2 , Y2 , X3 , Y3 , etc... )
Créer un polygone réactif VML dont les coordonnées seront:
left = Le point X le plus faible - width (image)
top = Le point Y le plus fort - height (image) + 4
points = coords

EXEMPLE 3

SOURCE 3:

<![if vml]>
<v:image style='width:250;height:210;z-index:1' src="MonImage.png"/>
<v:polyline  style='position:relative;left:-196;top:-54;z-index:2' stroked="f" filled="f" href="MonLien"
points="85 96 85 149 94 152 93 72 85 69 75 109 65 93 57 88 54 145 62 149 64 106 76 133 85 96"></v:polyline>

<![endif]>

<![if !vml]>
<img     style='width:250;height:210' usemap="#Map3" src="MonImage.png" border="0">
<![endif]>

<map name="Map3">
<area shape="poly" coords="85 96 85 149 94 152 93 72 85 69 75 109 65 93 57 88 54 145 62 149 64 106 76 133 85 96"
 href="MonLien" target="_blank">
</map>

ASTUCE :
Pour localiser les zones réactives, visualiser d'abord votre version VML en changeant l'attribut filled="f" par filled="t".
Votre zone passera ainsi de la transparence au blanc opaque, et pourra facilement être repérée.
Quand la position est établie, faites le calcul inverse pour définir les coordonnées de la balise <area
Rétablir enfin filled="f" ...et le tour est joué.