hotlinking png image

[bobcdy]

I wondered if anyone could help me with this problem.

I'd like to construct a hotlink TOC with links to images in my epub file.
Here's the TOC:

<p class="noindent"><a href="../Text/Section003.xhtml#frontispiece.png">Frontispiece.</a></p>

and here's the .png image code in the epub Section0003.xhtml:

<div class="center"><img alt="frontispiece" class="size-1" src="../Images/frontispiece.png" /></div>
</body>

This works perfectly in Adobe DE on my pc (I don't have a touch screen ereader yet so can't check on a reader), but it gives a validation error with ThreePress validation check. What must I do to eliminate the validation error??

Perhaps someone knows about an epub file on MR that has already solved my probem?

[ATDrake]

Forgive me if I'm overlooking something really obvious, but if you wanted to hotlink to an image, would you not point the entry in your TOC directly to "../Images/frontispiece.png" and not out to "../Text/Section003.xhtml#frontispiece.png" which implies an id or name="frontispiece.png" attached to a tag somewhere in the xhtml of Section003?

Or if by hotlinking, you mean you just want to have it jump directly to that part of Section003 where the image is shown, and not just to the image file itself, then you'll be wanting to add said id="frontispiece" to either the <img> or <div> tag immediately preceding, and have your TOC code as "../Text/Section003.xhtml#frontispiece" or whatever you choose to id it as.

Hope this helps.

[bobcdy]

Thanks ATDrake,
I tried the first suggestion "../Images/frontispiece.png" and that won't work with Adobe DE. I had also had tried earlier to use the id="frontispiece.png" in the <div> and in the <img> tag but neither worked either (also tried id="frontispiece"). Perhaps, though, I'm doing something wrong - I'll work on your suggestions tomorrow and see if I have any better success.
Bob

[ATDrake]

Well, quite possibly you're not doing anything technically wrong and it's just ADE being quirky again, especially if it's not obeying the id="frontispiece.png"/"frontispiece" stuff in Section003 and the # fragment identifier in the TOC matches.

Because it really does look like the ThreePress validation tool would be complaining about the original corresponding id="frontispiece.png" not being found if it's linked from the TOC but you didn't have it somewhere in your text.

Though perhaps it's caught on some completely different error like an unclosed tag or something else which just happens to be in the vicinity of your hotlinking code.

Anyway, good luck and hope it all works out for you.

[bobcdy]

I found that Sigil works perfectly with ATDrakes first suggestion "../Images/frontispiece.png", but Adobe DE will not. Does Adobe DE have a bug about hotlinking images? Perhaps the only solution is to live with the epub validation errors, because all works perfectly with Adobe DE in spite of the errors?
Bob

The validation error check indicates a fragment identifier is not defined:
"ERROR: An Introduction to
Geology, 2nd Ed_a.epub/OEBPS
/Text/TOC.xhtml(67):
'frontispiece.png': fragment identifier is not defined in
'OEBPS/Text/Frontispiece.xhtml'"

ER

[bobcdy]

Well, after experimenting a bit as far as I can determine, simply changing:
<p class="noindent"><a href="../Text/Section003.html#Frontispiece.png">Frontispiece.</a></p>

to:
<p class="noindent"><a href="../Text/Section003.xhtml">Frontispiece.</a></p>

works with Adobe DE because Section003.xhtml only contains the frontispiece.png image, and gives no validation errors because there is no missing defined identifier.
Bob

[Hitch]

Originally Posted by bobcdy

I wondered if anyone could help me with this problem.

I'd like to construct a hotlink TOC with links to images in my epub file.
Here's the TOC:

<p class="noindent"><a href="../Text/Section003.xhtml#frontispiece.png">Frontispiece.</a></p>

and here's the .png image code in the epub Section0003.xhtml:

<div class="center"><img alt="frontispiece" class="size-1" src="../Images/frontispiece.png" /></div>
</body>

This works perfectly in Adobe DE on my pc (I don't have a touch screen ereader yet so can't check on a reader), but it gives a validation error with ThreePress validation check. What must I do to eliminate the validation error??

Perhaps someone knows about an epub file on MR that has already solved my probem?

Hi:

I must be missing something--you can do this easily with Sigil, and it will validate perfectly in 1.05 EPUBCheck.

Just open the image "page" up in CV, and do this:

<div class="center"><h1 title="whatever you want it to say in the TOC"><img alt="frontispiece" class="size-1" src="../Images/frontispiece.png" /></h1></div>
</body>

That's it. It will validate in ThreePress (I do this ALL the time), it'll show up in the TOC (use whatever header you want--h1 through h6), and no problem.

If there's something else going on that I've missed or don't understand, sorry; otherwise, hope this is useful.


Hitch

[bobcdy]

Hitch
Actually I do that also for a Sigil-derived external TOC, but I was trying to do an internal href hotlink TOC in addition to the standard external TOC. The problem with the external TOC for an image is that it requires a caption associated with it (although one can eliminate it with a white text color, it still takes up space that reduces the maximum viewable image size) so I generally don't show images in the external TOC.

ATDrake's first suggestion "../Images/frontispiece.png", for an href toc works with Sigil and would work with a web html page, but I could not get it to work with Adobe DE.

I'm sure there are more elegant and correct ways to accomplish what I wanted, but my last post (yesterday, 11:26 pm) showed a simple-minded way to work around my validation error problem.
Bob

[Hitch]

Originally Posted by bobcdy

Hitch
Actually I do that also for a Sigil-derived external TOC, but I was trying to do an internal href hotlink TOC in addition to the standard external TOC. The problem with the external TOC for an image is that it requires a caption associated with it (although one can eliminate it with a white text color, it still takes up space that reduces the maximum viewable image size) so I generally don't show images in the external TOC.

Bob

No, it doesn't require a caption. That's the beauty of it. You wrap the header tags around the img tag, and put the text for the illustration in the TITLE attribute. You don't put any actual text inside the tags--no text shows up on the "page," only whatever description, caption, what-have-you that you want to show IN the TOC.

I make kids' books like this every day. No text on the page; all the text in the header tags to create a TOC. I use it for illustrations, imaged tables; I use it for authors who want something like "Chapter 1" in the actual TOC, but only want the number itself on the page, e.g., "1."

Please look again at the example I gave you, inside the code box. No text ON the page; only in the TOC.

Hitch

[theducks]

Originally Posted by Hitch

.

I make kids' books like this every day. No text on the page; all the text in the header tags to create a TOC. I use it for illustrations, imaged tables; I use it for authors who want something like "Chapter 1" in the actual TOC, but only want the number itself on the page, e.g., "1."

Please look again at the example I gave you, inside the code box. No text ON the page; only in the TOC.

Hitch

I had asked Valloric for a tool to create a "title", text-less header button, like that, because I was using the h# title="stuff" frequently.
He thought I was the only one doing this and closed the ticket.

[Hitch]

Originally Posted by theducks

I had asked Valloric for a tool to create a "title", text-less header button, like that, because I was using the h# title="stuff" frequently.
He thought I was the only one doing this and closed the ticket.

Oh, hell, NO. I literally do it daily. Of course, I'm making books for small publishers, authors, etc., professionally, and we're doing a book a day, sometimes 2. I made a clip (my eternal thanks to @Capidamonte, for turning me on to this software) in NoteTab, and use it constantly, in my html stage of production. it inserts <h6 title=""></h6> and then I can search and replace them with whatever level--1 or 2, or sometimes 3--that I need, and slam in the text. For illustrated texts, this feature is INVALUABLE.

To be honest, this feature is how I initially became a Sigil-aficionado. I couldn't do hotlinks to illustrations in one author's book in MBP Creator (that I was only doing for Kindle--he did Smashwords for his epub versions, and they look like excrement, FWIW), so I did it in Sigil. From that point forward, I was a Sigil addict. Now I do all epubs first, then ->.mobi. Sigil is absolutely my "go-to" ebook creation software; I do everything in it.

Humorously enough, I don't think the OP has come back to this thread, and therefore doesn't know that he CAN do what he wants to do. Bummer.

Hitch

[capidamonte]

I just tried a cool trick recently to make "invisible" text: set the font size to 0.

[bobcdy]

Capidamonte - thanks for the 'invisible' text trick. I'll remember it for later.

Hitch - I'll repeat again that I wanted an internal hotlink toc NOT an external toc and my problem was with the internal toc. Please refer to my original post. I'll also remember your approach for the captionless external Sigil TOC; I didn't realize that would work. It probably would be best to have the images referred to both in the internal and external tocs because some readers prefer one or the other.

If you have any suggestions for a better solution than the one I gave for my problem with internal hotlink image toc and Adobe DE, I'd really appreciate that.
Bob

[ATDrake]

Originally Posted by Hitch

I made a clip (my eternal thanks to @Capidamonte, for turning me on to this software) in NoteTab, and use it constantly, in my html stage of production. it inserts <h6 title=""></h6> and then I can search and replace them with whatever level--1 or 2, or sometimes 3--that I need, and slam in the text.

Just curious, but if you don't mind my asking, is there some sort of thing in your workflow that would make it less feasible use a clip that does <h^?[header level=_1|2|3] title="^?[Add a caption]">^&</h^?[header level]> and thereby auto-brackets your selected link and also prompts you to pick the appropriate header level and fill in the title text all at the same time?

Because it seems like that might be slightly easier and perhaps take fewer steps. Of course, if you'd rather get the basic structure in place before fine-tuning the "captions", then that makes sense.

[capidamonte]

Originally Posted by bobcdy

I found that Sigil works perfectly with ATDrakes first suggestion "../Images/frontispiece.png", but Adobe DE will not. Does Adobe DE have a bug about hotlinking images? Perhaps the only solution is to live with the epub validation errors, because all works perfectly with Adobe DE in spite of the errors?
Bob

The validation error check indicates a fragment identifier is not defined:
"ERROR: An Introduction to
Geology, 2nd Ed_a.epub/OEBPS
/Text/TOC.xhtml(67):
'frontispiece.png': fragment identifier is not defined in
'OEBPS/Text/Frontispiece.xhtml'"

ER

Umm.. could be I'm being stupid, but the validation check is saying that it can't find an id named frontispiece.png -- which maybe it can't find because you've been using the id frontispiece, not frontispiece.png.

As far as I can tell, you seem otherwise valid. I use something similar all the time, and my epubs validate.