Tables Attributes Image Map

 Tables are defined with the tag.  A table is divided into rows with the tag.  Each row is divided into data cells with the tag.

Data Data First Row Second Row 2 colom

BORDER WIDTH HEIGHT CELLSPACING CELLPADDING ALIGN BGCOLOR

ALIGN "Right"> VALIGN "Bottom" "Baseline" BGCOLOR WIDTH, HEIGHT, BGCOLOR COLSPAN, ROWSPAN

 An image map is a way of defining "hot spot" links within an image on a Web page.  This means that, rather than having the whole image behave as one link, you can have different links within the one image. ( Example ) Example

 Creating an image map involves using the tags.

1. The tag: To associate an image map with an image, we simply add the usemap attribute to the standard tag for the image

 The map itself is defined using the tag.  The tag attributes:  Attribute name = "value" Identifies the image map......

 The hot spots within the map are defined using the tag.  The area element is nested within the map element.  It’s used to tell the browser where the hot spots are in the image, and what the hot spots need to link to.

 Attribute shape = "value"  Specifies the shape of the area,  Possible values: ▪ rect, circle, poly  Attribute coords ="area-coordinates"  Specifies the coordinates that define the corners of the shape.



ShapeCoordinatesDescription rectcoords="x1,y1,x2,y2"The top left and bottom right corners of the rectangle circlecoords="x,y,r"The centre and radius of the circle polycoords="x1,y1,x2,y2,x3,y3,..." The corners of the polygon

<area shape="rect" coords="0,0,82,126" alt="Sun"> <area shape="circle" coords="90,58,3" alt="Mercury"> <area shape="circle" coords="124,58,8" alt="Venus“> <area shape="rect" coords="0,0,82,126" alt="Sun"> <area shape="circle" coords="90,58,3" alt="Mercury"> <area shape="circle" coords="124,58,8" alt="Venus“>

<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.html"> <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.html"> <area shape="circle" coords="124,58,8" alt="Venus" href="venus.html"> <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.html"> <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.html"> <area shape="circle" coords="124,58,8" alt="Venus" href="venus.html">

<area shape="circle" coords="58,50,40" href=“ htm" alt="Circle" > <area shape="rect" coords="136,11,227,89" href=“ htm" alt="Rectangle" > <area shape="poly" coords="309,13,358,89,257,89" href=“ htm" alt="Triangle" > <area shape="circle" coords="58,50,40" href=“ htm" alt="Circle" > <area shape="rect" coords="136,11,227,89" href=“ htm" alt="Rectangle" > <area shape="poly" coords="309,13,358,89,257,89" href=“ htm" alt="Triangle" >

Example