Main Features of HTML Image

HTML Embedded Content – Part 1

Foreword: In this part of the series I talk about the main features of HTML image.

By: Chrysanthus Date Published: 18 Jan 2016

Introduction

This is part 1 of my series, HTML Embedded Content. In this part of the series I talk about the main features of HTML image.

Pre-knowledge
At the bottom of this page, you have links to the different series you should have read before coming here, in order to understand this series.

Resource
A resource is a piece of software that the HTML document can download into the browser page. Examples of resources are image file, audio (sound) file, video file, ECMAScript file, CSS file, and application file such as the Java language file.

Embedded Content
Embedded content is content that imports another resource into the document, or content from another vocabulary (language) that is inserted into the document. Examples of embedded content are image, audio and video. When image, audio, and video files are downloaded, they take effect at a particular portion on the HTML document. You can actually see the portion they occupy.

In this series I talk about the following embedded contents: img, audio, video, embed, object, and iframe. Other embedded contents are: canvas, math, and svg, which I will talk about in different series, in the volume.

The img Element
The img (or image) element displays image downloaded from a web server (website). The img element is an inline-block element: this means, it would fit itself as a block, within a line of text (with other inline elements). The basic image tag is:

<img src="http://www.site.com/dir1/file.ext" alt="text description">

There is no end tag.

Attributes of the img Element
The following are attribute names and their brief meanings. Below I give detail descriptions of the attributes.

src - Address of the resource
alt - Replacement text for use when images are not available
width - Horizontal dimension
height - Vertical dimension
usemap - Name of image map to use
crossorigin - How the element handles crossorigin requests
ismap - Whether the image is a server-side image map

The src Attribute
The value of this attribute is a URL of the image file in a website, e.g.

src="http://www.site.com/dir1/diagram.jpg"

The alt Attribute
The value of the alt attribute is a short description of the image. It can be a phrase, a sentence, or more than one sentence. In case the image cannot be displayed, the reader will read the description. It is also useful for blind people. For such people, the value is read to them (by a speech synthesizer). The value of the alt attribute is not a tooltip in modern browsers.

The width and height Attributes
The image at the server has intrinsic width and height. However, you can use the img width and height attributes to give different width and height to be displayed. The value should be in px and does not have to be in quotes. Example:

    width = 200px

There should be no space between the 200 and px. Try the following code with a small image named, smallImg.jpg in the same directory as the HTML file:

<!DOCTYPE HTML>
<html>
<head>
    <title>Sample</title>
</head>
<body>

    <img src="smallImg.jpg" width=200px alt="text description">

</body>
</html>

Resolution: The word, resolution, refers to the amount of details within the image displayed. The higher the resolution, the closer the image (picture) resembles a real life scene. When using the width attribute, choose a width that is equal to or less than the intrinsic width of the image at the server, in order to maintain good view (good resolution). If you choose a width value that is higher, there will be lose of resolution and the image will have blobs.

You should avoid using the height attribute. Whenever you give the width, the browser chooses an appropriate height for you.

Note: if you do not give the image, width and height attributes, then intrinsic dimensions will be used.

The usemap Attribute
This attribute enables areas of the same image to be converted to hyperlinks; one area per link.

I will talk about the other img attributes later.

The area Element
The area element identifies an area, which is made a hyperlink, on an image. You can have more than one such area on the same image. The area element is a single tag element. The attributes and their brief meanings are as follows. Explanations of the attributes are given below.

href - Address of the hyperlink
alt - Replacement text for use when images are not available
download - Whether to download the resource instead of navigating to it, and its file name if so
shape - The kind of shape to be created in an image map
coords - Coordinates for the shape to be created in an image map
hreflang - Language of the linked resource
rel Relationship between the document containing the hyperlink and the destination resource
target - Browsing context for hyperlink navigation
type - Hint for the type of the referenced resource

href: The value of the href attribute is the URL of the resource (web page) at the server.

alt: The value of this attribute is slightly different from the same attribute of the img element. Here, the value (text) is indicating the nature of the hyperlink resource at the server.

download: This is a Boolean attribute, meaning its presence is true and its absence is false. When the hyperlink (area) is clicked, you may want the resource to come as a new page to the browser or come (be downloaded) to the computer and be saved in the hard disk. If you want to save the resource in the hard disk, then this attribute should be present; otherwise it should be absent. Well, if the attribute is present, then it can be treated as a non-Boolean attribute. This means it can have a value (e.g. download="myFile.ext"), which is the filename of which the resource will be saved as.

shape: The shape attribute is an enumerated attribute. This means it has a set of name values to choose from: it can be circle, poly or rect. Again, an image can have (consist of) different areas, which are links to resources at the server. Each area has a shape; the area can be a circle, a rectangle or a polygon (irregular shape, e.g. triangle or pentagon with unequal sides). The value, circle, is for a circular shape; the value, rect is for a rectangle (including square); and the value, poly is for a polygon.

coords: If this attribute is absent, then the whole image is considered as one area. If present, then the corresponding area within the image, having a shape, is the hyperlink.

Recall: the pixel (px) is the smallest dot on the screen. The whole image (img element) is a rectangle. Now, the top-left corner of the image is position zero. As you move from that corner (with your eyes) pixels are number: 0, 1, 2, 3, 4, etc. These are said to be the x coordinate pixels. As you move down from the same top-left corner, pixels are numbered, 0, 1, 2, 3, 4, etc. These are the y coordinate pixels.

Circle State: If the area is a circle, then the value of the coords attribute has 3 integers (whole numbers). The first integer is the distance in px from the left edge of the image to the center of the circle (but without typing px); the second one is the distance in px from the top edge of the image to the center of the circle (but without typing px). The third integer is the radius of the circle in px (but without typing the px). The radius is half the diameter of the circle. The diameter is the longest distance across the circle.

Rectangle State: If the area is a rectangle, then the value of the coords attribute has 4 integers in px (each without typing px). The first is the distance from the left edge of the image to the left side of the rectangle; the second is the distance from the top edge of the image to the top side of the rectangle; the third is the distance from the left edge of the image to the right side; and the fourth is the distance from the top edge to the bottom side (of the rectangle).

Polygon State: If the area is a polygon, then the coords attribute has pairs of integers in px (but without typing px). If the polygon is a triangle, then there will be three pairs, each pair for each vertex (sharp point) of the triangle. So, there would be six integers, all separated by commas. Each pair of integers must represent a vertex given as the distances from the left and the top edges of the image to the vertex, and all the pairs together must represent the vertices of the triangle, in order. If the area were a four-sided polygon (not a regularly shaped rectangle), then there would be four vertices and so four pairs of integers, in order. If the area were a five-sided polygon, there would be five angle points (vertices) and so five pairs of integers, in order. Same scheme applies to more sided polygons.

All the above integers apply to an image whose width and height are those of the image width and height attributes, not the intrinsic widths and heights.

I will talk about the other area element attributes later.

The map Element
The map element is like a grouping element to group the area elements. It is a double tag element. It has one attribute, which is name. In order to convert areas of an image to hyperlinks, the img element should have the attribute, usemap. The value of usemap is text in quotes, beginning with #. The value of the name attribute of the map element is the text without # of the usemap attribute.

The img usemap attribute and the map name attribute, connect the image and the group (map) of areas.

Image Map
An image map is an image with areas that are hyperlinks. To have an image map, you need an image element, a map element and area elements. The usemap attribute of the image element and the name attribute of the map element connect the image and the area group (map). The map element nests the area elements, but is separated from the img element. Read and try the following example for a small image in the same directory as the HTML file.

<!DOCTYPE HTML>
<html>
<head>
    <title>Sample</title>
</head>
<body>

<p>
Please select a shape:
<img src="smallImg.jpg" width=500px height=500px usemap="#shapes"
      alt="Four shapes are available: a box, a circle, a triangle, and a four-pointed star.">
<map name="shapes">
  <area shape=rect coords="25,25,125,125" href="box.html" alt="box">
  <area shape=circle coords="200,75,50" href="circle.html" alt="circle">
  <area shape=poly coords="325,25,262,125,388,125" href="triangle.html" alt="triangle">
  <area shape=poly coords="450,25,435,60,400,75,435,90,450,125,465,90,500,75,465,60" href="star.html" alt="star">
</map>
</p>

</body>
</html>

The last area is actually a four-pointed star.

That is it, for this part of the series. We stop here and continue in the next part.

Chrys

Broad Network

Related Articles

Main Features of HTML Image

HTML Embedded Content – Part 1

Introduction

Related Links

Comments