Sunday, April 08, 2007

Creating Image Links

How to add an image link to your blog template:

You can see an example of what I mean by an image link on the right of this page -'the Sunshine on Fragile X Doris Buffet Challenge Image'.

An image link is an image that when clicked takes you to a web site - just like text links do.

Below is the HTML code used to make an image called 'autism_awareness.jpg linkable to the site www.autism-society.org:

Lets break this down:

Image coding:

<img src=
"http://www.sueblimely.com/blogger/images/autism_awareness.jpg">



This produces an with no linking - the image is
hosted on my own site at www.sueblimely.com\blogger:

The linking code:

<a href ="http://www.autism-society.org"></a>

This needs to be place around the image:

<a href ="http://www.autism-society.org">Your Image </a>

Putting it all together:

<a href="http://www.autism-society.org">
<img src="http://www.sueblimely.com/blogger/images/autism_awareness.jpg" /></a>


And here it is:
Autism Awareness


To add this to your sidebar in Blogger:

Old Blogger - edit your template and put the above code inside your sidebar.
New Blogger - add a new HTML/Javascript Page Element and place the above code inside it.

No comments:

Sunday, April 08, 2007

Creating Image Links

How to add an image link to your blog template:

You can see an example of what I mean by an image link on the right of this page -'the Sunshine on Fragile X Doris Buffet Challenge Image'.

An image link is an image that when clicked takes you to a web site - just like text links do.

Below is the HTML code used to make an image called 'autism_awareness.jpg linkable to the site www.autism-society.org:

Lets break this down:

Image coding:

<img src=
"http://www.sueblimely.com/blogger/images/autism_awareness.jpg">



This produces an with no linking - the image is
hosted on my own site at www.sueblimely.com\blogger:

The linking code:

<a href ="http://www.autism-society.org"></a>

This needs to be place around the image:

<a href ="http://www.autism-society.org">Your Image </a>

Putting it all together:

<a href="http://www.autism-society.org">
<img src="http://www.sueblimely.com/blogger/images/autism_awareness.jpg" /></a>


And here it is:
Autism Awareness


To add this to your sidebar in Blogger:

Old Blogger - edit your template and put the above code inside your sidebar.
New Blogger - add a new HTML/Javascript Page Element and place the above code inside it.

No comments: