Clickable Images

Earlier you learned how to create a link with a friendly text description. But now, you've noticed that some image on the web are "clickable."

Fortunately, you have almost all the skills necessary to start making these clickable image- links. Let's make some!

The cool thing about links like this one is that they allow you to use use anything you want as the "clickable" part. A good example is a clickable icon like this one: . These clickable links are composed of two parts, one inside the other.

Above, we made a link in which we put some small text to point to a large un-wieldy URL. In this case, we will replace the friendly text with an image.

"OK.... Um.... so how do put in an image?", you say.
"It's actually pretty easy," I say. Here's how. To put an image on a page, you use the <img> tag. There are some parameters that you need to provide: a link to the image, and some display options of which we will discuss only one.

Here's the complete tag used for the image discussed in the preceding paragraph: <img src="images/menu_button_up.gif" border="0">

Here's what this means: "src" is the source of the image; normally a URL. The "border" simply tells the browser to NOT put a border around the image. You rarely see borders adound images, anymore. Here's an example of what they'd look like:
Border: NO border:

So now, how do we make the image "clickable"? Combine the <a> tag from above with the <img> tag we're discussing here. Example: <a href="target_url"><img src="image_url" border="0"></a>

So, the HTML for the first clickable image in this section (which links back to this section) looks like:
<a href="#advanced"><img src="images/menu_button_up.gif" border="0"></a>

See? I told you it was easy!