How to Make Images Clickable - bbCode Basics

This is very useful in forums allowing their users to advertise their sites or businesses, as they can display banners in their posts or signatures, & link those images to their sites.

To make a picture clickable, you need two tags we already saw, the [url] tag (learn about it here: How to Insert Live Links) & the [img] tag we saw in detail in three lessons starting from this one: How to Insert Images in Posts - Part 1.

We learned also previously that two or more tags can be combined provided that the tag started first ends last (read more about that here: How to Correctly Insert Tags).


Now that you know all that, you may have guessed at least partly how to post a linked (or clickabl)e image. Here are the steps needed:

1. The use of [img] tag:

Wrap the image link with the [img] tag, let's use again Google Logo image (see it also HERE then HERE) as an example:

[img]http://www.google.com/intl/en_ALL/images/logo.gif[/img]

Result:

2. The use of [url] tag:

OK! Now that we have our image link wrapped, we need to wrap the whole (link + tag) with the [url] tag & add the link we want to link the image to as an option.

Let's use Google.com (http://google.com/) as an example:

[img]http://www.google.com/intl/en_ALL/images/logo.gif[/img]

to: (There shouldn't be a line-break in your code!)

[url=http://google.com/][img]http://www.google.com/intl/en_ALL/
images/logo.gif[/img][/url]

and finally:



Any questions? Please post a comment :)