1. Tables Attributes Image Map

2.  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.

3. Data Data First Row Second Row 2 colom

5. BORDER WIDTH HEIGHT CELLSPACING CELLPADDING ALIGN BGCOLOR

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

13.  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

14.  Creating an image map involves using the 1 1. 2. 3. tags.

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

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

17.  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.

18.  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.

19. 

22. 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

23. <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“>

24. <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">

25. <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" >

26. Example