Clickable Picture Links with Captions in HTML

Clickable Picture Links with Captions

This post is about adding pictures to your website, that your readers can click on, to take them to a different website, or even a webpage on your website. Nothing new there. However, looking around the web, to find (A) clickable pictures with captions, is not so easy. Not in html. There are websites, but they tell you how to click buttons, on WordPress, to do it. That’s not so easy when you are permanently set in text-mode, as I am in order to edit LaTeX code for equations, and for other stuff. (B) I also find that nowadays, you can’t get clickable pictures of the items you want to promote in the Amazon Affiliate Program. I always seem to just get the following picture (this one occurred when I tried to get an image link to to Pavel Ginfeld’s book on Tensors, but I get the same image, and link, for everything!)

So if you clicked on the image it would just take you to the Amazon main page, but with my affiliate details (mcjssjc1). So that was after selecting “Text and Image”. Below is a picture of the Amazon Affiliate webpage which generates links.

Amazon Link Generating Page
Amazon Link Generating Page. See https://affiliate-program.amazon.co.uk/ to join

The generated code for the Amazon Home Page Link picture, above, the one that just goes to the Amazon Main page, looks like this

Text and Image Link From Amazon
Text and Image Link From Amazon. Supposed to be for a Book but actually goes to Amazon Home Page


If I select “Text Only”, on the Amazon Link Generating Page, I get the following

Introduction to Tensor Analysis and the Calculus of Moving Surfaces

Which all seems correct, but not very interesting, as I really want a picture.

The generated code for this text-only link, looks like this

Text Only Amazon Affiliate Generated Link
Text Only Amazon Affiliate Generated Link


If I select “Image Only” then I get

Yes, just this little box with a cross in it! Works fine as a link but really not great at all!

The code for that is

Image Only Amazon Affiliate Generated Link
Image Only Amazon Affiliate Generated Link

“Ah!”, you say, “but you have the width and height both set to “1”, try making them a sensible size!”. Nope, just gives the same little box in a square but with a lot of space to the bottom and right of it.


Now, however, maybe I can add my own image to this piece of code? What if I replace

src=”//ws-eu.amazon-adsystem.com/widgets/q?encoding=UTF8&MarketPlace=GB&ASIN=B00FE92A28&ServiceVersion=20070822&ID=AsinImage&WS=1&Format=_SL160&tag=mcjssjc1-21″

with

src=”http://www.ourlife.co.uk/wp-content/uploads/2018/06/Grinfeld.jpg”

where Grinfeld.jpg is just a cropped screen print of the book from Amazon itself. I uploaded the Grinfeld.jpg file to my website, using file transfer (ftp or whatever you choose). This gives me the following

Well that works as a link and I have a decent picture. Also the link, to the Amazon website, does have my Amazon Affiliate identity (mcjssjc1). The html code now looks like this

Amazon Affiliate Link with Correct Image
Amazon Affiliate Link with Correct Image



The next thing to do is to add a caption to the picture and be able to change both the size, shape and position of the image, and the size, shape and position of the text:

Tensors Pavel Grinfeld at Amazon
This picture is a Clickable Link to the Amazon.co.uk website. Pavel Grinfeld’s “Introduction to Tensor Analysis and the Calculus of Moving Surfaces” is the latest book on the subject. You should see a few other books on Tensor Calculus there too.

The html code for this looks like this:

Picture, Links and Caption, and Sizing
Picture, Links and Caption, and Sizing

Just going through some of this code:~

  • There are alternative texts (alt=) for both the picture and the caption. This is in case either the picture link or the website link is not available, the viewer can then see what should be happening
  • The rel=”noopener” rel=”nofollow” code has something to do with not messing things up with search engine bots, like Google
  • target=”_blank” just opens the site in another tab on the viewers browser, rather than switching out your website page. Trust me, you don’t want to lose your readers that easy
  • Both the image and the caption text have their widths set, 500 pixels and 300 pixels, respectively
  • That’s about it. You can mess with alignment and height etc. There will be other things you can do too. But I’m thinking that this is a fairly good start, maybees?

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.