Bookshelf | Reports | Community | KDP Select

Home » Amazon KDP Support » Ask the Community » Formatting

Thread: How to make an image clickable... (+ image size)


Reply to this Thread Reply to this Thread Search Forum Search Forum Back to Thread List Back to Thread List

Permlink Replies: 23 - Pages: 2 [ 1 2 | Next ] - Last Post: Sep 3, 2013 4:23 PM Last Post By: cjeasyaspie
Nikos Konstas

Posts: 4
Registered: 03/27/13
How to make an image clickable... (+ image size)
Posted: Aug 26, 2013 9:42 AM
Click to report abuse...   Click to reply to this thread Reply
Hi All,

I'm using an HTML document with kindlegen to generate a book.

Due to the nature of the content, just after the TOC I have an index of images (tiles).
I want the user to be able to tap on a tile and jump to the right page.

The HTML for each tile is:

<a href="#some_id"><img src="imgxyz.jpeg"/></a>

However, when I tap on the image the default action is to zoom-in rather than to following the link.

Anyway to fix this?

Also, another question:

Setting the image width (effectively size) to e.g. 20% works on Kindle Paperwhite and Kindle Fire/iOS. But does not work on Kindle or Kindle DX

Is there a way to apply a width (has to be relative) that works across all devices?

Thank you.

Edited by: Nikos Konstas on Aug 26, 2013 9:43 AM

Edited by: Nikos Konstas on Aug 26, 2013 10:03 AM
Notjohn

Posts: 5,531
Registered: 02/27/13
Re: How to make an image clickable... (+ image size)
Posted: Aug 26, 2013 11:48 AM   in response to: Nikos Konstas in response to: Nikos Konstas
Click to report abuse...   Click to reply to this thread Reply
I've never tried this, but it's interesting to know that the Zoom feature defeats it. The e-ink Kindles don't zoom AFAIK, so it ought to work there. I can't see anything wrong with your link.

What if you put a <a href="#some_id">GoTo</a> hotlink below it?

Good luck! -- NJ

The book: Notjohn's Guide to Kindle Publishing: Ten Steps to Selling Your E-book on Amazon (Or Anywhere Else) (Third Edition)

The blog: Notjohn's KDP Guide
Peter Reynolds

Posts: 12
Registered: 12/17/12
Re: How to make an image clickable... (+ image size)
Posted: Aug 26, 2013 11:57 AM   in response to: Nikos Konstas in response to: Nikos Konstas
Click to report abuse...   Click to reply to this thread Reply
Hi Nikos,

You should check that you have the <a "name="#some_id"> PLACE WHERE YOU WANT LINKED</a> in the appropriate place in the same file. You may also want to change the href tag to <a href="file_name.html#some_id"><img src="imgxyz.jpeg"/></a>.

Good luck,

Peter.
Light A Big Fire - Complete guide to building Kindle ebooks

Edited by: Peter Reynolds on Aug 26, 2013 11:57 AM
Megan

Posts: 65
Registered: 11/24/12
Re: How to make an image clickable... (+ image size)
Posted: Aug 27, 2013 11:35 PM   in response to: Nikos Konstas in response to: Nikos Konstas
Click to report abuse...   Click to reply to this thread Reply
However, when I tap on the image the default action is to zoom-in rather than to following the link.

Anyway to fix this?


What device or program are you using to test this? And yes, you can zoom images (and tables) on some e-Ink Kindles (maybe all, not sure).

I just tried it out on my Kindle Touch (because I've never tried this before and I was curious).

A quick tap on the image that is a link simply flips to the next page, as if it weren't a link at all.

I thought it was a failure, that the link had been removed, but then I tapped and held for a moment (like I wanted to zoom) and there were two little buttons that came up. One a magnifying glass (zoom) and the other a small hand (like what you see when you hover your cursor over a link). Tapping on the link button brought the book to the proper place where I had linked the image to go to.

I'd never seen this before, and found it interest, and I thought other might as well.

But I'd also like to note:
It was very easy to miss the fact that this image was a link. It was underlined, but to be honest, I hadn't noticed that the first time I loaded the book. My point is, if the reader doesn't know that the images are links what are the odds that they will go through the necessary steps to actually get the link to work?
So, I would think about adding in a line that mentions that the images link to somewhere else in the book.

Also, another question:

Setting the image width (effectively size) to e.g. 20% works on Kindle Paperwhite and Kindle Fire/iOS. But does not work on Kindle or Kindle DX

Is there a way to apply a width (has to be relative) that works across all devices?


Quick answer: Sadly, no.

Long Answer:
Apparently, older Kindles just don't do percentages. I had some images a while back that I wanted to span a certain percentage of the screen (don't remember the percentage, somewhere in the 25%-33% area I think). I tested it and on the newer devices it worked exactly as I wanted, but on older devices the images still spanned the entire screen, 100%. I tried all the ways I could think of to make the images the size I wanted. Didn't work. Did some research and found out the only way to make images appear how you want on older devices is to use exact pixels.

So, in the end, the best solution I found is to use the @media query and format the image differently for the different devices. Percentages for the newer, and pixels for the older.

Edited by: Megan on Aug 27, 2013 11:36 PM
Notjohn

Posts: 5,531
Registered: 02/27/13
Re: How to make an image clickable... (+ image size)
Posted: Aug 28, 2013 1:15 AM   in response to: Megan in response to: Megan
Click to report abuse...   Click to reply to this thread Reply
So, in the end, the best solution I found is to use the @media query and format the image differently for the different devices. Percentages for the newer, and pixels for the older.

Sad news indeed.

Of course one needn't worry about images that are meant to fill the screen (with the usual margin). Anything 450 pixels wide or more will do that on the older Kindles.

Does this effect show on the plain "Kindle" emulation in Kindle Previewer?

Good luck! -- NJ

The book: Notjohn's Guide to Kindle Publishing: Ten Steps to Selling Your E-book on Amazon (Or Anywhere Else) (Third Edition)

The blog: Notjohn's KDP Guide
booknookbiz

Posts: 2,041
Registered: 03/04/10
Re: How to make an image clickable... (+ image size)
Posted: Aug 28, 2013 3:34 AM   in response to: Notjohn in response to: Notjohn
Click to report abuse...   Click to reply to this thread Reply
Sad news indeed.

Notjohn, this has ever been so; nothing works to proportionately size images on the K7 devices. I've seen Guido's bit on his blog about using ems to size images, and I have yet to see that work. We've used a wide variety of experiments to see if anything else would work, primarily because of the huge issue in addressing the significantly increased pixel density on the HD devices. You have to code % sizes for K8 and fallback pixel sizes for K7, or the K7-devices will all endeavor to enlarge the embedded image as big as possible. And, yes, this behavior is emulated on the KP Desktop, in e-ink mode for Kindle and DX. There's nothing new about this. ;-)

Hitch
We produce ebooks
Listed as an Amazon Professional Conversion Service: http://bit.ly/uFwMwb
An INScribe Preferred Conversion Partner
http://www.booknook.biz/
Follow me on Twitter: @BookNookBiz
"If you think it's expensive to hire a professional to do the job, wait until you hire an amateur."
  • Red Adair
Notjohn

Posts: 5,531
Registered: 02/27/13
Re: How to make an image clickable... (+ image size)
Posted: Aug 28, 2013 12:36 PM   in response to: booknookbiz in response to: booknookbiz
Click to report abuse...   Click to reply to this thread Reply
Thanks, Hitch. I checked my publisher's logo in the "Kindle" emulation, and it is indeed a bit oversized (that is, not 12% as instructed), but it's perfectly acceptable, which is why I didn't pick up on it earlier. I won't go to the media calls. -- NJ
Nikos Konstas

Posts: 4
Registered: 03/27/13
Re: How to make an image clickable... (+ image size)
Posted: Aug 30, 2013 3:12 AM   in response to: Notjohn in response to: Notjohn
Click to report abuse...   Click to reply to this thread Reply
Thank you all very much for your help - I will go back working on this on the weekend and report my findings.

Just to clarify, I'm using raw HTML and kindlegen to generate the output files.

For testing, I use the kindle previewer - I have no kindle device (shocking) but plan to get one soon. Any suggestions which one is best suited to authoring/testing?

Cheers
lee truslow

Posts: 83
Registered: 07/17/13
Re: How to make an image clickable... (+ image size)
Posted: Aug 30, 2013 4:25 AM   in response to: Nikos Konstas in response to: Nikos Konstas
Click to report abuse...   Click to reply to this thread Reply
I've had both K2 and now 8 Fires, and I LOVE Fire 2. I don't know about "best" as far as authoring is concerned, but I'd be in a pickle without my Fire 2.

Along a similar line to your original question, I make low language, high photography cookbooks, and I'd eventually like to make collections of them. I will need to make a TOC with pictures, probably the book covers I have on the singles. I have Word (grumble grumble), and I could also use Open Office. Is there a way I could do this relatively easily, or will I have to do coding?

I also have PhotoShop Elements and now Painter X3, if that helps.

Thanks all!

You can see the books at http://www.amazon.com/s/ref=ntt_athr_dp_sr_1?_encoding=UTF8&field-author=A.L.%20Truslow&search-alias=digital-text&sort=relevancerank .
cjeasyaspie

Posts: 2,358
Registered: 05/28/09
Re: How to make an image clickable... (+ image size)
Posted: Aug 30, 2013 7:32 AM   in response to: lee truslow in response to: lee truslow
Click to report abuse...   Click to reply to this thread Reply
Along a similar line to your original question, I make low language, high photography cookbooks, and I'd eventually like to make collections of them. I will need to make a TOC with pictures, probably the book covers I have on the singles. I have Word (grumble grumble), and I could also use Open Office. Is there a way I could do this relatively easily, or will I have to do coding?

Yes, you can do it easily... but the first step is to learn to appreciate the beauty and strength of MS Word.

Here is how I would format an MS Word file to put pictures in the Kindle table of contents.

While it is possible to use full size pictures in the TOC, that would be cumbersome, so I would make smaller copies of the pictures... probably postage stamp size.

I would insert each postage stamp picture "near" each chapter title with no paragraph break between them.

Use "manual line breaks" between lines if you want to place the picture above or below the Chapter Title.

You can't place the picture and the title side-by-side without a good deal of manual formatting.

Before inserting the Heading tag, (in preparation for making the TOC (in MS Word)), make sure to highlight both the postage stamp picture and the chapter title.

With tags created this way, when you create the TOC (in MS Word), the pictures will be included in the TOC.

Happy Kindling,

CJ, at CJ's Easy as Pie Kindle Tutorials
http://www.cjs-easy-as-pie.com/

lee truslow

Posts: 83
Registered: 07/17/13
Re: How to make an image clickable... (+ image size)
Posted: Aug 30, 2013 7:47 AM   in response to: cjeasyaspie in response to: cjeasyaspie
Click to report abuse...   Click to reply to this thread Reply
CJ--Thanks SO much!! That's just what I was looking for, and I agree about the stamp-size idea.

As for the beauty and strength of Word, I'd probably agree with you if Word 2013 didn't freeze on me at least twice a day and disappear my pictures a good 6 times a day.
Notjohn

Posts: 5,531
Registered: 02/27/13
Re: How to make an image clickable... (+ image size)
Posted: Aug 30, 2013 8:42 AM   in response to: lee truslow in response to: lee truslow
Click to report abuse...   Click to reply to this thread Reply
I have Word (grumble grumble), and I could also use Open Office. Is there a way I could do this relatively easily, or will I have to do coding?

You can get the Writer2epub plug-in for Open Office. You should probably examine it carefully in Sigil (free & excellent) because Word does indeed litter book files with small bombshells. Your only defense against that is to faithfully use Styles, preferably after first taking the online tutorial at Microsoft.

If you use the postage-stamp idea, beware! Older Kindles want to zoom images to fill the page (that's the K1, K2, early models of the K3 Keyboard, and the DX). By stark contrast, the Fire HD and the 8.9 inch tablet follow absolute measurements, so images can look very small on them, especially on the larger tablet.

Good luck! -- NJ

The book: Notjohn's Guide to Kindle Publishing: Ten Steps to Selling Your E-book on Amazon (Or Anywhere Else) (Third Edition)

The blog: Notjohn's KDP Guide
lee truslow

Posts: 83
Registered: 07/17/13
Re: How to make an image clickable... (+ image size)
Posted: Aug 30, 2013 9:26 AM   in response to: Notjohn in response to: Notjohn
Click to report abuse...   Click to reply to this thread Reply
Thanks, NJ. So much to think about... I'm very glad it's reasonably doable, some kind of way.

You know, those "little bombshells" are probably why some books don't play with text-to-speech. They stop in exactly the same place every time, and my Fire thinks it's still reading.
cjeasyaspie

Posts: 2,358
Registered: 05/28/09
Re: How to make an image clickable... (+ image size)
Posted: Aug 30, 2013 11:45 AM   in response to: lee truslow in response to: lee truslow
Click to report abuse...   Click to reply to this thread Reply
Here is a Table of Contents with pictures, created with MS Word 2010.




Concerning NotJohn's less than satisfactory results, perhaps it should be remembered that he doesn't use MS Word.

Happy Kindling,

CJ, at CJ's Easy as Pie Kindle Tutorials
http://www.cjs-easy-as-pie.com/



Nikos Konstas

Posts: 4
Registered: 03/27/13
Re: How to make an image clickable... (+ image size)
Posted: Aug 31, 2013 12:22 PM   in response to: cjeasyaspie in response to: cjeasyaspie
Click to report abuse...   Click to reply to this thread Reply
OK, some progress:

The main reason for resizing the images was to have them displayed next to each other (in a row). I gave up on trying to do that using HTML and instead I just merged the images into one. That works across all devices (tested using the emulator) and looks fine.

Also when it comes to the TOC made out of image tiles: I figured out I cannot really have images with links so instead I have a hybrid solution where I have:

  • toc entry 1
  • toc entry 2
  • toc entry 3
[image row: img 1img 2img 3]

  • toc entry 4
  • toc entry 5
  • toc entry 6
[image row: img 4img 5img 6]

Now, I have one more question... how on earth do I mark the TOC header to that kindlegen knows it's a TOC?

I tried:

<h1 id="toc">Table Of Contents</h1>

and

<h2 id="toc">Table Of Contents</h2>

but didn't work... there must be a way?

Thank you.

Edited by: Nikos Konstas on Aug 31, 2013 12:22 PM

Edited by: Nikos Konstas on Aug 31, 2013 12:25 PM

Legend
Helpful Answer
Correct Answer

Point your RSS reader here for a feed of the latest messages in all forums