Image Maps Prevent Display of Images in Exported e-Books

[chlarsen]

Greetings from Kenya,
It seems that the epub plugin does not export image maps created with the Dokuwiki imagemapping plugin. In fact, no image is displayed at all inside the e-book, just the link.
Am I missing something?
Thank you!
Chris

[turnermm]

You can create an image map and display it if you create it directly using the html tags. Here is an image map that works:

====== Image Map ======

<img src="http://192.168.0.142/devel/_media/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="javascript:alert('sun')">
  <area shape="circle" coords="90,58,3" alt="Mercury" href="javascript:alert('merc')">
  <area shape="circle" coords="124,58,8" alt="Venus" href="javascript:alert('venus')">
</map>
</html>

Here is the image:

Here is the e-book (you have to unzip it):
image_map.zip

Adapted from https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_areamap

[chlarsen]

Thanks a lot, Myron, let me try! Stay well.

[chlarsen]

Dear Myron,
I tried on both my Linux laptop as well as Android, using eBookReader, Book Reader, Cool Reader and KOReader, and have no luck both with your sample file as well as my oeuvres. At last THAT is consistent :-/.
Which ebook reader do you use?
Chris

[turnermm]

I use Calibre, which runs on Windows, MacOS, and Linux. I've been using this for years:
https://calibre-ebook.com/download

Another, just for MacOS and Windows is Sigil:
https://code.google.com/archive/p/sigil/downloads
Sigil is an epub editor and will validate and automate corrections.
Sigil and Calibre are the best available.

I'm attaching a version of the image_map.epub that has been corrected by Sigil. It may make a difference to your ebook readers. For instance, before the Sigil corrections, the Firefox ebook extension could not read the image_map file. Now it can but it doesn't respond to mouse clicks, which means it's not up to reading image maps.

A relatively new reader for Windows is:
https://icecreamapps.com/Ebook-Reader/
It too can read image_map.epub and respond to the mouse clicks.

I can't speak about commercial products, Amazon etc.

image_map_sigil.zip

[chlarsen]

No graphic is showing with the corrected ebook inside image_map_sigil.zip.
Seems I am missing something stupid here: In my case, as soon as there is any image map, the graphic is not shown.

[turnermm]

You'll have to forgive me for a clumsy error. The url for the image was to my local machine. The following version contains both the image and the corrected html.
img-map..zip

For the image map to work in dokuwiki, you have to use the address of the image in your html markup as seen in the above image map; code:
<img src="http://192.168.0.142/devel/_media/planets.gif"
But for the ebook, the image must be included in the ebook itself and the address must be to the ebook's Image directory:
<img src="../Images/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap"/>
I will try to work out something to handle this in the plugin. But in the meantime, this means fiddling with the ebook itself.

[chlarsen]

Thank you, this one was displayed, though I did not see (possibly missed) any image maps.

[turnermm]

Thank you, this one was displayed, though I did not (possibly missed) any image maps

I don't follow. What was displayed?

[chlarsen]

Sorry, Myron, I meant: The last version could actually been display as ebook (with contents and graphics), using any of my available e-book readers. However, the image map did not work. (All the previous versions did show an empty page, when opening the ebook.)

[turnermm]

I just finished installing Calibre on an Ubuntu instance and everything works -- the map image is displayed and when clicked it opens a pop-up with the name of the area clicked. Your problem is not with the epub book but with your epub readers which can't handle image maps. Many of these readers use the Readium ebook engine and Readium does not handle image maps.

[chlarsen]

Dear Myron,
I am working on this one:

For the image map to work in dokuwiki, you have to use the address of the image in your html markup as seen in the above image map; code:
<img src="http://192.168.0.142/devel/_media/planets.gif"
But for the ebook, the image must be included in the ebook itself and the address must be to the ebook's Image directory:

I will try to work out something to handle this in the plugin. But in the meantime, this means fiddling with the ebook itself.
This means that in an epub-format e-book all imagery gas to sit in the ../Images folder, right? Is this hard-coded? If so, what about sticking all graphical elements of the respective DokuWiki instance into ../images? Does epub disregard capitalisation, because DokuWiki will always call it "images", not "Images"?
If the above works, we could possible create an epub format, where ImageMaps do work out of the box...
Thoughts? Thank you!

[turnermm]

I am working on this. And

all graphical elements of the respective DokuWiki instance into ../images

That is the way it already works.

[chlarsen]

Thanks a lot, Myron, let me check it out..

[turnermm]

?

[chlarsen]

Here is what I get upon epub conversion (extracted from the ebook), after moving all graphical elements to the images namespace. The first image is without any image mapping and shows up. The second, created by the image mapping plugin, does not show any graphics, but working text links. The third occurrence, created by using tags from within DokuWiki does not produce any image, nor any links.

<div class="figure" id="rapid_response_team_-_composition">
<img src="../Images/test_sierra_leone_rrt_sops_images_rapid_response_team_-_composition.png"  width="600"  alt="../Images/test_sierra_leone_rrt_sops_images_rapid_response_team_-_composition.png" class="media" />
<div class="caption"><span class="captionno" title="rapid_response_team_-_composition">Figure 5:</span> <span class="captiontext">Composition of the core and expanded rapid response team</span></div>
</div><div class="figure" id="rapid_response_team_-_composition">

<p>
<img src="https://www.test.com/dokuwiki/lib/exe/fetch.php/test:sierra_leone:rrt_sops:images:rapid_response_team_-_composition.png?w=600&amp;tok=d5a5c7" class="media imap" usemap="#rapid_response_team_-_composition.png" title=" " alt=" " width="600" />
</p>
<map name="rapid_response_team_-_composition.png" id="rapid_response_team_-_composition.png">
<area href="https://www.test.com/dokuwiki/doku.php/test:sierra_leone:rrt_sops:rrt_manual:start#team_leader" title="Team Leader" alt="Team Leader" shape="circle" coords="296,299,49"/><area href="https://www.test.com/dokuwiki/doku.php/test:sierra_leone:rrt_sops:rrt_manual:start#medical_superintendent_or_community_health_officer_in-charge" title="Medical Superintendent or Community Health Officer In-Charge" alt="Medical Superintendent or Community Health Officer In-Charge" shape="circle" coords="429,305,57"/><area href="https://www.test.com/dokuwiki/doku.php/test:sierra_leone:rrt_sops:rrt_manual:start#district_livestock_and_veterinary_officer" title="District Livestock and Veterinary Officer" alt="District Livestock and Veterinary Officer" shape="circle" coords="380,412,51"/><area href="https://www.test.com/dokuwiki/doku.php/test:sierra_leone:rrt_sops:rrt_manual:start#district_health_superintendent" title="District Health Superintendent" alt="District Health Superintendent" shape="circle" coords="254,432,51"/><area href="https://www.test.com/dokuwiki/doku.php/test:sierra_leone:rrt_sops:rrt_manual:start#district_surveillance_officer" title="District Surveillance Officer" alt="District Surveillance Officer" shape="circle" coords="183,346,50"/><area href="https://www.test.com/dokuwiki/doku.php/test:sierra_leone:rrt_sops:rrt_manual:start#health_promotion_communication_or_social_mobilisation_officer" title="Health Promotion, Communication or Social Mobilisation Officer" alt="Health Promotion, Communication or Social Mobilisation Officer" shape="circle" coords="181,246,46"/><area href="https://www.test.com/dokuwiki/doku.php/test:sierra_leone:rrt_sops:rrt_manual:start#district_logistics_or_finance_officer" title="District Logistics or Finance Officer" alt="District Logistics or Finance Officer" shape="circle" coords="269,152,42"/><area href="https://www.test.com/dokuwiki/doku.php/test:sierra_leone:rrt_sops:rrt_manual:start#laboratory_superintendent" title="Laboratory Superintendent" alt="Laboratory Superintendent" shape="circle" coords="384,177,42"/><area href="https://www.test.com/dokuwiki/doku.php/test:sierra_leone:rrt_sops:rrt_manual:start#central_medical_stores_officer" title="Central Medical Stores Officer" alt="Central Medical Stores Officer" shape="circle" coords="431,85,44"/><area href="https://www.test.com/dokuwiki/doku.php/test:sierra_leone:rrt_sops:rrt_manual:start#toxicologist" title="Toxicologist" alt="Toxicologist" shape="circle" coords="502,169,41"/><area href="https://www.test.com/dokuwiki/doku.php/test:sierra_leone:rrt_sops:rrt_manual:start#infection_prevention_and_control_expert" title="Infection, Prevention and Control Expert" alt="Infection, Prevention and Control Expert" shape="circle" coords="542,272,49"/><area href="https://www.test.com/dokuwiki/doku.php/test:sierra_leone:rrt_sops:rrt_manual:start#entomologist" title="Entomologist" alt="Entomologist" shape="circle" coords="529,371,46"/><area href="https://www.test.com/dokuwiki/doku.php/test:sierra_leone:rrt_sops:rrt_manual:start#pharmacist" title="Pharmacist" alt="Pharmacist" shape="circle" coords="486,460,42"/><area href="https://www.test.com/dokuwiki/doku.php/test:sierra_leone:rrt_sops:rrt_manual:start#food_safety_specialist" title="Food Safety Specialist" alt="Food Safety Specialist" shape="circle" coords="406,514,47"/><area href="https://www.test.com/dokuwiki/doku.php/test:sierra_leone:rrt_sops:rrt_manual:start#environmental_protection_agency_officer" title="Environmental Protection Agency Officer" alt="Environmental Protection Agency Officer" shape="circle" coords="308,540,48"/><area href="https://www.test.com/dokuwiki/doku.php/test:sierra_leone:rrt_sops:rrt_manual:start#office_of_national_security" title="Office of National Security" alt="Office of National Security" shape="circle" coords="207,519,45"/><area href="https://www.test.com/dokuwiki/doku.php/test:sierra_leone:rrt_sops:rrt_manual:start#psychosocial_support" title="Psychosocial Support" alt="Psychosocial Support" shape="circle" coords="118,460,38"/><area href="https://www.test.com/dokuwiki/doku.php/test:sierra_leone:rrt_sops:rrt_manual:start#health_information_data_manager" title="Health Information Data Manager" alt="Health Information Data Manager" shape="circle" coords="77,378,41"/><area href="https://www.test.com/dokuwiki/doku.php/test:sierra_leone:rrt_sops:rrt_manual:start#risk_communication_specialist" title="Risk Communication Specialist" alt="Risk Communication Specialist" shape="circle" coords="58,270,47"/><area href="https://www.test.com/dokuwiki/doku.php/test:sierra_leone:rrt_sops:rrt_manual:start#anthropologist" title="Anthropologist" alt="Anthropologist" shape="circle" coords="84,170,42"/><area href="https://www.test.com/dokuwiki/doku.php/test:sierra_leone:rrt_sops:rrt_manual:start#local_council" title="Local Council" alt="Local Council" shape="circle" coords="183,84,44"/>
<div class="imapcontent">
<p>
<a href="test_sierra_leone_rrt_sops_rrt_manual_start.html#team_leader" class="wikilink1" title="test:sierra_leone:rrt_sops:rrt_manual:start">Team Leader</a>
<a href="test_sierra_leone_rrt_sops_rrt_manual_start.html#medical_superintendent_or_community_health_officer_in-charge" class="wikilink1" title="test:sierra_leone:rrt_sops:rrt_manual:start">Medical Superintendent or Community Health Officer In-Charge</a>
<a href="test_sierra_leone_rrt_sops_rrt_manual_start.html#district_livestock_and_veterinary_officer" class="wikilink1" title="test:sierra_leone:rrt_sops:rrt_manual:start">District Livestock and Veterinary Officer</a>
<a href="test_sierra_leone_rrt_sops_rrt_manual_start.html#district_health_superintendent" class="wikilink1" title="test:sierra_leone:rrt_sops:rrt_manual:start">District Health Superintendent</a>
<a href="test_sierra_leone_rrt_sops_rrt_manual_start.html#district_surveillance_officer" class="wikilink1" title="test:sierra_leone:rrt_sops:rrt_manual:start">District Surveillance Officer</a>
<a href="test_sierra_leone_rrt_sops_rrt_manual_start.html#health_promotion_communication_or_social_mobilisation_officer" class="wikilink1" title="test:sierra_leone:rrt_sops:rrt_manual:start">Health Promotion, Communication or Social Mobilisation Officer</a>
<a href="test_sierra_leone_rrt_sops_rrt_manual_start.html#district_logistics_or_finance_officer" class="wikilink1" title="test:sierra_leone:rrt_sops:rrt_manual:start">District Logistics or Finance Officer</a>
<a href="test_sierra_leone_rrt_sops_rrt_manual_start.html#laboratory_superintendent" class="wikilink1" title="test:sierra_leone:rrt_sops:rrt_manual:start">Laboratory Superintendent</a>
<a href="test_sierra_leone_rrt_sops_rrt_manual_start.html#central_medical_stores_officer" class="wikilink1" title="test:sierra_leone:rrt_sops:rrt_manual:start">Central Medical Stores Officer</a>
<a href="test_sierra_leone_rrt_sops_rrt_manual_start.html#toxicologist" class="wikilink1" title="test:sierra_leone:rrt_sops:rrt_manual:start">Toxicologist</a>
<a href="test_sierra_leone_rrt_sops_rrt_manual_start.html#infection_prevention_and_control_expert" class="wikilink1" title="test:sierra_leone:rrt_sops:rrt_manual:start">Infection, Prevention and Control Expert</a>
<a href="test_sierra_leone_rrt_sops_rrt_manual_start.html#entomologist" class="wikilink1" title="test:sierra_leone:rrt_sops:rrt_manual:start">Entomologist</a>
<a href="test_sierra_leone_rrt_sops_rrt_manual_start.html#pharmacist" class="wikilink1" title="test:sierra_leone:rrt_sops:rrt_manual:start">Pharmacist</a>
<a href="test_sierra_leone_rrt_sops_rrt_manual_start.html#food_safety_specialist" class="wikilink1" title="test:sierra_leone:rrt_sops:rrt_manual:start">Food Safety Specialist</a>
<a href="test_sierra_leone_rrt_sops_rrt_manual_start.html#environmental_protection_agency_officer" class="wikilink1" title="test:sierra_leone:rrt_sops:rrt_manual:start">Environmental Protection Agency Officer</a>
<a href="test_sierra_leone_rrt_sops_rrt_manual_start.html#office_of_national_security" class="wikilink1" title="test:sierra_leone:rrt_sops:rrt_manual:start">Office of National Security</a>
<a href="test_sierra_leone_rrt_sops_rrt_manual_start.html#psychosocial_support" class="wikilink1" title="test:sierra_leone:rrt_sops:rrt_manual:start">Psychosocial Support</a>
<a href="test_sierra_leone_rrt_sops_rrt_manual_start.html#health_information_data_manager" class="wikilink1" title="test:sierra_leone:rrt_sops:rrt_manual:start">Health Information Data Manager</a>
<a href="test_sierra_leone_rrt_sops_rrt_manual_start.html#risk_communication_specialist" class="wikilink1" title="test:sierra_leone:rrt_sops:rrt_manual:start">Risk Communication Specialist</a>
<a href="test_sierra_leone_rrt_sops_rrt_manual_start.html#anthropologist" class="wikilink1" title="test:sierra_leone:rrt_sops:rrt_manual:start">Anthropologist</a>
<a href="test_sierra_leone_rrt_sops_rrt_manual_start.html#local_council" class="wikilink1" title="test:sierra_leone:rrt_sops:rrt_manual:start">Local Council</a>
</p>
</div>
</map>

<p>
<img src="https://www.test.com/dokuwiki/lib/exe/fetch.php/test:sierra_leone:rrt_sops:images:rapid_response_team_-_composition.png?w=600&tok=d5a5c7" alt="Rapid Response Team Composition" class="media" usemap="#rapid_response_team_-_composition">
<map name="rapid_response_team_-_composition">
<area shape="circle" coords="296,299,49" alt="Team Leader" href="https://www.test.com/dokuwiki/doku.php/test:sierra_leone:rrt_sops:rrt_manual:start#team_leader"/>
</map>
</p>

So, essentially, even after renaming the namespace to "images", no luck yet.

[turnermm]

Patience.

[chlarsen]

No worries, Myron. I truly appreciate your kind help, and did not intend to push, but just wanted to provide any (hopefully useful?) debugging information. Have a great weekend.

[turnermm]

Test this using the imagemapping plugin for creating your image maps:
https://github.com/turnermm/epub/archive/imap.zip
Any of the map's internal links have to have the referenced pages loaded into the ebook in the normal way.

[turnermm]

Sample Image Map.zip

[chlarsen]

Dear Myron,
Thank you so much for your kind help and patience.
Here is what I did: I manually installed the updated epub plugin you attached above, restarted the entire DokuWiki instance, deleted caches ,etc.
I then created a new epub export of my document in question, but also tried your sample e-book using calibre and other e-book readers, all FLOSS, on both Linux and Android.
The image still fails to load, even though it sits in ../images (relative to the page), and the links are showing underneath, like before, correctly linking to subheadings inside the very page.
The same applies to your sample e-book.
Anything I am missing?
Chris

[turnermm]

2019_september_9_10-51-08.epub.zip
Try the above. Do not unzip. Just remove the .zip extension (epubs are in fact zip files). Pixel-relations change somewhat when zipping up an epub for extraction. For your own ebooks, use the imagemapping plugin. If the above epub doesn't work in your calibre I have no solution for you. I have tested on an ubuntu desktop and had no issues.

[chlarsen]

And now she works... your sample file. Great! I will try this on my own stuff asap.
Thank you so much!

[turnermm]

Glad to see it works. I've just uploaded a fix to the imap branch and now you may find that it works int some of your other editors.

[chlarsen]

While the above links work on your example, there is no such luck with data created from within DokuWiki using the ImageMap plugin.
The image with the mapping refuses to show, even though everything works from within the browser. Links are shown and link correctly to the headings inside the same epub document.
The image is in .:images. It seems that the image is quite simply not found; my Calibre Viewer Inspect command shows an empty src entry.

<img src="../" class="media imap" usemap="#composition_of_the_core_and_expanded_rapid_response_team" title="Composition of the core and expanded rapid response team" alt="Composition of the core and expanded rapid response team" width="600" calibre_f3fa75ca98eb4413a4ee413f20f60226="224" style="-webkit-column-break-inside: avoid; max-width: 499px;">

What is there to be done?
Thank you for your kind advice!
Chris

[turnermm]

epub.zip

This zipfile contains two epubs. One with only local links and one with both local and external. If there is something particular to your wiki which conflicts with the epub plugin in some way, there's noting I can do about it unless you identify the source of your problem.

If the image map image is not showing up, then perhaps you haven't included it in your epub. It won't be included by the imagemapping plugin. You have to explcitly included it in your book, as is shown in the wiki file I've included, where it is accessed in the wiki document epub:imap_local.