Creating Clickable Images

There are a variety of situations where might use clickable images on your site. Instead of a text link, you might create a button to link to a certain page, like the one to the right.

Or you might want to show a small image on your page, and when a visitor clicks on it display a larger version of the image. Click on the image of the grapes to see a larger version.

The basic principle you need to understand is that creating a clickable image is almost the same as creating a clickable text link.

Review - How to Create A Clickable Text Link

To create a text link, you need to define the URL you are linking to (the anchor), and the text that will be displayed to the site visitor (the anchor text). So a simple link to a web page is written like this:

<a href="http://om4tourism.com/" title="OM4Tourism">Click here for OM4Tourism</a>

and it appears on a web page like this: Click here for OM4Tourism

How to Create A Clickable Image

To create a clickable image, we will place an image between the <a> and </a> tags, and this is what will be anchored to the URL.

Here is the reference to the image we will use as the anchor:

<img src="http://om4.com.au/wp-content/uploads/om4t-180.png" alt="OM4Tourism" title="Create a Zero Cost Website at OM4Tourism.com" width="180" height="38" />


Here is the new link - note how Click here for OM4Tourism has been replaced by the image reference.

<a href="http://om4tourism.com/" title="OM4Tourism">
<img src="http://om4.com.au/wp-content/uploads/om4t-180.png" alt="OM4Tourism" title="Create a Zero Cost Website at OM4Tourism.com" width="180" height="38" />
</a>


And here is how the clickable image is displayed: