HTML Concepts: HTML Images- Graphics for the Web Page

There are many image formats available today but formats such as GIF, JPEG, PNG, WMF etc. are more popular than others. When using images, try to use GIF and JPEG formats because these 2 image formats are widely supported by a range of Web Browsers. If you choose a graphics format, the most important point to remember is download speed and image quality. If download time is the main criteria then use low file size images like JPEG for example :- if you are working on online shopping website but if the image quality are more important then you should use GIF images. So Images are very important to beautify as well as to depict many concepts on your web page. Its is true that one single image is worth than thousands of words. So as a Web Developer you should have clear understanding on how to use images in your web pages.

Insert Image - The <img> Element:

<img> tag is use to insert image in the web page. Following is the simple syntax to use this tag.

For Exmaple:-

An image loses its details if it is saved using lossy compression schemes. But is ‘lossless’ compression schemes are used, the details of an image are not lost. However, lossy schemes give much higher compression ratios.

GIF	Lossless	GIF format compresses without losing any detail.
PNG	Lossless	PNG format also compresses without losing any detail.
JPEG	With Loss	JPEG format causes an image to lose details when saved

Not only does the source attribute specify what image to use, but where the image is located. The above image, graphics/chef.gif, means that the browser will look for the image name chef.gif in a graphics folder in the same folder as the html document itself.

	src="chef.gif" means that the image is in the same folder as the html document calling for it.
	src="images/chef.gif" means that the image is one folder down from the html document that called for it. This can go on down as many layers as necessary.
	src="../chef.gif" means that the image is in one folder up from the html document that called for it.
	src="../../chef.gif" means that the image is two folders up from the html document that called for it.
	src="../images/chef.gif" means that the image is one folder up and then another folder down in the images directory.
	src="../../../other/images/chef.gif" means this goes multiple layers up.

Image Attributes:

Following are most frequently used attributes for <img> tag.

width: sets width of the image. This will have a value like 10 or 20%etc.
height: sets height of the image. This will have a value like 10 or 20% etc.
border: sets a border around the image. This will have a value like 1 or 2 etc.
src: specifies URL of the image file.
alt: this is an alternate text which will be displayed if image is missing.
align: this sets horizontal alignment of the image and takes value either left, right or center.
valign: this sets vertical alignment of the image and takes value either top, bottom or center.
hspace: horizontal space around the image. This will have a value like 10 or 20%etc. vspace: vertical space around the image. This will have a value like 10 or 20%etc.
name: name of the image with in the document. · id: id of the image with in the document.
style: this will be used if you are using CSS.
title: specifies a text title. The browser, perhaps flashing the title when the mouse passes over the link.
ismap and usemap: These attributes for the <img> tag tell the browser that the image is a special mouse-selectable visual map of one or more hyperlinks, commonly known as an imagemap.

Image Location in an HTML Document :- An image can be displayed left or right side of the web page. By default image will be displayed on left but if we want to change the alignment of the image we can use align attribute. For example:-

A Simple Example:

<html>

<head>

<title>My First Image in Webpage</title>

</head>

<body>

<h1 align="center">My First Image in Web page</h1>

Welcome to my webpage. I am writing this page using a text editor and plain old html.

By learning html, I'll be able to create web pages like a pro....

which I am of course.

This is my Chef

This is my Chef

</body> </html>

Scaling down an Image :-

It means that the image would be displayed in the size described by the <IMG> tag's Height and Width attributes, irrespective of the actual dimensions of the image. the download time of the image does not reduce if we specify dimensions less than the actual image dimensions.

Scalling Up an image :-

It is similar to scaling down an image by the height and width attributes. But scaling Up can causes deformation of image i.e. as pixelation. So try to avoid it.

Image Attributes - width, height, title, border and align:

Now let us try to set some more attributes:

Wrapping text around images: - when an image is inserted into a document along with text, by default the text is aligned with the bottom of the image. The default alignment can be changed, using the <IMG> tag’s align attribute.

Value	Description
TOP	Aligns the text with the top of the image
MIDDLE	Aligns the text with the middle of the image
BOTTOM	Aligns the text with the bottom of the image

Example 1:

This is the first paragraph that appears above the paragraph with the image!

The image will appear along the right hand side of the paragraph. As you can see this is very nice for adding a little eye candy that relates to the specified paragraph.

The left and right image-alignment values tell the browser to place an image against the left or right margin, respectively, of the current text flow. The browser then renders subsequent document content in the remaining portion of the flow adjacent to the image. The net result is that the document content following the image gets wrapped around the image.

This will produce following result:

Example 2:

You can use vspace or hspace attributes if you want to keep some distance between text and image. Let us revise above example:

This is the first paragraph that appears above the paragraph with the image!

The image will appear along the right hand side of the paragraph. As you can see this is very nice for adding a little eye candy that relates to the specified paragraph.

This will produce following result:

Understanding ImageMaps Or Mouse Sensitive Images

Imagemaps are a kind of navigational tool. As the name suggests and imagemap maps an image to one or several links, using regions called Hot Zones or Hot Spots. These zones can be of several shapes like circular, rectangular and polygonal(upto 100 points). An imagemap can be created with the help of <map> , </map> and within these tags an <AREA> tag. The imagemaps are of 2 kinds, client side imagemaps and serverside iamgemaps.

· A server-side image maps: is enabled by the ismap attribute for the <img> tag and requires access to a server and related image-map processing applications.

· A client-side image maps: is created with the usemap attribute for the <img> tag, along with corresponding <map> and <area> tags.

· Server-Side Image Maps:

You add an image to an anchor simply by placing an <img> tag within the body of the <a> tag. If you want to convert this embedded image into a mouse-sensitive one then add the ismap attribute to the <img> tag which tells the browser that the image is a special map containing more than one link.

When the user clicks at some place within the image, the browser passes the coordinates of the mouse pointer along with the URL specified in the <a> tag to the document server. The server uses the mouse-pointer coordinates to determine which document to deliver back to the browser.

When ismap is used, the href attribute of the containing <a> tag must contain the URL of a server application like a map file or a script to process the incoming request based on the passed coordinates.

The upper-left corner of the image is considered as (0,0) and the coordinates of the mouse position are counted from this corner of the image. The coordinates, preceded by a question mark, are added to the end of the URL.

For example, if a user clicks 50 pixels over and 30 pixels down from the upper-left corner of the image displayed from the following link:

</a>

Then the browser sends (logo.map?50,30) search parameters to the HTTP server which can be processed by any script like vbscript, javascript or cgi script etc.

· Client-Side Image Maps:

Client side image maps are enabled by the usemap attribute of the <img /> tag and defined by special <map> and <area> tags.

The image which you want to insert, can be inserted using <img /> tag as normal, except it carries an extra attribute called usemap. The value of the usemap attribute is the value of the name attribute on the <map> element, which you are about to meet, preceded by a hash sign(#).

The <map> element creates the map for the image and usually follows directly after the <img /> element. It acts as a container for the <area /> elements that actually define the clickable hotspots. The <map> element carries only one attribute, the name attribute, which is the name that identifies the map. This is how the <img /> element knows which <map> element to use.

The <area> element specifies the shape and the coordinates that define the boundaries of each clickable hotspot.

Shapes of the hotspots defined in an imagemap.

rect = x1 , y1 , x2 , y2

rect :-can create a hot spot in rectangular shape for which we have to specify the upper-left(x1,y1) corner and bottom-right corner(x2,y2) coordinates. Therefore, a rectangle which goes from 10,5 to 20,25 would have the attribute coords="10,5,20,25". A rectangle which defines the upper-left quarter of an image might use coords="0,0,50%,50%".

circle = xc , yc , radius

circle :- creates a circular hotspot in an image map. This require three parameters like coordinates of center (Xc,Yc) and the radius of the circle. A circle centered at 200,50 with a radius of 25 would have the attribute coords="200,50,25"; one centered at the image's center and having a diameter of half the image would be defined by coords="50%,50%,25%".

poly = x1 , y1 , x2 , y2 , x3 , y3 , ... xn , yn

Poly-creates a polygon shaped hotspot maximum of 100 points. The various x-y pairs define vertices (points) of the polygon, with a "line" being drawn from one point to the next point. A diamond-shaped polygon with its top point at 20,20 and 40 pixels across at its widest points would have the attribute coords="20,20,40,40,20,60,0,40". A "line" is always drawn from the coordinates of the last point to the coordinates of the first point in order to close the polygon.

All coordinates are relative to the upper-left corner of the image (0,0). Each shape has a related URL. You can use any image software like Paint or any other, to know the coordinates of different positions.

Here's an example from the image map:

This is an example of image-map which has 7 hotspot and I had given the coordinates for all the Hotspot when I click on any shape it is open another image. We can also open an HTML document if we will give the reference to an .HTML file in href attribute of area tag in the above program. This type of image map is generally used in maps application.

HTML Concepts

HTML Images- Graphics for the Web Page

No comments:

Post a Comment

Search This Blog