Click here to Skip to main content
Click here to Skip to main content
Go to top

How To Add Image Links in HTML

, 4 Nov 2013
Rate this:
Please Sign up or sign in to vote.
Wherein the gentle reader is instructed on how to add images (which incorporate links) into his or her HTML

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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

B. Clay Shannon
Publisher "Found in the Translation"
United States United States
I am the entire team at "Found in the Translation," which produces multilingual books (paperback and Kindle versions) such as "Don Quixote: In Spanish and English, Paragraph-by-Paragraph" among many others (English paired with not only Spanish, but also French and even Finnish). You can see all those books here: http://jsfiddle.net/clayshannon/pRgQL/75/
 
Personal web sites that I have created can be seen at http://usamaporama.azurewebsites.net and http://bigsurgarrapata.azurewebsites.net/
 
Peripatetic and picaresque, I have lived in eight states; specifically, besides my native California (where I was born and where I now again reside) in chronological order: New York, Montana, Alaska, Oklahoma, Wisconsin, Idaho, and Missouri.
 
I am also a writer of both fiction (for which I use a nom de plume, "Blackbird Crow Raven", as a nod to my Native American heritage - I am "½ Cowboy, ½ Indian") and nonfiction: http://www.lulu.com/spotlight/blackbirdcraven
Follow on   Twitter   Google+   LinkedIn

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Mobile
Web02 | 2.8.140922.1 | Last Updated 5 Nov 2013
Article Copyright 2013 by B. Clay Shannon
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid