HTML Images

Image Preliminaries

So far in this titorial, you have created text-only Web pages. They’re perfectly functional, but a bit dull. Web pages are more interesting and attractive when they include graphics.

Much of the Web’s popularity is due to its ability to present graphical content rather than only text, and even a few well placed graphics can make a huge difference in the look of a web page. Graphics of any size increase the time it takes to download a page, however, so you should use them with care to avoid making your pages awkward to access.

Images appear on web pages in two ways: as part of the inline content or as tiling background images. Background images are added using background attribute in body tag or using Cascading Style Sheets. Inline images may be used on web pages in several ways:

• As a simple image. An image can be used on a web page much as it is used in print, as a static image that adds information, such as a company logo or an illustration.
• As a link. As we saw in the previous chapter, an image can be used as a link to another document by placing it in the anchor element.
• As an imagemap. An imagemap is a single image that contains multiple links (“hotspots”) that link to other documents. We’ll look at the markup used to add clickable areas to images in this chapter as well. 

Which image format is suitable for you?

The most common and most widely supported image file types are

GIF: The Graphics Interchange Format (GIF) was the earliest format use in inline images on the Web. GIF format has the ability to encapsulate several images within one file, giving the format animation functionality.
JPEG: JPEG is the acronym for Joint Photographic Experts Group and it was created specifically for photographic imagery and shouldn’t be used for flat-color graphics. JPEG is a commonly used method of lossy compression for digital photography (image). With JPEG, you get to keep all your colors, but you don’t get to keep all the data about the image.
PNG: The Portable Network Graphics, or PNG format, was developed exclusively for the Web and is in the public domain. The PNG format takes advantage of a clever way of storing the information about the image so you don’t lose color and you don’t lose image quality; it is a lossless format. The only drawback is, because the standard is so new, only fourth-generation and later browsers support PNG graphics.  

The Img Tag and src Attribute

In HTML, images are defined with the <img> tag. The img tag is empty, which means that it contains attributes only and it has no closing tag. To display an image on a page, you need to use the src attribute, src stands for “source”. The value of the src attribute is the URL of the image you want to display on your page.

The syntax of defining an image:

The URL points to the location or address where the image is stored. The form of the URL may be either an absolute URL or a relative URL.  

The alt and title Attribute

The alt attribute is required to specify a text alternative for the image in case the user cannot see the image. Often referred to as alt text, it is important that the value of this attribute really describes the image. Two common reasons why images are not visible to users are: 

• Because the browser did not download the file correctly; the file cannot be found
• Because the user has visual impairment that prevents him or her from seeing the image 
• Sometimes images do not convey any information, and are only used to enhance the layout of the page. (For example, you might have an image that is just a design element but does not add any information to the page.) Then the alt attribute should still be used but given no value, as follows: 

In addition to the alt attribute, it’s a good idea to add the title attribute to your img tag. While the alt attribute specifies alternative text for images in case the images don’t load, the title attribute can be added to images as well as links and other page elements. It serves as a quick tip for users to briefly explain the contents of the page element or, in this case, the image. 

The greatest benefit in using the title attribute is that its contents are displayed as “tool tips” in all browsers.

Change the size of an Image

After you start adding several images to your Web pages, you may notice they sometimes cause the browser to wait a little while before displaying the page. Because they don’t know the size of the image, some browsers actually wait until the images are all loaded before displaying the Web page. 

Therefore, you can help speed the display of your Web pages by telling the browser the sizes of your images right within the img tag. You do so with the height and width attributes. 

We can also set sizes of image using the style attribute of CSS, we will look this in CSS chapter.

Positioning an Image on the Web Page

By default, the browser displays images inline. That is, it displays an image immediately to the right of the previous content. Text does not wrap around it. You can display an image on the left or right side of the Web page, however, allowing the surrounding content to flow around the image. This type of image is called a floating image. 

You create a floating image by using the <IMG> tag's ALIGN attribute. This is the same attribute you use to align the surrounding text with an image. Table describes each value you can assign to this attribute. 

<img src="book.jpg" alt="My Book for Learning HTML" align="left">

<img src="book.jpg" alt="My Book for Learning HTML" align="right">

LEFT: Displays image on left side and surrounding flows around the image
RIGHT: Displays image on right side of the window and surrounding flows around the image

Hyperlink your Image 

In the previous chapter, you learned how to create text hyperlinks using the <a> tag. Recall that you place the URL in the opening <a> tag, and then you place the hyperlink text between the <a> and </a> tags. You create a graphical hyperlink in much the same way, by placing an <img> tag in an <a> tag like this

Add a Background Graphic 

Instead of placing a graphic inline with the text, you may want to use it to form the background of a web page. A background graphic can make your web pages much more colorful and dramatic, but you must make sure that the graphic neither obscures the text of the page nor clashes with any graphics you place inline. To add a background image, add the background attribute to the <body> tag, and specify the filename in double quotation marks. 

<body background=”picture.jpg”>

Image Maps 

Image maps allow you to specify several links that correspond to different areas of one single image, so that when users click different parts of the image they get taken to different pages. There are two types of image maps: 

• Server-side image maps
• Client-side image maps 

In the server-side image map, the user clicks on an image but the server must decode where the user clicked before the destination page (if any) is loaded. With client-side image maps, all of the map information, which regions map to which URLs can be specified in the same HTML file that contains the image. Including the map data with the image and letting the browser decode it. 

It has several advantages, including 

1. There is no need to visit a server to determine the destination, so links are resolved faster.
2. Destination URLs can be shown in the status box as the user’s pointer moves over the image.
3. Image maps can be created and tested locally, without requiring a server or system administration support.
4. Client-side image maps can be created so that they present an alternative text menu to users of text-only browsers. 

Client-Side Image Maps using <map> and <area>

In this, the image that is going to form the map is inserted into the page using the <img/> element as normal, except it carries an extra attribute called usemap. The value of the usemap attribute is the value of the name attributes on the <map> element, which you are about to meet, preceded by a pound or hash sign. 

The <map> element actually 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 hot - spot. 

Here’s an example from the image map that was used for the image in Figure. 

 <html>

  <body>

    <p>It is an example of Image Map</p>

<img src="planetmenu.png" width="400px" height="140px" alt="Planet menu"

border="0" usemap="#map1" />

   

<map id="map1" name="map1">

<area href="mars.htm" shape="circle" coords="71,64,44"

alt="The planet Mars" />   

<area href="jupiter.htm" shape="circle" coords="195,64,49"

alt="The planet Jupiter" />   

<area href="jupiter.htm" shape="circle" coords="329,64,49"

alt="The planet Jupiter" />

 

</map>

  </body>

</html>

To see the code example rendered in a browser use this link image map

Advantages of Image Maps

·       Since an image-map is one large image, you can place links in it the way you want without worrying about layout issues.

·       Lesser HTML scripting is involved since there are programs available that will generate the code.

·       Image map creation is quite simple if you use a program such as MapThis.

Disadvantages of Image Maps

·       An image-map takes only one ALT attribute. Thus, it's not possible to have different ALT attributes for different links. Visitors with disability or those using text based browsers might not appreciate this.

·       No interactivity is possible. You can't have separate mouseovers for individual links.

·       An image map is one large image and if its not optimized properly, will take a long time to download.