The Lesson 17 contents pertain to image maps. An image map is souce code which utilizes coordinates to define segments of a particular image, and for each segment, utilizes the href attribute is to create a hyperlink. With the utilization of a particular image and a related image map, a single graphic image can be utilized to provide multiple hyperlinks.
An image and the related image map for a particular group of web pages are components of each web page in the group. This utilization of one image on a number of web pages is as efficient use of graphics. Graphics can also make the hyperlinks more attractive. The image and related image map can be utilized in a frame of a frameset so that the links (menu) are continuously available.
Lesson 17 is comprised of a group of five web pages. The file names for the five web pages are as follows;
Less17CodePage1.html
Less17CodePage2.html
Less17CodePage3.html
Less17CodePage4.html
Less17CodePage5.html
Each web page of the five web pages contains three images and the related image maps. Each image map pertains to the definition of a common shape of an image segment. The three common shapes presented and demonstrated are as follows;
Rectangles: first image map; this syntax also applies to squares
Circles: second image map
Polygons: three or more straight sides; third image map
Viewing the image maps for the lesson web pages may be helpful in comprehending the source code in the above frame and the explanations of same in this frame. This frame set does not have a return link, use the "Back" button on your browser to return to this lesson.
The images utilized in this lesson were created with Microsoft Paint (a graphic application that is available with Microsoft Windows 95 which generates bitmap files). This graphic software provides the coordinates on the graphic for the location of the cursor (moving the cursor to any point on the graphic yields the coordinates for that point). When each graphic was created, the applicable coordinates for this lesson were determined. These bitmap graphic files were then converted to the gif files which are utilized in this lesson.
Application software is available for creating image maps for graphic images. This software can be utilized to create complex image maps. An example of a common image map is one that relates to a graphic image of the United States (each state is usually a hyperlink). In this instance, a complex set of coordinates is required to define each state (each hyperlink segment) on the image map (in this instance, image map software is beneficial). This software is beneficial to anyone who experiences too much difficulty with this lesson due to a lack of familiarity with coordinates.
Users who are familar with coordinates will be able to skim over many of the explanations of coordinates in this lesson.
The source code for each of the five web pages in this lesson is identical except for the "title" text and the h1 heading text which displays the web page number in the range of 1 to 5 (other than the three images and the three related image maps, these web pages are skeleton web pages). These pages can contain as many links of as many different types as desired.
The source code in the above frame and the explanations of same in this frame are for the web page file Less17CodePage1.html (these explanations are also applicable to the source code for each of the other four web pages in this lesson).
In the above source code, the title text is as follows;
Lesson 17 Page 1
In the body tag, the bgcolor attribute value of "ffffff" sets the background color of the web page to "white".
The first component in the body of this source code is a center aligned h1 heading containing the heading text of "Page 1 : Image Maps" (a font tag pair is utilized to set the color of the heading text).
The next line of souce code is an opening center tag (all web page components between the opening and closing center tags are center aligned on the web page). Scroll to and view this code in the above frame.
The next line of code is an image tag. Scroll this code into view in the above frame.The only new content in this code is the usemap attribute. The usemap attribute value specifies the name of the related map as "pagelinks1", (in the usemap attribute value, the name of the related map is preceded by the "#" symbol as a matter of syntax).
The next seven lines of code create the image map applicable to the above image (Less17gif1.gif). Scroll all seven lines of this code into view in the above frame.
The first line of this code is the opening map tag. The identity of this tag is "map". This tag utilizes the name attribute to specify the name of this image map (pagelinks1). This name must be the same as the usemap attribute value as specified in the related image tag (in the name attribute value, the "#" symbol is omitted as a matter of syntax).
The next line of code is the first area tag for this image map. The content of the tag is as follows:
area shape="rect" coords="2, 2, 99, 34" href="Less17CodePage1.html"
The tag identity is, "area". The shape attribute has the value of "rect", specifying that the shape of this segment of the image is a rectangle (this attribute value is also applicable to a square).
The next attribute, "coords" (coordinates), has the value of "2, 2, 99, 34". This attribute value defines a rectangle which is an image segement. The coordinates in this attribute value are explained below.
The next attribute, "href", creates the hyperlink for the image segment defined in this tag. The syntax applicable to the href attribute in the anchor tag applies in the area tag. The href attribute value is as follows;
Less17CodePage1.htmlIn this instance, this web page is linked to itself (this is not a useful condition, but is a necessary condition in order for all pages in the group to utilize the same image and the same related image map).
Coordinates are read in pairs of numbers with each pair of numbers specifying a point on the graphic image. In the first coordinate pair, "2, 2", the first "2" specifies that this point is a distance of two pixels from the left edge of the image, and the second "2" specifies that this point is a distance of two pixels from the top edge of the image. These two numbers define one point (one pixel postion) on the image. This point is the top left corner of this image segment.
In the second coordinate pair, "99, 34", the first number specifies that this point is a distance of 99 pixels from the left edge of the image, and the second number specifies that this point is a distance of 34 pixels from the top edge of the image. This point is the lower right corner of this image segment.
When the shape of the segment of the image is a recatngle (or square), any two points which are diagnol corners define the size and location of the segment. The browser software is programmed to determine and utilize the rectangler (or square) image segment based on this data.
The coordinates for the two unspecified corners can be derived from the coordinates for the two specified corners. The top right corner, an unspecified corner, will be the same distance from the left edge of the image as the bottom right corner which is a distance of 99 pixels (the first number in the second coordinate pair). The top right corner corner will be the same distance from the top edge of the image as the top left corner which is a distance of 2 pixels (the second number in the first coordinate pair). The coordinates for the top right corner are "99, 2". The same logic applies for deriving the coordinates for the bottom left corner, the other unspecified corner (the coordinates for this corner are "2, 34").
The coords attribute value can be for any corner of the image segement, matched with the coordinates for the diagnol corner of the segment. This means that four possible coords values are valid. In this instance, the four valid coords values are as follows;
"2, 2, 99, 34" (top left corner and bottom right corner; same as above)
"99, 2, 2, 34" (top right corner and bottom left corner)
"99, 34, 2, 2" (bottom right corner and top left corner)
"2, 34, 99, 2" (bottom left corner and top right corner)
The next line of code is the second area tag for this image map. The content of this tag is as follows:
area shape="rect" coords="101, 2, 199, 34" href="Less17CodePage2.html"
The shape attribute value specifies that the shape of this image is a rectangle.
The coordinates in the coords attribute value are explained below.
The href attribute value creates the hyperlink for the image segment defined in this tag. This hyperlink is to the second web page in the group, "Less17CodePage2.html".
In the first coordinate pair, the first number, "101", specifies that this point is a distance of 101 pixels from the left edge of the image, and the second number, "2" specifies that this point is a distance of two pixels from the top edge of the image. This point is the top left corner of this image segment.
In the second coordinate pair, the number, "199", specifies that this point is a distance of 199 pixels from the left edge of the image, and the second number, "34", specifies that this point is a distance of 34 pixels from the from the top edge of the image. This point is the lower right corner of this image segment.
The rectangle defined in the first area tag ended 99 pixels from the left edge of the image. The rectangle defined in this area tag begins 101 pixels from the left edge of the image (positioning this rectangle two pixels to the right of the first rectangle).
The numbers, "2 and 34", appear in the same positions in both of the first two coords attribute values, causing both rectangles to be the same height, and causing both rectangles to be the same distance from the top of the image (to be in a row).
As a distance from the left edge of the image, the number 100 was skipped (the first rectangler segment ends at a distance of 99 pixels from the left edge of the image and the second rectangler segment begins 101 pixels from the left edge of the image). These skipped pixels were used to draw the vertical line which separates the two rectangler segments. These pixels are not a part of either rectangler segment (not a part of either hyperlink) and are excluded from both rectangler segments accordingly. When the cursor is positioned on this line, the hyperlink cursor (the hand) changes to a regular cursor (the arrowhead).
The next line of code is the third area tag for this image map. The content of the tag is as follows:
area shape="rect" coords="201, 2, 299, 34" href="Less17CodePage3.html"
The shape attribute value specifies that the shape of this image is a rectangle.
The coordinates in the coords attribute value are explained below.
The href attribute value creates the hyperlink for the image segment defined in this tag. This hyperlink is to the third web page in the group, "Less17CodePage3.html"
In the first coordinate pair, the first number, "201", specifies that this point is a distance of 201 pixels from the left edge of the image, and the second number, "2" specifies that this point is a distance of two pixels from the top edge of the image. This point is the top left corner of this image segment.
In the second coordinate pair, the number, "299", specifies that this point is a distance of 299 pixels from the left edge of the image, and the second number, "34", specifies that this point is a distance of 34 pixels from the from the top edge of the image. This point is the lower right corner of this image segment.
The rectangle defined in the second area tag ended 199 pixels from the left edge of the image. The rectangle defined in this area tag begins 201 pixels from the left edge of the image (positioning this rectangle two pixels to the right of the first rectangle).
The numbers, "2 and 34", appear in the same positions in the first three coords attribute values, causing the three rectangles to be the same height, and causing the three rectangles to be the same distance from the top of the image (to be in a row).
As a distance from the left edge of the image, the number 200 was skipped as a coordinate value for the same reason the number 100 was skipped. These pixels are used to draw a vertical line between the second and third rectangle. These are not a part of either rectangler segment (not a part of either hyperlink) and are excluded from both rectangler segments accordingly. When the cursor is positioned on this line, the hyperlink cursor (the hand) changes to a regular cursor (the arrowhead).
The next line of code is the fourth area tag for this image map. The content of the tag is as follows:
area shape="rect" coords="2, 36, 149, 69" href="Less17CodePage4.html"
The shape attribute value specifies that the shape of this image is a rectangle.
The coordinates in the coords attribute value are explained below.
The href attribute value creates the hyperlink for the image segment defined in this tag. This hyperlink is to the fourth web page in the group, "Less17CodePage4.html"
In the first coordinate pair, the first number, "2", specifies that this point is a distance of 2 pixels from the left edge of the image, and the second number, "36" specifies that this point is a distance of 36 pixels from the top edge of the image. This point is the top left corner of this image segment.
In the second coordinate pair, the number, "149", specifies that this point is a distance of 149 pixels from the left edge of the image map, and the second number, "69", specifies that this point is a distance of 69 pixels from the from the top edge of the image map. This point is the lower right corner of this image segment.
The bottom of each rectangle in the first row is 34 pixels from the top of the image. The rectangle defined in this area tag is 36 pixels from the top of the image, (positioning this rectangle in the second row).
The first rectangle in both rows are aligned by the first number (the number 2) in the coords attribute values for these two recatngles (both rows begin 2 pixels from the left edge of the image).
As a distance from the top edge of the image, the number 35 was skipped (the bottom of the first row is 34 pixels from the top edge of the image and the top of the second row 36 pixels from the top edge of the image). These skipped pixels were used to draw the horizontal line which separates the two rows. These pixels are not a part of any image segment (not a part of any hyperlink) and are excluded from all image segments accordingly. When the cursor is positioned on this line, the hyperlink cursor (the hand) changes to a regular cursor (the arrowhead).
The next line of code is the fifth area tag for this image map. The content of the tag is as follows:
area shape="rect" coords="151, 36, 299, 69" href="Less17CodePage5.html"
The shape attribute value specifies that the shape of this image is a rectangle.
The coordinates in the coords attribute value are explained below.
The href attribute value creates the hyperlink for the image segment defined in this tag. This hyperlink is to the fifth web page in the group, "Less17CodePage5.html"
In the first coordinate pair, the first number, "151", specifies that this point is a distance of 151 pixels from the left edge of the image, and the second number, "36" specifies that this point is a distance of 36 pixels from the top edge of the image. This point is the top left corner of this image segment.
In the second coordinate pair, the number, "299", specifies that this point is a distance of 299 pixels from the left edge of the image, and the second number, "69", specifies that this point is a distance of 69 pixels from the from the top edge of the image. This point is the lower right corner of this image segment.
The rectangle defined in the fourth area tag (the first rectangle in this row) ended 149 pixels from the left edge of the image. The rectangle defined in this area tag begins 151 pixels from the left edge of the image (positioning this rectangle two pixels to the right of the first rectangle).
The numbers, "36 and "69", appear in the same positions in both area tags for this row, causing both rectangles to be the same height, and causing both rectangles to be the same distance from the top of the image (to be in a row).
As a distance from the left edge of the image, the number 150 was skipped (the first rectangler segment in this row ends at a distance of 149 pixels from the left edge of the image and the second rectangler segment begins 151 pixels from the left edge of the image). These skipped pixels were used to draw the vertical line which separates the two rectangler segments. These pixels are not a part of either rectangler segment in this row(not a part of either hyperlink) and are excluded from both rectangler segments accordingly.When the cursor is positioned on this line, the hyperlink cursor (the hand) changes to a regular cursor (the arrowhead).
The next line of code is the closing map tag.
The next line of code is a break tag.
The next line of code is an image tag containing the usemap attribute with the value of "#pagelinks2" which identifies the related image map (Less17gif2.gif).
The next seven lines of code create the image map applicable to the above image (Less17gif2.gif). Scroll all seven lines of this code into view in the above frame.
The first line of this code is the opening map tag which utilizes the name attribute value of "pagelinks2" to specify that this image map relates to the above image (Less17gif2.gif).
The next line of code is an area tag with the following content;
area shape="circle" coords="34, 36, 32" href="Less16CodePage1.html"
The shape attribute value specifies that the shape of this image is a circle.
The coords attribute value is explained below.
The href attribute value creates the hyperlink for the image segment defined in this tag. This hyperlink is to the first web page in the group, "Less17CodePage1.html"
In the coords attribute value, the first two numbers, ""34, 36", are a coordinate pair which specify the point on the image which is the center of the circle. This point is located a distance of 34 pixels from the left edge of the image and at a distance of 36 pixels from the top edge of the image. The third number, "32", specifies the radius of the circle (straight line distance from the center of the circle to any edge of the circle) in pixels.
Each line of the next four lines of code is an area tag which defines a circle and the hyperlink applicable for each circle. In each instance, the first number in the coords attribute value is the corresponding number in the previous tag plus 65 (this moves each circle immediately to the right of the previous cirlce). In each instance, the second number in the coords attribute value is the same (32). This specifies that all of the circles are the same distance from the top edge of the image (the circles are in a row). In each instance, the third number in the coords attribute value is the same (32). This specifies that all circles have the same radius (are the same size).
The next line of code is the closing map tag.
The next line of code is a break tag.
The next line of code is an image tag containing the usemap attribute with the value of "#pagelinks3" which identifies the related image map (Less17gif3.gif).
Although this image and the related image map has hyperlinks to only the first three pages of the group, the image and the related image map are components of all all five pages in the group. This means that the first three pages in the group can be accessed from any of the five pages in the group.
The next eleven lines of code create the image map applicable to the above image (Less17gif3.gif).
The first line of this code is the opening map tag which utilizes the name attribute value of "pagelinks3" to specify that this image map relates to the above image (Less17gif3.gif). Scroll to and view this code in the above frame.
The next three lines of code are the content of an area tag and are as follows (scroll this code into view in the above frame);
area shape="poly"
coords="26, 3, 78, 3, 101, 26, 101, 78, 79, 100, 25, 100, 3, 78, 3, 26"
href="Less17CodePage1.html"
The first line of this code is comprised of the tag identity (area), the shape attribute and the shape attribute value. The shape attribute value, "poly", specifies that the shape of this image segment is a polygon (an enclosed shape comprised of three for more straight lines).
The second line of this code is comprised of the coords attribute and the coords attribute value. The coordinates in the coords attribute value are explained below.
The third line of this code is an href attribute, creating a hyperlink to web page "Less17CodePage1.html".
The coords attribute value is as follows (the shape of this polygon is comprised of eight straight sides);
"26, 3, 78, 3, 101, 26, 101, 78, 79, 100, 25, 100, 3, 78, 3, 26"
This attribute value is comprised of 8 coordinate pairs. Each coordinate pair specifies a point where two lines are joined (this single point is a part of two lines; this single point is the end of one line and the beginning of another line). The eight locations for this coords attribute value are in a clockwise sequence (reminder; the first number of each coordinate pair is the distance in pixels from the left edge of the image and the second number in each coordinate pair is the distance in pixels from the top edge of the image):
The image can be viewed for clarifications of the coords explanations below. The applicable image is the third image on this page. (this page does not have a return link, use the back button on your browser to return to this page).
The explanations of the coordinates for this polygon are as follows:
Coordinates "26, 3"; end of slanted line in upper left quadrant and beginning of top horizontal line.
Coordinates "78, 3"; end of top horizontal line and beginning of slanted line in upper right quadrant.
Coordinates "101, 26"; end of end of slanted line in upper right quadrant and beginning of right vertical line.
Coordinates "101, 78"; end of right vertical line and beginning of slanted line in lower right quadrant.
Coordinates "25, 100"; end of bottom horizontal line and beginning of slanted line in lower left quadrant.
Coordinates "3, 78"; end of slanted line in lower and beginning of left vertical line.
Coordinates "3, 25"; end of left vertical line and beginning of slanted line in upper left quadrant.
The coordinate pairs must be in sequence around the edge of the image segment. The syntax permits 16 different valid sequences of the 8 coordinate pairs applicable to this polygon. The sequence can begin with any one of the eight coordinate points and, from any of these starting points, can be in a clockwise or counterclockwise direction.
The next 3 lines of code utilize the same syntax as the previous 3 lines of code to define the second polygon.
The next 3 lines of code utilize the same syntax define the third polygon.
The following table displays the coords attribute values for the three polygons (the three image segments) in this image. These allignments of number may be helpful in comprehending the relationships pertaining to distances from the left edge of the image and distances from the top edge of the image.
| Pair 1 From |
Pair 2 From |
Pair 3 From |
Pair 4 From |
Pair 5 From |
Pair 6 From |
Pair 7 From |
Pair 8 From |
||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Left | Top | Left | Top | Left | Top | Left | Top | Left | Top | Left | Top | Left | Top | Left | Top |
| 26 | 3 | 78 | 3 | 101 | 26 | 101 | 78 | 78 | 100 | 26 | 100 | 3 | 78 | 3 | 26 |
| 127 | 3 | 179 | 3 | 202 | 26 | 202 | 78 | 179 | 100 | 127 | 100 | 104 | 78 | 104 | 26 |
| 228 | 3 | 280 | 3 | 303 | 26 | 303 | 78 | 280 | 100 | 228 | 100 | 205 | 78 | 205 | 26 |
In the second row, the number in each "Left" column is 101 greater than the corresponding number in the first row. These increases cause the second image segment to be positioned immediately to the right of the first image segment. The same value increases, from the second row to the third row cause the third immage segment to be positioned immediately to the right of the second image segment. These row to row increases of "Left" values are chracteristic of image segments that are in a row.
The repetitions of numbers in the "Top" columns for the three image map segments are also characteristic of image segments that are in a row. When any three corresponding points for three image segments are the same distance from the top of the image, the three image segments are in a row.
If these three image segments were changed to vertical positioning, each "Left" column value for each of the three image segments would be the same and the "Top" values for the three image segments would reflect the increases.
Lesson 17 Comments:
Some surfers browse the internet with "images" turned off on thier browser. Therefore, any image map shoud be accompanied by non-image hyperlinks. An image map of the United States, with each state being a hyperlink, is usually accompanied by a list of the state abbreviations in text form, with each abbreviation being a hyperlink.
In keeping with this practice, either of the two five page image maps in this lesson would be accompanied by the following (or similar) non-image links (these are functional links to the five web pages in this lesson; these pages do not have return links; use the "Back" button on your browser to return to this page);
| * | Page 1 | * | Page 2 | * | Page 3 | * | Page 4 | * | Page 5 | * |
Different area tags for the same image map can define different shapes (a single image map can be comprised of as many rectangles, and/or as many circles, and/or as many polygons as desired).
As a matter of syntax, image map segments cannot overlap (no one pixel can be part of two image map segments).
Users who complete the 17 lessons, please view this feedback page for a very simple and optional response.
End of Lesson 17.