At last we can now spice up our web pages with loads of c o l o r f u l images.
There are two main types of images which are commonly used on web pages. These are gif and jpeg images. One advantage of using the gif image is that it is possible to produce Animated gif's (more on this later) without learning any fancy language like Java. The Gif image is limited 256 colours. If you want to display images with more colours then you will need to use the Jpeg image format. But this means bigger files, which take longer to load.

In order to display the images we use the image screen element <img scr=" filename.gif">. Note there is no closing tag element associated with the <img> element. To display an image called crazydog.gif and daffy.gif then you would type the following

To set up a link from an image, we just place the image statement between the anchor elements as discussed in the previous section.
For example if we wish to setup a link to the contents menu for the learning zone, by clicking on the image called daffy.gif then we would type the following

This will display an image of Daffy duck which provides a link back to the contents menu of the learning zone. The border around the image of daffy indicates a hyperlink.

I personally do not like borders which are placed around some images, which you hyperlink. To get round this, we use the border attribute. Setting the border value to zero will eliminate the border. You can also control the thickness of the border by setting it to a value greater than zero. This is illustrated below.

This should display two images of daffy, centrally on the screen. The right-hand image is surrounded by a border 5 pts thick. Both images provide a link to the contents page. Note that you can specify a border around images even if they are not hyperlinked.

How do we position the images on the page i you cry? The align attribute is used to align the image with respect to the text on the screen.

Here Daffy is aligned to the left hand side of the screen using the attribute align as shown below

To keep everyone happy it you can also align daffy to the right hand side of the screen as shown below

This is a good place to introduce the clear attribute which can be used with the <br> element. The clear attribute is useful in situations were the images are aligned as above and the text neatly wraps next to the image. A normal <br> would on introduce a single line break. By using the clear attribute it is possible to introduce multiple line breaks. The clear attribute can take the following values
 
<br clear="left" > - This will repeatedly introduce a line break until their is a clear Left margin.
<br clear="Right" > - This will repeatedly introduce a line break until their is a clear Right margin.
<br clear="All" > - This will repeatedly introduce a line break until their is a clear Left and Right margin.
 
Using align="top" will align the top part of the image of with the top of the current item in the line.

Using align="middle" will align the middle of the image of with the current item in the line.

Finally using align="bottom" will align the bottom of the image of with the bottom of the current item in the line.

We all know how slow the internet is at times, and therefore some people turn off the images to speed up the down loads. This is were the attribute ALT is extremely useful, since it will display alternative text in the place of the turned off images. SO YOU should provide alternative text also, to take account of this eventuality. Note those of us who use Internet explorer, the alternative text also appears as a tooltip.
Using the ALT attribute could not be simpler, it is just inserted into the <img> element as shown below.

The attributes width and height, should always be specified if possible in my opinion. This is so that the browser does not need to wait for the images to load so its size can be determined. If these attributes are specified then the browser will determine the layout of the web page so that it can first load the Text and the images last. This gives the reader the opportunity to read the text of web pages while the images load. The dimensions of the images can be obtained by loading the images into Paint Shop Pro for example. Again these attributes are inserted after the <img> element as shown below.

It is also possible to control the space around images using the vspace and hspace attributes. The vspace attribute controls the vertical space above and below the image, while the hspace attribute controls the space to the left and right of the image. These attributes are inserted after the img element as shown for the other attributes above.

Got to put my hands up here, and say that Netscape has one extra useful attribute that internet explorer has not. This is the lowsrc attribute. This attribute is dead useful since it allows the browser to use two images in the same place. This is more clearly seen by examining the following code

The browser will load the image Lowres.gif on its first layout pass. When all the web content is loaded it will then load the image Highres.gif in its second pass. This allows you to load up a low resolution image first, then a high resolution picture afterwards. This is useful if you web pages contain loads of big images which increases the downloading time. It gives the reader the opportunity to see a low resolution image as he reads the text, while the high resolution images load. Or you can use this to load two different images in the same space. You should note that the size of the two images should be the same. If not the browser will scale the second image to the dimensions of the first image specified in the lowsrc attribute. Browsers which do not recognize the lowsrc attribute will simply ignore it.
An alternative method based on the above, which will work on all browsers is to load a low resolution, scaled down image as normal, which you hyperlink to the high resolution full scale image. This allows the reader to decided if he or she (not being sexist in anyway) wants to see much better image and decreases the downloading time.
The following code illustrates this

<a href="doggy.gif">

<img src="crazydog.gif " Width="100 " Height="102 " ALT="Crazy Dog " Border="0 " >

</a>

This will display a scaled down version of the image crazydog.gif, which is hyperlinked to the image called doggy.gif. Clicking on the image you will open the image doggy.gif which is an animated gif.Try it.

Finally we move onto some thing a bit more exciting, Image maps. What are those I here you cry? Image maps are areas of an image which have been pre-defined so that they link to various other documents or even other web sites. There are two ways of producing image maps. The first is to use the attribute ISMAP, but this needs the server you are on to have the correct cgi-bin software installed (this is discussed in more depth later). The alternative method which does not require any further software is to use the Client Side Image Maps.
To use the client side image maps, we use the attribute USEMAP in the <img> element. First consider the following image (mapno.gif), which is simple number bar.

For this image we shall setup an image map so that clicking on the number bar will transport you to the relevant section of the HTML learning zone. We will make the numbers 2 and 5 of the numberbar so that they are inactive. The first thing we need to do, is define the image map using the <Map Name > element. The Html code for the imagemap i have used for the numberbar is shown below. Notice again that you can use the title attribute to make use of the popup tooltip as shown in the last section.

<Map Name="Numberbar" >

<Area shape="RECT" coords="0,0,39,41" href=" section1.html" Title="Link to Section1">
<Area shape="RECT" coords="39,0,78,41" nohref >
<Area shape="RECT" coords="78,0,118,41" href=" section3.html" Title="Link to Section3">
<Area shape="RECT" coords="118,0,158,41" href=" section4.html" Title="Link to Section4">
<Area shape="RECT" coords="158,0,197,41" nohref >
<Area shape="RECT" coords="197,0,236,41" href=" section6.html" Title="Link to Section6">

</Map>

The <Map Name> element specifies the name of the map so that it can be referred to by the usemap attribute from any where in the document. I have called the <Map Name> simply the Numbarbar. The Area shape attribute defines the shape of the area of the image you wish to set up. Currently there are three possible shapes you can define. Theses are

1. Rectangle [RECT]
2. Circle [CIRCLE]
3. Polygon [POLY]

For this particular example I have chosen rectangular shapes since the Numbarbar has square buttons. To help you understand how the co-ordinate system works, i have placed the image of the Numbarbar on some graph axis. The first thing you should notice is that, the co-ordinates are given in pixels, and secondly the origin (ie. (0,0)) is in the top left hand corner.

To define the coords for a rectangle we simply need to define the top left hand corner and the bottom left hand corner of each rectangle, as shown by the coordinates given in white in the above image. You can use any good graphics package to obtain the coordinates of the rectangles you wish to define. For example paint shop pro will display the position of the pointer in the window bar at the bottom of the screen in pixels. Cannot be easier. Now for each region of the image map you have defined, you need to simply use ther Href attribute to link to the document in question as previously shown. The noref attribute will ensure that clicking on that particular region of the image, that nothing happens. This is also true for regions of an image which have also not be defined by the area tag.

Now to use this defined image map, you simply add the usemap attribute to the image element as shown below.

The above should give us the finished numberbar. Clicking on the respective active areas will link to the relevant sections. Those browsers which support popup tooltips, will also get the extra information placed in the title attribute.

Below is another example of an cartoon image (Micky Mouse), which makes use of an image map to create active links on parts of the image. Wave that mouse pointer about to locate the three active areas.

 

You may have noticed that on some websites that you load a page which displays an image but there seems to be no apparent links. Well there is usually an one active link on the image which is only 1 pixel in dimension. This is a alternative method to password protect certain pages. Only people who know where to find this 1 pixel active link will get to the pages. See if you can locate this 1 pixel link which I have created just under the number 2 on the number bar. Trust me it does exist.