problem ebedding links in image files

[ni_c]

Hey all,

im looking for a better url embedding solution for images with calibre's editing program

The default suggestions to use

<a href="www.example.com"><img src="example.jpg"></a>

but it doesnt work with ebooks (at least conversions to pdf)

but what ive found does are the following and couple variations

<p class="calibre1"><a href="www.example.com"></p>
<p class="calibre1"><img src="example.jpg" ></p></a>

which shows the link on hover but also displays the floating banner anywhere it likes on the horizontal plane of the image height; And for some reason if the <p is replaced with <div or <em it still works). One way to stop the floating url banner appearing and jumping everywhere is to just add the align property like

<p class="calibre1"><a href="www.example.com"></p>
<p class="calibre1"><img src="example.jpg" align="left"></p></a>

and aligns what i wanto use in the first place to use its text wrapping behaviour, but what actually happens with above, is itll only open url links when clicking on the very bottom edge of the image, so isnt practical.

am hoping someone around here might know of fairly simple solutions, as im obviously not expert with html, tho dont mind experimenting.

So specifically want the floating url banner thing to always appear near the cursor like normal behavior, to have the whole image clickable, and still use align property with images that have embeded urls.

cheers

minor update, well i just looked at the epub being edited in the ebook viewer, and it doesnt even show floating url banners, so less an issue using that fwiw

Also while here, just realized image files can be decorated from the stylesheet.css individually with their alt names which is pretty cool, and logical... If anyones interested, heres the basic syntax needed:

Obviously the all generic terms just

img { ...code here... }

to customise individual images, first set a custom alt name, say 'AA' for example, then just write it as

img[alt="AA"] { ...code here... }

or to exclude that instead write it as

img:not([alt="AA"]) { ...code here... }

mutiple exception rules can be added using

img:not([alt="AA"]):not([alt="AB"]):not([alt="AC"]) { ...code here... }

and that appears the only way, it doesnt even accept targeting multiple items with the usual comma rule

[theducks]

ni_c

There is no floating banner on many e-ink devices
(no mouse , either. just a tedious 5-way or other cursor nav buttons)

Always check your results on a range of targeted devices

[ni_c]

good point, turns out to be just the same with kindle, lol am even surprised,

edit

BTW on the topic of dealing with url links, noticed long urls dont auto wrap so lose the tail end which is a problem. The basic fix is to just enclose it with a href, but can also add a css wrap rule same as the 'alt' rule method before: instead of 'alt', use 'name', eg name="AA" in the enclosed tags like

<a href="www.example.com" name"AA" >www.example.com</a>

then modify with

a[name=''AA"] { ...code here...}

so links need wrapping like

<a href="www.exampleABVVDEFGHIJKLMNOPQRSTUVWXYZ_ABVVD EFGHIJKLMNOPQRSTUVWXYZ_ABVVDEFGHIJKLMNOPQRSTUVWXYZ _ABVVDEFGHIJKLMNOPQRSTUVWXYZ.com" >www.exampleABVVDEFGHIJKLMNOPQRSTUVWXYZ_ABVVDEFGHI JKLMNOPQRSTUVWXYZ_ABVVDEFGHIJKLMNOPQRSTUVWXYZ_ABVV DEFGHIJKLMNOPQRSTUVWXYZ.com</a>

can change to

<a href="www.exampleABVVDEFGHIJKLMNOPQRSTUVWXYZ_ABVVD EFGHIJKLMNOPQRSTUVWXYZ_ABVVDEFGHIJKLMNOPQRSTUVWXYZ _ABVVDEFGHIJKLMNOPQRSTUVWXYZ.com" name"AA" >www.exampleABVVDEFGHIJKLMNOPQRSTUVWXYZ_ABVVDEFGHI JKLMNOPQRSTUVWXYZ_ABVVDEFGHIJKLMNOPQRSTUVWXYZ_ABVV DEFGHIJKLMNOPQRSTUVWXYZ.com</a>

then add wrap code

a[name="AA"] { word-wrap: break-word }

[ni_c]

Heres a few other ideas relating to linking within the document, putting here as much to remind me later, but glad it it helps simplify things for anyone else while at it (btw, turns out name"" and id"" are interchangable, but calibre defaults to using id"" so will use that here for consistency)

Ok supposing all the epub sections are merged as index_split_000.html and you wanto link to a url at the end of the book from half a dozen places, and be able to link back to those places from the url link. Will need to make seperate link backs

ill write it so theres a seperate title for the link on the previous line and add linkbacks on a third line after url. Am using page breaks, but no difference with paragraphs (have also added seperate id for the url itself -1.0.1- just to work with the stylesheet.css). And if the titles on a previous line to the link, is better to have internal links point to the title line instead of the link itself. Heres an example

<p class="calibre1" id="1.0">Good book on dogs:<br>
<a href="www.dogbook.com/bestsellers/you_bite_girl" id="1.0.1" >www.dogbook.com/bestsellers/you_bite_girl</a><br>
<i>Go back to reference links:</i><b><a href="index_split_000.html#1.1">[1]</a>, <a href="index_split_000.html#1.2">[2]</a>, <a href="index_split_000.html#1.3">[3]</a>, <a href="index_split_000.html#1.4">[4]</a>, <a href="index_split_000.html#1.5">[5]</a>, <a href="index_split_000.html#1.6">[6]</a></b></p>

the reference links themselves just need this

bla bla <a href="index_split_000.html#1.0" id="1.1" >see book</a> [1] bla bla
bla bla <a href="index_split_000.html#1.0" id="1.2" >see book</a> [2] bla bla
bla bla <a href="index_split_000.html#1.0" id="1.3" >see book</a> [3] bla bla
bla bla <a href="index_split_000.html#1.0" id="1.4" >see book</a> [4] bla bla
bla bla <a href="index_split_000.html#1.0" id="1.5" >see book</a> [5] bla bla
bla bla <a href="index_split_000.html#1.0" id="1.6" >see book</a> [6] bla bla

btw calibre seems to prefer formatting it as #id_1.0 but just #1.0 works fine

[kovidgoyal]

FYI Using a number as the first character in anchors will cause them to not work in some epub reading applications. There is a reason calibre does not do that.

[ni_c]

ok, thanks for clearing that up Kovid

and fwiw, think this topic can be listed as resolved, wont persue embeding links in images

cheers