How to Create Clickable Images in Your Comments - HTML LESSON

I have several crochet patterns on Gather and have lots of people that make them.  I have asked members to post pictures of what they make when they make one of my patterns or have a question.  I am writing this to teach those people how to put images that are clickable (take you to a larger image that members can comment on).  Now, I personally prefer to do an image and a link, in case the viewer does not realize the picture is clickable - this gives them two ways to get to your content.  NOTE: Please use these tips to further conversation, not to spam Gather with links to your stuff.  This type of thing has its place on Gather, but when abused it is very annoying and possibly against the terms of service.

I will try to make this simple for even the HTML illiterate (which I am except for the teachings of some great Gatherers).  If you have questions PLEASE do ask - no question is stupid unless you neglect to ask it. 

First things first, if you have a word processing document, you can create a cheat sheet for yourself that will make life on Gather much simpler.  To do this, open a new document and paste the following several times:

<a href=" "><img src=" "></a>

This is the code for creating a clickable image minus the image information.  There are two pieces of information you will need to supply to make this code work:

1. Between the first set of quotation marks (" "), you need to insert the address of the page you want people to land on when they click your image.  For the purposes of this lesson we will use the following: http://www.gather.com/viewImage.action?fileId=3096224745721635&grpId=3659174697252379.  To get this address, I went to the page I wanted visitors to land on and copied (highlight, then right click and select copy) the address from the url/address line.  To paste it in your code, place the curser in between the quotation marks (" ") and right click then select paste.  (You can also copy by highlighting then press and hold the control key (ctrl) and the c key at the same time and paste by holding the control key (ctrl) and v key at the same time).
2. Between the second set of quotation marks (" "), you need to insert the address of the small version of the image you want people to land on when they click your image.  To do this, look at your photo section where the smaller versions of the photos are shown.  Now, right click on the image you want to use.  A box will pop up and at the bottom is the option for PROPERTIES.  Click on properties.  Another box will pop up.  The fourth item listed is Address (URL).  Copy the address, then paste it between the second set of quotation marks.  For the purposes of this lesson we will use the following image:

This is how the code should appear if you have followed instructions correctly:

<a href="http://www.gather.com/viewImage.action?fileId=3096224745721635&grpId=3659174697252379"><img src="http://media-files.gather.com/images/d912/d737/d745/d224/d96/f3/inter.jpg">

Now, I personally like to add a visible link to where I am sending people as well, since some may not realize the picture is clickable.  Since Gather has added the link feature to comments, this is much easier now.  Simply type what you want to say, highlight the words you want to become your link, then paste the address/url of where you want them to land (in this example it was: http://www.gather.com/viewImage.action?fileId=3096224745721635&grpId=3659174697252379).  If you want to know the code for this (in case you want to do this in Gather mail or other sites where you have to know HTML to do this), here it is:

<a href=" "></a> (You can do a cheat sheet for this too).

1. Paste the address you want visitors to land on between the quotation marks (" ").
2. Write the words you want to be your link between the ><.

<a href=" http://www.gather.com/viewImage.action?fileId=3096224745721635&grpId=3659174697252379 ">my afghan</a>

The combined code would look like this (along with a message to make it understandable:

<a href=" http://www.gather.com/viewImage.action?fileId=3096224745721635&grpId=3659174697252379 "><img src=http://media-files.gather.com/images/d912/d737/d745/d224/d96/f3/inter.jpg></a> Come take a look at <a href=" http://www.gather.com/viewImage.action?fileId=3096224745721635&grpId=3659174697252379 ">my afghan</a>.

Now, show off what you have learned - post a clickable picture and link in a comment below.  When you look at the comment box you will see in the lower right corner "HTML".  Click on HTML and paste your code in that box, then click update.  You can then add to your comment if you want to or go ahead and post your comment if you are ready.  If you need help, let me know.