Producing web pages
* HTML CSS DHTML XHTML A to Z of tags        Accessibility          Design

Making a picture a link

If you want to make an image work as a link, the method is exactly the same as with text. You simply place the <a href> and the </a> tags on each side of the image. For example:

<a href="http://www.mysite.com"><img src"logo.gif"></a>

You click on the picture logo.gif to jump to your home page.

Usually, the browser puts a border around the picture to show it is a link. To remove the border, set the border attribute in the <img> tag to zero. The border is, though, a clue that the picture is a link.

You can combine a picture and text as the link. Make sure to leave a space between the picture and the text:

<a href="http://www.mysite.com"><
img src"logo.gif">Visit my site</a>

You can use pictures for navigation on your web pages:

<table width="600">
<tr>
<td colspan="7">
..
<a href="search.htm"><
img src="images/search.gif"></a>
..
..
</table>

Here's what the finished article looks like:

You might get a space appearing after the picture if you split the anchor over two lines in the HTML.

You can also use an image map as a link; different parts of the picture link to different destinations.