In order to show you how to create a clickable image, I’m going to teach you a little HTML. If you’re very new to code, why not watch the first two minutes of HTML Tutorial: What is HTML? so you feel a bit more comfortable, but you can try doing this without watching the tutorial and see how you do.

Are you back from the video? Good! Did you notice the link (above) to the tutorial video? If you go behind-the-scenes, the HTML looks similar to this:

<a href=”destination_URL”>name of destination</a> in order to make a word or phrase clickable.

The HTML for an image on your blog looks like this:

<img src=”your_blog/image.jpg_URL” /> because your image has a URL location in your blog’s media library.

Use the following steps to make any photo or image link to another blog post, or to a video or to just about anywhere on the internet. Choose your photo, then I’ll describe what to do in WordPress, but I’m sure these steps would be similar in another platform. (By the way, keep all  your photos in your blog’s media library. It’s bad practice and slows your blog down for your readers if you pull your images from places outside your blog. Don’t bog down your blog!)

One Way

1. After you upload your image, go to your media library to copy the file URL. (The URL is the web address, beginning with http.)
2. Don’t use the visual tab; open the text tab
3. Paste the destination URL and the image URL into this “formula”:

<a href=”destination_URL”><img src=”your_blog/image.jpg_URL” /></a>

If you were careful with spaces, quote marks, etc., you’ve just written HTML for linking to an image! Congrats! Did you notice you replaced the text (“name of destination”) with the URL for an image? Now you can code both types of links, to word(s) or to an image.

Another Way

When you insert an image in a WordPress blog post, it’s automatically clickable. If you click on one of these images you end up at the URL for the image. All you have to do now is change that URL.

1. Add your image to the blog post before you do anything else and this will be easier for you.
2. Open the text tab and you’ll see the code for the image along with other code for width and height and such.
3. Look for “your_blog/image.jpg_URL” and replace it with “destination_URL”  (You’ll actually see “your_blog/image.jpg_URL” twice. Do not use the second occurrence with  src=“your_blog/image.jpg_URL” because that’s the HTML to place the photo in the blog.)

Save your draft and preview your post before and after you change the URL (step 3) and it’ll help you understand what’s happening. Before, the image linked to the stored site for the image. After, to the link location.

This is what I did with the thank you tag photo. I just replaced the URL link for the image so that clicking on the photo takes you instead to Judy Douglass’ post, How to Cultivate a Grateful Heart. Try clicking to see what I mean.

Related posts

• Screenshots (equipping4eministry.wordpress.com)
• How Do You Make a Word a Link? (askville)
• More HTML for image links at QuackIt.com