View Single Post
Old 02-14-2021, 08:56 AM   #9
Quoth
Still reading
Quoth ought to be getting tired of karma fortunes by now.Quoth ought to be getting tired of karma fortunes by now.Quoth ought to be getting tired of karma fortunes by now.Quoth ought to be getting tired of karma fortunes by now.Quoth ought to be getting tired of karma fortunes by now.Quoth ought to be getting tired of karma fortunes by now.Quoth ought to be getting tired of karma fortunes by now.Quoth ought to be getting tired of karma fortunes by now.Quoth ought to be getting tired of karma fortunes by now.Quoth ought to be getting tired of karma fortunes by now.Quoth ought to be getting tired of karma fortunes by now.
 
Quoth's Avatar
 
Posts: 14,414
Karma: 107078855
Join Date: Jun 2017
Location: Ireland
Device: All 4 Kinds: epub eink, Kindle, android eink, NxtPaper
You can only have one link per image, sadly, in any ebook format. No-one thought back at the start that a client side image map was a useful thing. The closest is to tile separate images, each with a link. The earliest ebooks didn't actually support images at all.

It's sad, because it doesn't need javascript. This is the HTML code for an image map:
Code:
 <MAP NAME="dtt-map-ireland">
   <AREA SHAPE=POLYGON COORDS="4,699,157,707,127,752,124,760,155,768,144,783,179,797,197,838,221,856,265,847,278,865,190,915,9,913" HREF="dtt-southwest.htm">
   <AREA SHAPE=POLYGON COORDS="679,503,632,501,572,521,586,528,610,556,603,597,606,623,622,629,632,628" HREF="dtt-wicklow.htm">
   <AREA SHAPE=POLYGON COORDS="359,6,459,0,493,3,526,33,535,81,526,135,500,160,400,210,334,200,257,179,250,156,272,70" HREF="dtt-donegal.htm">
   <AREA SHAPE=POLYGON COORDS="300,195,407,216,485,173,476,195,272,343,249,312,280,275,234,256,233,248" HREF="dtt-sligo.htm">
   <AREA SHAPE=POLYGON COORDS="54,378,157,418,184,390,193,426,232,417,260,404,281,375,264,339,241,310,270,279,219,240,121,228,80,238,57,279" HREF="dtt-mayo.htm">
   <AREA SHAPE=POLYGON COORDS="493,232,482,283,500,326,468,468,347,465,283,379,355,316" HREF="dtt-north-midlands.htm">
   <AREA SHAPE=POLYGON COORDS="484,241,538,204,580,149,597,184,603,237,638,243,646,268,683,273,635,322,636,403,458,433,488,268" HREF="dtt-north-east.htm">
   <AREA SHAPE=POLYGON COORDS="63,385,203,430,280,393,361,440,317,562,160,546,113,525,58,477,35,430,35,400" HREF="dtt-galway.htm">
   <AREA SHAPE=POLYGON COORDS="156,551,329,549,302,601,320,669,91,683,77,637" HREF="dtt-limerick-kerry.htm">
   <AREA SHAPE=POLYGON COORDS="160,691,344,669,429,675,459,758,403,826,290,880,227,839,157,797,155,698" HREF="dtt-cork.htm">
   <AREA SHAPE=POLYGON COORDS="466,765,634,754,636,707,615,693,637,633,577,606,530,554,479,577,449,611,415,645,399,698" HREF="dtt-south-east.htm">
   <AREA SHAPE=POLYGON COORDS="406,652,484,563,493,567,403,505,326,509,279,604,315,662,385,669" HREF="dtt-midlands.htm">
   <AREA SHAPE=POLYGON COORDS="677,499,592,499,510,574,409,502,492,404,636,402" HREF="dtt-east.htm">
   <AREA SHAPE=POLYGON COORDS="346,458,446,467,415,557,333,560" HREF="dtt-midlands.htm">
  </MAP>
Goes typically just before the closing </body> tag on a page:
It's from here.
Then each page linked to has clickable areas at the edges.

Sadly you need an App not an ebook to do this other than as a webpage. But it will work without a server, i.e. a set of web pages unzipped into a directory.

So http://maps.techtir.com/dtt-midlands.htm
has this to do the edges.
Code:
<MAP NAME="midlands">
   <AREA SHAPE=POLYGON COORDS="0,331,289,331,285,444,0,443" HREF="dtt-limerick-kerry.htm">
   <AREA SHAPE=POLYGON COORDS="1,1,256,0,256,93,89,95,93,327,0,326" HREF="dtt-galway.htm">
   <AREA SHAPE=POLYGON COORDS="260,1,260,92,650,96,651,0" HREF="dtt-north-midlands.htm">
   <AREA SHAPE=POLYGON COORDS="660,2,658,95,835,41,839,1" HREF="dtt-east.htm">
   <AREA SHAPE=POLYGON COORDS="837,12,758,34,758,374,837,404" HREF="dtt-wicklow.htm">
   <AREA SHAPE=POLYGON COORDS="528,443,528,368,753,377,837,409,836,443" HREF="dtt-south-east.htm">
   <AREA SHAPE=POLYGON COORDS="291,375,525,372,523,441,289,444" HREF="dtt-cork.htm">
  </MAP>
How does it connect to the image? It's the extra
Code:
USEMAP="#midlands"
property

Code:
<IMG SRC="images/dtt-midlands.jpg" WIDTH="840" HEIGHT="445" VSPACE="0" HSPACE="0" BORDER="0" USEMAP="#midlands">
You can go and view source. No server magic or javascript!

Last edited by Quoth; 02-14-2021 at 09:07 AM. Reason: Sauce
Quoth is offline   Reply With Quote