This works with epub and mobi/azw formats (in Calibre and Kindle - not other ereaders that can read those formats) and its only tested on the windows version of those programs, not on any standalone devices
With the following tweaks, can add a url address popup when hovering on wrapped links at the bottom left of the screen, the same way webpages have a status panel to show urls when hovering on links, and works in both single and double page mode:
<a id="ebook" href="http://example.com">example</a>
+
#ebook {
position:relative }
#ebook:hover:after {
content: " " attr(href) "";
display:block;
position:fixed;
bottom:0px;
left:0px;
color:#000;
max-width:500pt;
text-align:justify;
word-wrap:break-word;
background:#DBD7BD;
border:1px solid #777;
padding:0px 5px 2px 5px }
=
(btw see post #6 for an alternate approach)
Another option is to use popups as notes, and also use the css equivalent or <br> which is just \a
<a id="ebooknote">example note</a>
+
#ebooknote {
position:relative }
#eboonote:hover:after {
white-space: pre-wrap; /* adding this is needed to use \a */
content: "And in the rows going across, from left to right, and in each row: the first row, the numbers are 4, 9 and 2, and in the second row, the numbers are 3, 5 and 7, and in the third row, the numbers are 8, 1 and 6. Whether you add them up diagonally, vertically or horizontally, no matter in which direction you go, it always adds up to the number 15.] \a \a The predominantly dark blue rectangle which occupies most of the middle tier of the mural, the upper side which passes through the exact middle of the small bisected sphere, represents the altar. The yellow rectangle set at an angle into the lower and middle tiers so that one corner touches the bottom of the mural is a second representation of the altar. They indicate [ladies and gentlemen] duality ";
display:block;
position:fixed;
bottom:0px;
left:0px;
color:#000;
max-width:300pt; /*example screenshot uses this width*/
text-align:justify;
word-wrap:break-word;
background:#DBD7BD;
border:1px solid #777;
padding:0px 5px 2px 5px }
=
and can also have multiple content rules like
content: " blablabla \a "attr(href)" \a blablabla" ;
OR
content: " blablabla \a "url(image.jpg)" \a blablabla " ;
OR
content: " " attr(href) "\a " url(image.jpg) " ";
OR
content: " " attr(href) "\a " url(image.jpg) "\a " url(image2.jpg) " ";
OR
content: " " url(image.jpg) " blablabla \a " url(image2.jpg) " blablabla \a "attr(href) " ";
Unfortunately cant have content fetch images like it fetches attr(href), so need unique rules. A few suggestions to that end:
1. specify urls twice with id="" AND alt="" to have the bulk handled by one and content by the other
2. give the unique content important tags, so other urls can keep using generic content
3. add the unique content to the htm/html to keep the stylesheet uncluttered
SO in the htm/html would have
<a id="ebook" alt="ebook1" href="http://www.example1.com">example1</a>
<a id="ebook" alt="ebook2" href="http://www.example2.com">example2</a>
<a id="ebook" href="http://www.example3.com">example3</a>
<style>
a[alt="ebook1"]:hover:after {content: "" url(image1.jpg) "\a " attr(href) " " !important}
a[alt="ebook2"]:hover:after {content: "" url(image2.jpg) "\a " attr(href) " " !important}
</style>
+
#ebook {
position:relative }
#ebook:hover:after {
content: " " attr(href) " ";
display:block;
position:fixed;
bottom:0px;
left:0px;
color:#000;
word-wrap:break-word;
background:#DBD7BD;
border:1px solid #777 }
For ebook1 & ebook2 links, will show the url in the bottom left, along with an image directly above it, while the third link will just show the url