How to Make an Image Clickable
Most developers are familiar with this method which involves encapsulating an image with an anchor tag:
However, additional thought might need to be given for hyperlinked images which are only used for presentation purposes and have no significance in a browser displaying CSS-free pages, or in a screen reader such as Lynx.
First, let me say that images used strictly for presentation (and therefore do not need an alt tag) should, in my opinion, be displayed using CSS and not the conventional image tag. A low percentage of users display web pages with browsers that do not render CSS or that have styling disabled. The unintentional effect of using only image tags may be a collage of undesirable images. In other words, without the context of the website’s framework and design, these presentational images may be irrelevant and distracting.
Therefore, in most cases where an alt tag is required, an image tag wrapped in anchor tags is the perfect implementation. But where an alt tag is not needed, CSS should be used (again, in my opinion) to display the image.
Having said this, here is one way to display your clickable image using CSS:
<style type=’text/css’>
a.logo{
display:block;
height:100px;
width:200px;
background-image:url(‘logo.jpg’);
}
</style>
<a href=’index.html’ title=’Home Page’ class=’logo’></a>
Beyond that, you can add position and placement definitions.
Please feel free to shoot me an email if you have an alternative technique. If I find your technique useful, I will add it to this article and give you or your source credit.