Link Image
This page contains "link image" code. Feel free to copy and paste this link image code into your own website, blog, MySpace page, or other HTML document. And feel free to modify the code as you wish.
Also, please consider keeping the link back to this website - if you do it will be very much appreciated!
About Linked Images
The most common way of creating linked images is to wrap the image in an anchor tag (i.e. the <a> tag). The anchor tag is the standard way to create a link on a web page.
Therefore, you use image code to create the image, and link code to create the link.
Example Code
Here's an example of linking an image to another website:
| Source Code |
Result |
|
Click on the image below to find a free web template!
 |
In this example, we open the link in a new window by using target="_blank". We also use border="0" to prevent the browser from creating any ugly borders around the image (some browsers do this if you don't specify border="0".)
About the Image Code
As with all images, when you link an image, you need to remember the following:
- The
img tag requires an image to be located on a server available on the internet. You enter the URL of the image into the src attribute. It doesn't have to be on the same server, it can be anywhere on the internet (as long as "Hot Linking" isn't enabled).
- HTML image code requires the dimensions of the image to be specified. In other words, you should always use the
width and height attributes (as the above code does).
- You should also use the
alt attribute (as the above code does). The alt attribute, which stands for "Alternative Text", is used to describe what the image is. This is useful for those who can't view the image (such as blind people who use a screen reader). The alt attribute can also be handy for search engine optimization too.
Image Maps
You can also use HTML to link multiple parts of an image. In other words, you can make one part of the image link to website A, and another part of the image link to website B. This is what's called an "image map".
Here's an example of an image map:
| Source Code |
Result |
|
 |
Link Image using JavaScript
Although HTML is the most common method for creating links, JavaScript can also be used. The most common way of linking an image using JavaScript is to use the onclick method. By specifying onclick in your image code, you are telling the browser to do something when the user clicks on the image. Of course, you need to say what should actually happen upon onclick. To create a hyperlink, you need to use location.href='' (and specify the destination URL in between the quotes).
It's also a good idea to add style="cursor:pointer" to the image code in order to make the cursor change to a hand/pointer when the user hovers over the image. In other words, to make the JavaScript link act like an HTML link.
Here's an example:
| Source Code |
Result |
|
Click on the image below to find a free web template!
|
