Image
This document was uploaded by user and they confirmed that they have the permission to share it. If you are author or own the copyright of this book, please report to us by using this DMCA report form. Report DMCA
Overview
Download & View Image as PDF for free.
More details
- Words: 711
- Pages: 5
F.4 CIT – HTML – Image
page 1
Introduction Images are inserted into HTML documents using the![]()
tag. Different areas of an image can be linked to certain actions by image maps. ![]()
Tag ![]()
tag takes at least 1 attribute, src. Besides src, image properties can be specified by other attributes: alt, height, width, align, lowsrc, border, hspace and vspace. Attributes: 1. src Usage: 
in HTML or in XHTML. Example:
2.
1.
2. 
Description: This indicates the location of the source image. The path can be absolute or relative. By default, the base of a relative reference will be the same as the absolute path of the HTML document, but this base can be overridden by specifying the
alt text
Figure 1a. alt value shown when the mouse is over the image
Figure 1b. alt value shown when the image cannot be shown
F.4 CIT – HTML – Image
3.
page 2
height, width Usage: Example: Description: These two attributes controls the height and the width of the image. The value of these two attributes can be defined in pixel or relative.
Figure 2a. height=”100” width=”200”
4.
Figure 2b. height=”50%” width=”15%”
align Usage:
Example:
Description: The align attributes specifies how the components put in front of or behind the image.
Figure 3a. Default alignment
Figure 3b. align=”TOP”
F.4 CIT – HTML – Image
page 3
Figure 3c. align=”MIDDLE”
Figure 3d. align=”BOTTOM”
Figure 3e. align=”LEFT”
Figure 3f. align=”RIGHT”
Note: The above web page content follow a structure: Test 1…Test 2…
5.
border Usage:
Example:
Description: The border attributes specifies the width (in pixel) of the border which surrounds the image.
Figure 4.
6.
hspace, vspace Usage:
border=”10”
F.4 CIT – HTML – Image
page 4
Example:
Description: vspace and hspace respetively define the vertical and horizontal spacing (in pixel) between the image and its previous and following components.
Figure 5a. Default spacing
Figure 5b. vspace=”50”
Figure 5c. hspace=”50”
Figure 5d. vspace=”50” hspace=”50”
Note: The above web page content follow a structure: Test 1Test 2
Image Map An image can link to another location by using an tag (to be discussed in later chapter). If we want to put several links on the same image, an image map is needed. The usemap attribute of![]()
tag with the use of <MAP> tag serves such purpose. Usage: <map name=”map_name”> <area shape=”rect/poly/circle” coords=”x1, y1, x2, y2, ...” href=”URL” alt=”description”> <area shape=”rect/poly/circle” coords=”x1, y1, x2, y2, ...” nohref alt=”description”> ...
F.4 CIT – HTML – Image
page 5
Example:
<map name="Map"> <area shape="rect" coords="0, 0, 100, 100" href="http://www.yahoo.com" alt="Yahoo!"> <area shape="circle" coords="400, 100, 100" href="test2.htm" alt="Cannot access"> <area shape="poly" coords="0, 200, 100, 300, 0, 400" nohref alt="No link">
Description: One can define more than one maps with different names which is defined by the name attribute of the <map> tag. However, an image can only use one image map by assigning the map name (remember to include the “#” sign before the map name) in the usemap attribute. The linked area defined on the image can be rectangular, circular or polygonal. The area shape is specified by the shape attribute of the <map> tag while the location is defined by the coordinates given in the coords attribute. For rectangular area, the coordinates of the upper left and lower right corners must be specified. For circular area, the coordinates of the center and the radius must be specified. And for polygonal area, the coordinates of the vertices have to be specified. Note: All the coordinates are given in pixels, and the position of (0, 0) is the top-left hand corner of the image. (0, 0)
x
y Figure 6. Coordinate system of graphical display.
page 1
Introduction Images are inserted into HTML documents using the
2.
1.
2. Description: This indicates the location of the source image. The path can be absolute or relative. By default, the base of a relative reference will be the same as the absolute path of the HTML document, but this base can be overridden by specifying the Description: This alt attribute specifies descriptive text which is displayed when the mouse is over the image or the image cannot be shown.alt text
Figure 1a. alt value shown when the mouse is over the image
Figure 1b. alt value shown when the image cannot be shown
F.4 CIT – HTML – Image
3.
page 2
height, width Usage:
Description: These two attributes controls the height and the width of the image. The value of these two attributes can be defined in pixel or relative.Figure 2a. height=”100” width=”200”
4.
Figure 2b. height=”50%” width=”15%”
align Usage:
Example:
Description: The align attributes specifies how the components put in front of or behind the image.
Figure 3a. Default alignment
Figure 3b. align=”TOP”
F.4 CIT – HTML – Image
page 3
Figure 3c. align=”MIDDLE”
Figure 3d. align=”BOTTOM”
Figure 3e. align=”LEFT”
Figure 3f. align=”RIGHT”
Note: The above web page content follow a structure: Test 1…
5.
border Usage:
Example:
Description: The border attributes specifies the width (in pixel) of the border which surrounds the image.
Figure 4.
6.
hspace, vspace Usage:
border=”10”
F.4 CIT – HTML – Image
page 4
Example:
Description: vspace and hspace respetively define the vertical and horizontal spacing (in pixel) between the image and its previous and following components.
Figure 5a. Default spacing
Figure 5b. vspace=”50”
Figure 5c. hspace=”50”
Figure 5d. vspace=”50” hspace=”50”
Note: The above web page content follow a structure: Test 1
Image Map An image can link to another location by using an tag (to be discussed in later chapter). If we want to put several links on the same image, an image map is needed. The usemap attribute of
F.4 CIT – HTML – Image
page 5
Example:
<map name="Map"> <area shape="rect" coords="0, 0, 100, 100" href="http://www.yahoo.com" alt="Yahoo!"> <area shape="circle" coords="400, 100, 100" href="test2.htm" alt="Cannot access"> <area shape="poly" coords="0, 200, 100, 300, 0, 400" nohref alt="No link"> Description: One can define more than one maps with different names which is defined by the name attribute of the <map> tag. However, an image can only use one image map by assigning the map name (remember to include the “#” sign before the map name) in the usemap attribute. The linked area defined on the image can be rectangular, circular or polygonal. The area shape is specified by the shape attribute of the <map> tag while the location is defined by the coordinates given in the coords attribute. For rectangular area, the coordinates of the upper left and lower right corners must be specified. For circular area, the coordinates of the center and the radius must be specified. And for polygonal area, the coordinates of the vertices have to be specified. Note: All the coordinates are given in pixels, and the position of (0, 0) is the top-left hand corner of the image. (0, 0)
x
y Figure 6. Coordinate system of graphical display.
