Monday, April 12, 2010

Code lesson for Valerie

I just had an actual real-live phone conversation with my daughter! We talked about a lot of things, including how I would be in big trouble if I didn't get my blog updated within the next couple days. She was wondering how to create a link from a photo that would go to a site rather than just display a larger image of the photo. I've decided to cover that here. The easiest way is to edit the html behind the photo.

Here's an example of a photo that is inserted and no changes have been made to the html. Clicking on the photo will just display a larger copy of the same image.
This is a photo of Valerie wearing a new snood she sewed this past weekend. It's great to be able to click the photo and see a larger version but what if I wanted to use this photo as a link back to her blog? I suppose I could type the address of her blog and you could copy and paste it into your browser to get there but that's not very convenient now, is it? The easiest way to do it, if I'm taking the reader's time into consideration, would be to create a link from the photo directly to her blog.


Now I'll use the same photo and create the link to her blog. You'll need to go into the "Edit HTML" area. Find the code that displays the photo and locate the section that starts with
a href="http://...
and replace the text between the quotes with the link you want to use. I wanted to show you the whole link tag but this editor wants to turn it into a complete link. So just know there would be a "<" at the beginning of the link text. Now click on Val's photo and you can read all about her Sunday Sewing! And you can now make links from your own photos. Happy Linking :-)

No comments:

Post a Comment