THIS IS A DEMONSTRATION OF THE USE OF THE IMAGE TAG
(NETSCAPE SPECIFIC)

The use of images in the Webpage creation is of great importance.The <IMG> tag is the vehicle for creating webpage graphics.This image is "align=right" to allow text flow around the left side of the image. Many browsers still don't support this way of formatting text and images together. Netscape and Internet Explorer handle this HTML coding with no problem. The HTML looks like this:


<IMG ALIGN="right" VSPACE=10 HSPACE=5 SRC="gbuddha.gif">

Of course you can align the image left as I have here with ALIGN="left" within the image tag. The use of the align feature within the image tag allows for much greater flexibility and interest in the placement of images.


<IMG ALIGN="left" VSPACE=10 HSPACE=5 SRC="gbuddha.gif">

This image is aligned center and all the text would be nicely wrapped around both sides....OOPS... if this was a perfect world. The "align=right" and "align=left" attributes came rather late in the game. Before that the align attribute designated where text was placed in relation to the image. Above, the "align=center" statement causes the text to be aligned with the center of the image. The image seems to be centered only because I placed it there by putting the <IMG> tag approximately in the center of the words on that line.

There are several other alignment statements:
This is "align=top" This is "align=middle".
This is "align=bottom".This is "align= absbottom".
These align statements don't give you real image wrapping capabilities, as you can see. This is unfortunate, maybe they'll fix this. Maybe they won't. With the introduction of the <TABLE> tag many of these formatting tags became practically obsolete.

The last few examples of the image of Buddha were smaller than the preceeding ones. Did I load a smaller version of the same .gif file? NO, There are two other attributes that Netscape allows you to use that save you from having to have your images exactly the right size. They are also included in the < IMG> tag. They are the "HEIGHT=" and the "WIDTH=" attributes. They were originally included to allow faster loading of an image. Netscape made it so you can change the size of the image displayed using either attribute without changing the aspect ratio which is what I did above. If you use both the "HEIGHT=" and "WIDTH=" attributes without knowing the original image size or the correct aspect ratio you will create an image like this.The HTML for this image is:


<IMG ALIGN="left" VSPACE=10 HSPACE=5 HEIGHT=100 width=100 SRC="gbuddha.gif">

Generally, it is better to bring the image in at the size you want it from your graphics program, Because browsers other than Netscape don't size the image for you.

If you use the image as an imagemap (ISMAP or USEMAP attribute) or in an anchor tag (clickable link) the browser automatically adds a border that matches the color of the link. This "BORDER=" attribute of the <IMG> tag allows you to change the size of the border or eliminate the border. Here is the image with a 5 pixel border. The HTML looks like this:

<A HREF="#here"><IMG ALIGN="right" BORDER=5 HEIGHT=100 width=100 SRC="gbuddha.gif"></A>


This image has no border. It is still a link, but has a BORDER=0 attribute.

The use of the "ISMAP" or "USEMAP" attributes allows the Web Author to designate the image as a clickable imagemap. These are widely used on the Web. You can have many links combined into one image. This is accomplished through two methods. The Ismap method is what is known as a server side imagemap, and requires that your server supplies an area with the proper CGI script to handle the coordinates from the image and through the use of the map file to make the proper link. The second method,USEMAP, requires that your browser be able to handle client side imagemaps. Most of the good browsers do( Netscape, Internet Explorer,Spyglass and Mosaic). It is an HTML3.0 specification so most will support it soon.

The ISMAP method requires the creation of a map file. The map file basically gives the shape, coordinates and link URL. An author can make his own map file with a graphics program(pixel coordinates) and a simple ASCII editor like Notepad, but there is a great little program called Mapedit that will create the map file, define the areas of the image and test it for you. It will also designate the default link for areas undefined. The image below is a client side imagemap.

The HTML looks like this:

<IMG ALIGN="center" VSPACE=10 HSPACE=5 SRC="gbuddha.gif" USEMAP="#GBUDDHA">

<map name="GBUDDHA">

<area shape="rect" coords="1,1,148,86" href="image.htm#top">

<area shape="rect" coords="2,86,149,150" href="image.htm#mid">

<area shape="rect" coords="1,149,148,224" href="image.htm#bottom">

<area shape="rect" href="image.htm" coords="0,0,149,224">

</map>

This information tells the browser which coordinates to apply the appropriate link to. I think this type of image map will become more widely used in the future, because it saves processor time on the server, and it has been recognized as a standard in HTML3.0. I also like it, because it shows the URL (on the status bar of the browser) that that portion of the imagemap will take you to if you click on it.

This image was created with the ISMAP attribute. The HTML is:
<A HREF="/cgi-bin/imagemap/dougbnt/image1.map"><IMG BORDER=5 SRC="gbuddha.gif" ISMAP>

The ISMAP attribute requires a link to the server's CGI script that handles clickable image maps. The server I use requires that you place this file in the same directory as your image and HTML document. Your servers may not; you'll need to check with your ISP to find out where to place your map files. A map file looks almost identical to the information in the <MAP> tag, except there are no HTML tag elements. It is a simple ASCII text file; the one for the image above would look like this:

rect image.htm#top 1,1 148,86

rect image.htm#mid 2,86 149,150

rect image.htm#bottom 0,149 148,224

default IMAGE.HTM

You would have to place this file in the same directory as the image file with the name "image1.map" for the server to find it and make the correspnding link. Most ISP's support this type of imagemap creation.

There are a few other attributes the <IMG> tag supports. The last one I will mention here is ALT=" description of graphic" This attribute was created so that those that have text based browsers or have their graphics turned off can, at least see a description of the graphic. I must admit I almost never use this attribute, and I probably should. My nettiquette isn't always the best. I hope this helps some of you out there understand how the <IMG> tag is used and what its limitations are.