Linking Images


Please credit us if this tutorial helps you.

Related Tutorials: Making Text Links, Adding Images.

The Example

This is an example of a linked image.

Enter.

When you click on the image, it leads to another page.

How to make Images Linked

Well, that's simple. Know the basics of making links yet?

The code you add is:

<a href="http://URLHERE"><img src="IMAGE URL" border="0" alt=""></A>
1. Replace the URLHERE with your desired destination. (?)

2. Replace IMAGE URL with your hosted image address. (?)

What are the extras?

The "extras", are the border="0" and the alt="" that you see in the code above.

Do you need to add the extras?
No, but it might be necessary.

Border

The border="0" is the image's border. Adding a "0" makes it have no border, but you can change the number. The higher, the thicker the border is. But you should make it zero, just so your images don't look a bit ruined. But it's all your choice!
The Enter image above in the example has a border of zero. The example below has a border of one. (border="1")

.

... Just to let you know how it'd look.

Alternative

The alt="" part of the code is when the image is broken, the alternative text will show. Hover over the enter example above, and you'll see it says Enter. That's simply what the alt code is! In between the quotations, just type the text you want the image to represent. Or, it could be left blank if you don't want it to say anything.

It comes in handy when an image is broken. Look at the example below:

Enter.

Yikes! the image is broken, if it has a red 'x' mark. Thankfully, the 'alt' code will indicate what the image is. You should see an 'Enter'. It tells the viewers that the broken image might have been a linked image that said 'enter.'

Memorize!!

Here is the code again:

<a href="WEBURL"><img src="IMAGEURL" border="0" alt=""></A>
Copy, and memorize! If this tutorial helped you, a link back is appreciated.

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
++Top++Refresh++Go Back++