Exercise - Clickable images

Step 1. Creating a clickable image

To create an image that also appears to be a link to another document, you just insert - or "nest" the image tag within the hyperlink tag. try this, for example:

<a href="http://www.uiuc.edu" ><img src="images/uibullet.gif" > University of illinois</a>

Save your document and reload in your web browser and you'll find that clicking on the orange and blue "bullet" has the same result as clicking on the blue hypertext.

University of Illinois

Step 2. Eliminate the blue border

Notice that the above code places the conventional blue border around the image, which has become the universal convention on the World Wide Web that implies a clickable link . While you should keep in mind that this is what people are getting used to, there might be times when the blue box detracts from your design. If this is the case, then you can add the BORDER=0 attribute of the image tag. Be aware that this does eliminate one of the visual cues to aid the user in web navigation, and so be prepared to provide other indicators of what the user is supposed to do.

Make a copy of the above link and paste in below the first for comparison. Be sure to add a line break or <BR> tag then add the BORDER=0 attribute to the tag, save, reload and check it out:

University of Illinois	<A HREF="http://www.uiuc.edu"><IMG SRC="images/uibullet.gif"> University of Illinois</A><BR>
University of Illinois	<A HREF="http://www.uiuc.edu"><IMG SRC="images/uibullet.gif" BORDER=0> University of Illinois</A>