HTML - Tutorial 9 image links

HTML Tutorial 9

Prepared by: Anthony Larrain

Making an Image Into a Hyperlink

To make an image into a hyper link, simply nest the <img> tag inside the anchor tag <a>.

Example 1

<a href="http://www.yahoo.com"> <img src="yahoo.gif" width="232" height="34" alt="Yahoo link" title="Click to go to yahoo" /></a>

Browser Display

Notice the border placed around the image.
To remove or control the width of the border use the border attribute.
The values to the border attribute can be specified in pixels or percents.

Example 2

<a href="http://www.yahoo.com"> <img border="0" src="yahoo.gif" width="232" height="34" alt="Yahoo link" /></a> <a href="http://www.yahoo.com"> <img border="5" src="yahoo.gif" width="232" height="34" alt="Yahoo link" /></a> <a href="http://www.yahoo.com"> <img border="10%" src="yahoo.gif" width="232" height="34" alt="Yahoo link" /></a>

Browser Display

Design tip

Use CSS to style the border.

img{border:0;}

When using a 0 length in CSS the unit is not required.

@Anthony Larrain 2005 - 2006

Send Questions or Comments to hci201@yahoo.com