Image

F.
4 CIT – HTML – Image page 1
Introduction
Images are inserted into HTML documents using the <IMG> tag. Different areas of an image can be
linked to certain actions by image maps.
<IMG> Tag
<IMG> 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:
<img src=”URL”> in HTML or
<img src=”URL” /> in XHTML.
Example:
1. <img src=”http://www.myServ.com/img/myImg.gif”>
2. <img src=”img\myImg.gif”>
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 <BASE> tag in the
<HEAD> section.
2. alt
Usage:
<img alt=”description” src=”URL”>
Example:
<img alt=”This is my image” src=”img\myImg.gif”>
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 Figure 1b. alt value shown when the image
is over the image cannot be shown
F.4 CIT – HTML – Image page 2
3. height, width
Usage:
<img src=”URL” height=”value” width=”value”>
Example:
<img src=”img\myImg.gif” height=”100” width=”200”>
<img src=”img\myImg.gif” height=”50%” width=”15%”>
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” Figure 2b. height=”50%” width=”15%”
4. align
Usage:
<img src=”URL” align=”TOP/MIDDLE/BOTTOM/LEFT/RIGHT”>
Example:
<img src=”img\myImg.gif” align=”MIDDLE”>
Description:
The align attributes specifies how the components put in front of or behind the image.
Figure 3a. Default alignment Figure 3b. align=”TOP”

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…<img…>Test 2…
5. border
Usage:
<img src=”URL” border=”border_width”>
Example:
<img src=”img\myImg.gif” border=”10”>
Description:
The border attributes specifies the width (in pixel) of the border which
surrounds the image.
Figure 4. border=”10”
6. hspace, vspace
Usage:
<img src=”URL” vspace=”size” hspace=”size”>

Example:
<img src=”img\myImg.gif” vspace=”100”>
<img src=”img\myImg.gif” hspace=”100”>
<img src=”img\myImg.gif” vspace=”100” hspace=”100”>
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<img…>Test 2
Image Map
An image can link to another location by using an <a> 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 <img> tag with the use of <MAP> tag serves such purpose.
Usage:
<img src=”URL” usemap=”#map_name”>
<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”>
...
</map>
Example:
<img src="img\PigA.gif" alt="This is a test" usemap="#Map">
<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">
</map>
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
Figure 6. Coordinate system of graphical display.

Image

Diunggah oleh

Informasi Dokumen

Deskripsi Asli:

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Image

Diunggah oleh

Hak Cipta:

Format Tersedia

F.

4 CIT – HTML – Image page 1

Figure 2a. height=”100” width=”200” Figure 2b. height=”50%” width=”15%”

Figure 3a. Default alignment Figure 3b. align=”TOP”

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:

<img src=”URL” vspace=”size” hspace=”size”>

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:

Figure 6. Coordinate system of graphical display.

Anda mungkin juga menyukai