Image Links

Here is an image I will use to link back to the Links notes page.  The image on the left was inserted using this html code:

<img src="images/spidey_run.gif" width="67" height="154" alt="spidey_run.gif" align="left"  hspace="10" >

Just like you surround linked text with the anchor tags (opening and closing), I will surround the image tag above with a hyperlink to the relative file named  Lecture5.htm as follows:  

<a href="Lecture5.htm"><img src="images/spidey_run.gif" width="67" height="154" alt="spidey_run.gif " align="right"></a> 

Don't forget the closing anchor tag or you will have a link line continue through your document. 

Why is the border around the image and how can I get rid of it?

Remember when you make text into a hyperlink it is underlined in the same blue color.  It servers to notify people viewing your page that if they click on the text or image a new page will open.   You can control the size of the border including making it's size zero using the border property of the image tag, illustrated with the image below.   Notice how when you move your mouse pointer over the image it changes shapes from an arrow to a hand?  Move your mouse pointer over the first image and it doesn't change shapes because that image is not linked.

Click on Spidy on the left here and you will link to Lecture5.htm just like the version with the blue box around it.  Notice how I added text in the alternate property to indicate to the user that a new page would open when this image was clicked.  Here is the code I used. 

<a href="Lecture5.htm"><img src="images/spidey_run.gif" width="67" height="154"   border="0" align="left" hspace="10"
alt="Spiderman will take you to the Lecture5 page." ></a>

The default border size is 2, so if you like the border you can experiment with making it larger, as illustrated in my notes on image tags illustrated.

Last updated on 03/05/2003  by L.M. Hicks