Sunday 26 August 2007

Add an Image as a Clickable Link (From My Inbox)


My question today, is how I can add small pictures which link to other websites ('badges', I think they call them) to my blog - there are a couple of links that I would like to have on there to show my support for some other websites and organisations and things but all I seem to be able to do is to either add another picture or else add a link list ... no way to add a badge/picture that is a link


This is a simple piece of code that makes any image, button or badge an active link.
<a href="URL OF TARGET LOCATION" >
<img src="URL OF IMAGE"></a>
This is an example of how to put the BlogU chicklet in a sidebar or post:
<a href="http://www.bloggeruniversity.blogspot.com" >
<img src="http://h1.ripway.com/anniebluesky/-blogu.png" height="15" width="80">
</a>
You'll notice that I have added sizes to the example code. That is to help the browser load your page quicker.* To find the size of an image, right click on the image and chose to View Image. This will open a new window with your image. The dimensions are on the top title bar.

*For more information on making your page load faster, take a look at How to Optimize Web Pages for Faster Loading

EDIT 06/07/08: A nice tip from AceK - It's a good idea to put the alt tag IE alt="name of picture" in case pic is unavailable, text will show instead of just an x. You can also use the code below to prevent the blue border spoiling the picture.
border="0"

post signature

No comments:

Post a Comment