A clickable image is an image that acts also as an HTML hyperlink. Clicking on any part of the image will redirect the user to another URL or webpage. You can make any image on a webpage clickable.

Simple HTML is all you need to create the image clickable, just as a text link. First, let’s look at how images are displayed on a webpage. The HTML tag to display images are called img tags. A simple img tag that displays an image looks something like this:

<img src="/images/image1.jpg" alt="an image" title="The title of this image"/>

As you can see it has an attribute called src that points to the URI (Universal Resource Identifier) or the path to the image file. The alt and title tags are optional but helps with SEO.

Now, let’s look at how an HTML link is created. The HTML tag that creates a link is called a hyperlink tag or just an ‘a‘ tag. The ‘a‘ tag takes a mandatory argument called href which points to the target link or target URI.The text between the start and end ‘a‘ tag is the clickable part of the link. An example is:

<a href="/path/to/target.html">This is the clickable text</a>

In order to make an image clickable, all you have to do is to use both of these tags together. If we were to make the above image clickable, then we will surround the img tag with the ‘a‘ tag. Essentially what it does is to replace the text which is the clickable part of the link with the image itself.

The snippet of HTML code will look something like this:

<a href="/path/to/target.html">
<img src="/images/image1.jpg" alt="an image" title="The title of this image"/>
</a>

With the above code, the resulting image is now a link and clicking on it will load the page referred to by the href attribute which is /path/to/target.html in this example.

Various browsers display hyperlinks differently by default. It depends very much on how the browser implements the links. But most browsers follow similar display options, such as a blue underline for the clickable text, for example. It is quite possible for the website designer to override these default display options.

When you make an image clickable, as shown above it is quite likely that you will see a blue border around the image denoting that the image is clickable. Although, this is a desirable feature because it shows the user that image is clickable….many people consider it to be ugly.

If you want to remove the blue (or any other color) border around the image link, you can use the border attribute of the img tag. If you set the border value to 0 (zero) then the border is not displayed. You can also set the border to be wider by increasing the border size, such as 5px. So, the code will now look like this:

<a href="/path/to/target.html">
<img src="/images/image1.jpg" alt="an image" title="The title of this image" border="0"/>
</a>

Another way to disable border is to set the style attribute of the image tag. It is supported by most modern browsers. You set the border-style to none in the style attribute. The code will look like this and is functionally equivalent to the above example.

<a href="/path/to/target.html">
<img src="/images/image1.jpg" alt="an image" title="The title of this image" style="border-style:none"/>
</a>

An even cleaner method is to use a separate CSS file and define the style in it. If you want none of your images to have a border in any of the pages of the website, then you can define something like this in the stylesheet.

img {
border-style: none;
}

Now, if you want some of some images to have a border or a wide border and some image to not have a border, then you use CSS classes. The following is just an example with both the HTML code snippet and the corresponding CSS class.

HTML

<a href="/path/to/targetone.html">
<img src="/images/image1.jpg" alt="an image" title="The title of this image" class="wide-border"/>
</a>
<a href="/path/to/targetone.html">
<img src="/images/image2.jpg" alt="another image" title="The title of the new image" class="no-border"/>
</a>

CSS

img.wide-boder {
border-style: solid;
border-width: 15px;
}
img.no-border {
border-style: none;
}

You can do even more impressive things with the border styles in CSS, such as dashed, doubled, inset, groove or ridged borders. But then I digress.