How To Add Image Links in HTML

• Download NFLTeamsBooks.zip - 5.1 KB

It has been said (too many times, perhaps) that a picture is worth a thousand words; actually, sometimes images are even more valuable than that, and can be worth a googleplex of words (depending on the picture, and depending on the words, of course).

Consider the difference in impact between this short list of books:

• Cow County Chip by T.R. "Ticket Ted" Shannon
• Autobiography of Mark Twain, Volume II by Samuel Langhorne Clemens
• Still Casting Shadows Volumes I (1620-1913) and II (1914-2006) by B. Clay Shannon 
• the Zany Time Travels of Warble McGorkle by Blackbird Crow Raven

...and this one, which adds corresponding images:

• Cow County Chip by T.R. "Ticket Ted" Shannon

  

• Autobiography of Mark Twain, Volume II by Samuel Langhorne Clemens

  

• Still Casting Shadows Volumes I (1620-1913) and II (1914-2006) by B. Clay Shannon

  

• the Zany Time Travels of Warble McGorkle by Blackbird Crow Raven

  

The latter is much more impressive, right? So it's really the combination of words and pictures that has the greatest impact. So how can you add image links like that to your HTML? Easy!

Just use one of these as a template:

For books and movies:

<a href="http://www.amazon.com/exec/obidos/ASIN/~/garrphotgall-20" target="_blank">
<img width="108" height="144" 
src="http://ecx.images-amazon.com/images/I/~._SL160_.jpg" /></a>

For recordings (MP3s, CDs):

<a href="http://www.amazon.com/exec/obidos/ASIN/~/garrphotgall-20" 
target="_blank"><img width="100" height="100" 
src="http://ecx.images-amazon.com/images/I/~._SL160_.jpg" /></a>

Replace the first tilde ("~") in those "templates" with the ASIN for the item. The "ASIN" is the number you will see usually following "/dp/" in the URL when you locate an item on Amazon's site. For example, if you searched for "Cow County Chip" (a book written by a retired CHP officer about his experiences in that line of work), the URL would be:

http://www.amazon.com/Cow-County-Chip-%C2%93Ticket-California/dp/1481708139/
ref=sr_1_1?ie=UTF8&qid=1383323769&sr=8-1&keywords=cow+county+chip

...and the ASIN embedded therein is 1481708139.

The second piece of information you need is the image link for the item. You can get that by going to http://squidutils.com/amazon-links.php and entering the ASIN into the "Product ASIN:" edit box, and your Amazon associate id (or mine: "garrphotgall-20") into the "Associate Tag:" edit box. I choose "large" for image size, but you can do whatever you want. Click the "Get HTML" button and retrieve the value in the "src=" portion of what is retrieved, which will be something like:

"http://ecx.images-amazon.com/images/I/510YtCn4odL._SL160_.jpg" 

The "510YtCn4odL" portion (or whatever it happens to be with the item you entered) is what you want.

Replace the second tilde in the template with that value. Now you've got the HTML you need for displaying an image of an item that, when clicked on, will take the user to the item's Amazon page.

Of course, you can experiment with and adjust the height and width of the item, as specified in the HTML, to correspond to your needs/desires, and if you are an Amazon associate, you can change the associate id part of the HTML ("garrphotgall-20" in the example) with your own - but feel free to retain what is there, if you are not an Amazon associate.

Note: The image for the first book links to the author's web site instead of Amazon, as that is what he (my father) prefers. 

Note 2: I have added an HTML file for download which contains various books of NFL teams using the "template" above.