LESSON EIGHT - IMAGES - PART 2

You may read the following sections in their entirety
or use these choices to go directly to a section.

Return to Home Page | | Using an image as a link | | Thumb-nail images | | Placing thumb-nail images on a webpage |


USING AN IMAGE AS A LINK

When you want to turn something into a link, whether it be an image or whether it be a word, phrase or sentence, you need the HREF attribute which basically says "this web page is where we are linking to" when someone clicks on the image or words.

Here is an example of using an image for the link. Please SWITCH to NOTEPAD or to another text editor, and type in the following HTML document:

<HTML>
<HEAD>
<TITLE>IMAGE AS A LINK</TITLE>
</HEAD>
<BODY>
<H4 ALIGN="CENTER"><A HREF="index.htm"><IMG SRC="back.gif" WIDTH="40" HEIGHT="40" HSPACE="10" ALIGN="MIDDLE" ALT="home"></A>Click on the button to head home</H4><HR>
</BODY></HTML>

After you have typed in the document, save it, and then SWITCH to your browser and load it. This is what you should see:

homeClick on the button to head home


First click on the above button to see the image link work and then click on the browser's "BACK" button to return to this spot. Note that when the mouse pointer moves anywhere over the image, it turns into a pointing hand and the target address appears on the status line at the bottom of the browser screen. Here are some questions for you to answer about this short HTML document:

Problem 1: When you clicked on the button, what web page did the browser load? That is, what was the name of the web page that the browser loaded?

Problem 2: What is the complete name of the image?

Problem 3: What is written in the space reserved for the button before the button appears?

Problem 4: What is the effect of HSPACE="10"?

Problem 5: Change the above web page so that the words "Click on the button to head home" become part of the link. This way, the person has the choice of either clicking on the button or on the words.

Problem 6: Why are the words "Click on the button to head home" strongly emphasized (bolded)?

If you do not like to use the word "click", then you could instead use the word "choose" as in: "Choose the button to head home".

Click here to go to the answer section |


top | | bottom |

THUMB-NAIL IMAGES

If you have several images to display such as a gallery of your favorite images, pictures and clipart, it can take quite awhile for a browser to load them all - especially when the browser is running a 14.4 or 28.8 modem. Web pages will load only as fast as the server transmits and the modem accepts them. This is one of the main reasons why you might see a company or individual offer several web pages of images with only ten images to a page. If you place too many images on a page, your visitor may not be patient enough to wait until they are all loaded. Also, the larger the image, the longer it will take to load. This is where thumb-nail images can be of service. With thumb-nails, you offer a very small version of each image (each small image is called a thumb-nail). A visitor to your web page can then click on any thumb-nail to see the larger, original version. Thumb-nails allow for easier viewing of all the images, allow for smaller web pages and allow for faster loading of the pages. Using thumb-nails also allow the visitor to be in charge of what he or she wants to see.


top | | bottom |

PLACING THUMB-NAIL IMAGES ON A WEB PAGE

There are two ways to place thumb-nail images on a web page. They are:
  1. Using two images. The thumb-nail image will be the one image and the second image will be the original full size image.

  2. Using one image. You offer the same image for both the thumb-nail and the original image.
USING TWO IMAGES FOR EACH OF YOUR THUMB-NAILS

Many thumb-nail images are set up this way. You simply have two versions of the same image. The thumb-nail image is the smaller version of the larger original full size image. Since we have two images, each image will have its own name.

For example, if the image is named "cross1.gif", and the thumb-nail is named "cross1th.gif" (I use th to denote the thumb-nail), the statement is:

<A HREF="cross1.gif"><IMG SRC="cross1th.gif"></A>

I left out the WIDTH and HEIGHT attributes to show you that I am not doing any resizing and that we have in fact two distinct images with two distinct names ("cross1.gif" and "cross1th.gif"). Here is the way it looks in the browser. Be sure to click on the thumb-nail to see the effect (use your left button or the button you normally click with). If you do this, you should see the image displayed by itself in full size. When you are finished viewing the image, you can save it (described above in the saving images section). To return to this spot, just click on the BACK button or click the right mouse button and choose BACK from the menu that pops up. Note: When the image is displayed by itself, you can also save it by choosing FILE from the browser menu bar and then the SAVE AS ... option.

I first used Paint Shop Pro to resize the original image. The original size is 112 pixels wide and 144 pixels in height. My thumb-nail size is 39 pixels wide and 50 pixels in height (keeping the same aspect ratio).

Note that the above command line:

<A HREF="cross1.gif"><IMG SRC="cross1th.gif"></A>

follows the same format as using any image for a link. The HREF attribute says that we are linking to the image "cross1.gif" (that is, "cross1.gif" is where we are going to). The SRC (source) is the thumb-nail "cross1th.gif". Thus when "cross1th.gif" is clicked on, "cross1.gif" will be loaded into the browser. In this lesson's first section titled, "Using an image as a link", I gave the following example that made the "back button" a link to my home page:

<A HREF="index.htm"><IMG SRC="back.gif" ...>

Note that the HREF points to my home page where in the above example, the HREF points to another image ("cross1.gif" which is the original full size image).

Finally, you are free to use any IMG attribute studied in Lesson 7 - such as the ALT attribute to write something in the thumb-nail image space. Also, most browsers will place a blue (the default color) border around the thumb-nail image to indicated that the image is active and can be clicked on (just like your browser underlines and prints link words in blue to indicate active links). After you click on the image and later return to the same page, you will see the image with a purple border (the default color) around it to indicate a visited link (just like your browser underlines and prints link words in purple to indicate visited links). If you do NOT want to see this border, use BORDER="0" to eliminate it.

Here are three other thumb-nail images. I just repeated the above command line for each image.

To see the original full size image, just click on the image with your left mouse button (or the button you normally use to click with).

cross

cross

cross

Here are the lines that produced the above 3 thumb-nails and their original images.

<P><A HREF="cross3.gif"><IMG SRC="cross3th.gif" WIDTH="50" HEIGHT="50" ALT="cross"></A>

<P><A HREF="cross4.gif"><IMG SRC="cross4th.gif" WIDTH="32" HEIGHT="50" ALT="cross"></A>

<P><A HREF="cross6.gif"><IMG SRC="cross6th.gif" WIDTH="42" HEIGHT="52" ALT="cross"></A>

Note that this time I included the WIDTH, HEIGHT and ALT attributes in the IMG tag for good coding practices. You may be wondering why I did not include the WIDTH, HEIGHT and ALT attributes also with the image in the anchor tag (the A tag). This is because these attributes are attributes of the IMG tag and not of the A tag. That is, the A tag does not support these IMG attributes.

When you want to use an image on your web page, you may first have to resize the image to suit your specific needs. I stated above that I use Paint Shop Pro to change the size of an image. You can also use a paint program like Transparency for Macs, and Photoshop for Windows and Macs to resize and then save the resized image.


USING ONLY ONE IMAGE FOR EACH OF YOUR THUMB-NAILS

This is often the preferred method as you are offering the same image twice with the thumb-nail image being displayed with the use of the WIDTH and HEIGHT attributes. This is a much faster and more efficient method of loading images because the larger image that will be displayed has already been loaded into the browser's cache and ready to be displayed at any time. A cache is where a browser keeps a memory of images and pages while they display them.

Here is the command line that uses only one image to load both the thumb-nail and the original full size image.

<A HREF="cross1.gif"><IMG SRC="cross1.gif" BORDER="0" WIDTH="39" HEIGHT="50"></A>

Here is this statement in action. Again you can use the same procedures as before to display the image in full size, save the image, and return BACK to this spot.

To determine the WIDTH and HEIGHT of the thumb-nail, I resized the original image in Paint Shop Pro to the thumb-nail size that I wanted and noted the dimensions (39 and 50) which I then used for the thumb-nail. You may be able to determine a suitable thumb-nail size without having to use a software program like Paint Shop Pro.

You may have noticed that the original image loaded faster than in the previous section. In the previous section, the thumb-nail is loaded first and when you click on the thumb-nail, the browser then loads the original image from the directory on the server. In this section, when the image is loaded, it is resized for the thumb-nail. So the full size image appears much quicker because you are not loading a whole new image. You are simply displaying it in normal size. Note in the command line that the same image name is used for both the HREF and the SRC values ("cross1.gif") and that the thumb-nail has been resized to a width of 39 pixels and a height of 50 pixels.

Your final question:

Problem 7: If you remove the BORDER="0" from the above command line which is:

<A HREF="cross1.gif"><IMG SRC="cross1.gif" BORDER="0" WIDTH="39" HEIGHT="50"></A>

what do you think will happen?

Click here to go to the answer section |


A WORD OF CAUTION CONCERNING IMAGES

When you use images in your web pages, ask yourself the question, "Am I using images where text would suffice?" You might want to consider varying the size and color of text instead of creating your web pages with a lot of images. I often see web pages with too many unnecessary images. Too many images can result in a busy look which makes the page hard to read. Also, many images can greatly increase the time it takes to load the page. This will certainly "turn off" many visitors to your website -- especially those still using lower version browsers and those with slower connections to the internet. These visitors will simply stop the loading and go on to something else or they will turn off the displaying of images altogether. Evaluate each image based on its contribution ("How important is this image?") versus its cost in downloading time ("How large is this image?").


top | | bottom |

ANSWERS

  1. The browser loaded the web page named "index.htm" (my home page) as indicated in the HREF attribute (HREF="index.htm").
  2. The complete name of the image is "back.gif" as indicated in the SRC attribute (SRC="back.gif").
  3. "home" as written in the ALT attribute. Unfortunately, in some cases, the button may be too small to show the complete word "home". Note that I chose "home" to represent the "meaning" of the button.
  4. There will be 10 pixels of space between the button and the words "Click on the button to head home".
  5. Recall that the anchor element is a container element. Therefore, what you want for the link must be contained between the anchor tags. Thus if the words, "Click on the button to head home" are to be part of the link, they must occur before the closing anchor tag. So all you have to do is move the </A> tag to the end of the words as in:

    Click on the button to head home</A>

    Here it is shown as part of the complete statement.

    <H4 ALIGN="CENTER"><A HREF="index.htm"><IMG SRC="back.gif" WIDTH="40" HEIGHT="40" HSPACE="10" ALIGN="MIDDLE" ALT="home">Click on the button to head home</A></H4><HR>

    And here is how it looks in your browser. Note that the link words are now underlined to indicate that you can also click on them:

    homeClick on the button to head home

  6. The words are strongly emphasized because they are contained between the H4 header tags (<H4> and </H4>). Header tags always strongly emphasize text.
  7. If you remove the BORDER="0", the browser will place its own border around the thumb-nail. If your image does not have a transparent background, you may not want a border. If your image has a transparent background, you may want the border. So if you do not want this border, use BORDER="0".

    Here is a comparison. The first thumb-nail does not have the BORDER attribute and so the browser placed its own border, while the second one has BORDER="0" to prevent the browser from placing one.

You can see from this example that if you want an image with a transparent background to be a link, a border may be a good idea to clearly define the link's active region.


| Back to the top of the page |

Return to Home Page | | Return to Alternate Home Page | | Send me to Lesson Nine |


The information contained in these free 21 lessons is Copyright ©, Brantford Educational Services, 1997 - 2012 by local and international copyright laws. All rights reserved. It is therefore illegal to copy these lessons into another website. If you find a copyright violation, please report it to email