Google Sites allow to Edit HTML and to add an image-map. An image-map is an image with clickable areas. We use the attribute usemap to tell the browser an image is an image-map :
An image defined as image-map
<img title="title of image" alt="alternate text" src="URL of image" style="width: xxxpx; height: xxxpx;"
usemap="
#mapid">
The map tag
The <map> tag is used to define a client-side image-map. The name attribute is required in the map element. This attribute is associated with the <img>'s usemap attribute and creates a relationship between the image and the map. The map element contains a number of area elements, that defines the clickable areas in the image map.
<map name="
mapid">
<area title="title of area" href="URL of target"
shape=rect/circle/poly
coords="..."
alt="alternate text for area">
<area ...>
...
<area ...>
</map>
The href attribute specifies the URL for the destination that should be chosen if this area was selected. If you specify nohref instead, this area won't do anything.
shape and coords define the actual region. Shape can be a rectangle (rect), circle, or polygon (poly), and coords should contain a set of coordinates describing that shape. This is done with a comma separated list of numbers.
Syntax for Coords
The syntax for coords depends on what shape we choose.
A rectangle has four coordinates. The first specifies the top left corner, and the second the bottom right corner of the rectangle. For example, <area shape=rect coords="0,0,9,9"> would specify a rectangle of 10x10 pixels, starting in the top left corner of the image.
A circle is defined by its center and radius. The coords attribute first specifies the coordinates of the center, and then the radius of the circle, in pixels. For example, <area shape=circle coords="10,10,5"> would specify a circle with radius 5 at location (10,10) in
the image.
A polygon is built up by a list of coordinates. They are all connected in the order we present, and the last coordinate pair is connected to the first. This way we can build arbitrary figures. For example, <area shape=poly coords="10,50,15,20,20,50"> would specify a triangle, with edge locations (10,50), (15,20) and (20,50).
A real example
We create the following image-map, with 7 areas :
<img title="Réserve des Administrateurs" alt="Réserve des Administrateurs"
src="http://www.saintpierre.ch//cmsFiles/administrateurs-blanc.jpg" width=695 height=328 useMap="
#mymap">
<map name="
mymap">
<area title="Fendant du Valais AOC Réserve des Administrateurs" href="http://www.vins-schenk.ch/pdf.asp?idp=221"
shape=rect alt="Fendant du Valais AOC Réserve des Administrateurs"
coords="0,1,93,330">
<area title="Johannisberg de Chamoson AOC Réserve des Administrateurs" href="http://www.vins-schenk.ch/pdf.asp?idp=223"
shape=rect alt="Johannisberg de Chamoson AOC Réserve des Administrateurs"
coords="93,1,194,330">
<area title="Petite Arvine du Valais AOC Réserve des Administrateurs" href="http://www.vins-schenk.ch/pdf.asp?idp=227"
shape=rect alt="Petite Arvine du Valais AOC Réserve des Administrateurs"
coords="192,0,294,330">
<area title="Heida du Valais AOC Réserve des Administrateurs" href="http://www.vins-schenk.ch/pdf.asp?idp=222"
shape=rect alt="Heida du Valais AOC Réserve des Administrateurs" coords="292,0,397,330">
<area title="Muscat du Valais AOC Réserve des Administrateurs " href="http://www.vins-schenk.ch/pdf.asp?idp=226"
shape=rect alt="Muscat du Valais AOC Réserve des Administrateurs"
coords="396,2,494,330">
<area title="Malvoisie du Valais AOC Réserve des Administrateurs" href="http://www.vins-schenk.ch/pdf.asp?idp=224"
shape=rect alt="Malvoisie du Valais AOC Réserve des Administrateurs"
coords="492,1,593,330">
<area title="Chardonnay du Valais AOC Réserve des Administrateurs" href="http://www.vins-schenk.ch/pdf.asp?idp=219"
shape=rect alt="Chardonnay du Valais AOC Réserve des Administrateurs"
coords="592,0,702,330">
</map>
The Result
More Informations
Find Wines
