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:
After you have typed in the document, save it, and then SWITCH to your browser and load it. This is what you should see:
Click on the button
to head homeFirst 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".
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. The crosses were all taken from the Christian Webmaster which is now owned by Cross Daily. Pay them a visit if you like to see what else they have to offer.
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).
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?
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?").
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:
Click on the button to head homeHere 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.