Still reading
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 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
|