Linkage Knowledge:
Graphical Links

How to make a graphic image clickable

What if you have an ebook cover and you want to make it clickable to start the download? How does that work? Or a graphical button or some other image you want clickable? Again, we use the same linking strategy, but with a small twist. It's called the image tag. We combine it with the anchor tag, and we're good to go.

Your ebook graphic has a name ending in .jpg or .gif, since it's an image. Those are the two image formats most commonly used on the Web. And we're going to assume for the sake of this example that your cover graphic is named "cover.gif" and that this graphic resides in a folder on your server named "images". Here's the linkage:

<img src="">

Okay, that's the call for the image to be displayed. But how do we make this image clickable to start our download? You put the image tag inside the anchor tag. The anchor tag is the "a href=" part of the link. So here's the complete example: (I've left out the "" in front of the images directory in the "img src=" part of the link so the line won't break.)

<a href=""><img src=images/cover.gif"></a>

Now the image is clickable. We should take another step and add some text as well, such as "Click the image to start the download." Here's an example that uses a snowflake (the link is not really clickable):

Click to download a snowflake.

Here's the actual code for the entire image and linkage. It doesn't matter that the line breaks:

<a href=""><img src="images/snowflake.gif>Click here to download some snow>.</a>

Here's the Recap:

<a href starts the whole thing running. It's the anchor tag.

<img is the image tag. It's used to make the browser display an image. Your could upload a picture of your dog to a folder on your server, then type the URL into your browser, and you'd see the picture. For example, let's say your dog's name is "pooch.jpg" and you've stuck him in the folder named "images" under your domain name of "". If you type this...

...into your browser, you'd display pooch's pic on the page. Kind of cool, huh? I hope you're understanding how this works. It's really easy once you "get the picture."

By the way, the code "behind the code" above is right here:

<a href=""></a>

To conclude this ebook, we'll look at the meta redirect link and a few examples of what you can do with this. We'll pull everything together there!

Next Page

Copyright 2001 Roglan International LLC All Rights Reserved