Clickable Images
- Another cool trick you can do with images is to make them clickable.
That is, you can put an anchor tag around them so that when the user
moves their mouse over the image, they will be able to click on the
image in order to go to some other page.
- The process is exactly the same as for making text-based links
except that you place the image where the text was.
- In the following example, we make the icon clickable so that when
the user clicks on it, they will be transported to the table of
contents page for this tutorial. Remember that you can click on your
browser's back button to return to this page.
<A HREF = "toc.html">
<IMG SRC = "http://www.eff.org/asterix_icon.gif"
alt = Table of Contents
height = 64
width = 64
></A>
- Below we have added the above code to this page and made the
clickable image for you to try out.
- Notice that the image above is surrounded by a box. This
box is like the underlining of link text. It lets the user know that
the image is clickable.
- However, in many cases, you will not want the box around your
image. If this is the case, you need only set the BORDER attribute of
the IMG tag to "0". For example, we can turn the border in the above
image off by using the following code: [1]
<A HREF = "toc.html">
<IMG SRC = "http://www.eff.org/asterix_icon.gif
BORDER = "0"></A>
- In this case, our clickable image would appear as below:
Additional Resources:
Exercise Six
Introduction to Web Design | Table of Contents
Image Placement and Alignment
|
