If you do not know the dimensions of your image, once you have uploaded it to your web folder, view the image in your web browser (eg: Firefox, Chrome). The dimensions (width followed by height) will appear on the upper task bar where page titles appear. The filename for the image will appear in the title bar.

Here is the HTML coding for a simple linked image for an image that is in the yourcwsite.net/images/ folder:

It’s always a good idea to add a text link along with the image. Sometimes, your viewers will be unable to view images.

N.B. The file name of your image is case sensitive. You must enter it into your coding eXacTly aS it aPpears. If you would like to have a border around the image, change the number assigned to the border from zero to a higher integer. The higher the number, the wider the border.

Turn your image into an Image Map

You may have a more complex image that you’d like to “divide” and link to several different places from that image. You can use any .gif .jpg or .png image that you want to make an imagemap. All you need to do is create the co-ordinates on the image in order to get it to work as a map. Your image editor will probably have a grid system on it to help you find the coordinates (irfanview is a handy free image program).

Remember that images on the www are pixel images. The image on this page is 300 pixels by 250 pixels. The first pixel on the x-axis is at the top of the image. The first pixel on the y-axis is on the left of the image.

To make an image into an imagemap, add usemap=”#usemapname” into the image tag. Your alt tag should also describe roughly where on the image the links are: alt=”imagemap circle:circle contents, rect:rectangle contents, poly:polygon contents” The image tag is then followed by the map tag.

Here is an example of how the code will look – obviously the width and height specs will be filled in with numerical values that are the same as the width and height of the image used for the usemap:

N.B. Please do not be tempted to leave out the alt specs. They are there for people who use text-to-speech browsers. (Yes, people who have vision impairments do use the internet.) Also, please ensure that you place simple text links as well as the links on your image map. Not all browsers support imagemaps.

triangle (polygon)

In the above image, the polygon(triangle) area has one point 300 pixels from the left and 70 from the top, one point 300 pixels from the left and 200 from the top and one point 165 pixels from the left and 250 from the top.

To find the co-ordinates, put the image into your image editor and place a grid overtop.

circle

In the imagemap for this page, the center of the circle is 95 pixels from the top and 75 pixels from the left of the image. It has a radius (straight line drawn from centre of the circle to the outside edge) of 65 pixels.

To find the co-ordinates, put the image into your image editor and place a grid overtop.