View Full Version : Image mapping in an epub


gunnlau2
09-05-2012, 05:02 PM
Just looking for some advice or sample coding about how to have and image with specific corodinates link to multiple different pages in the epub. I know how to do each seperately but when itry to do both i get errors. I'm currently using InDesign to lay the epub out and i will export and edit the code with dreamweaver. any tips are appreciated.

Doitsu
09-05-2012, 05:16 PM
You'll have to use an imagemap (http://www.w3.org/community/webed/wiki/HTML/Elements/map). However, AFAIK, imagemaps are only supported by Webkit based ebook readers such as iBooks.

gunnlau2
09-06-2012, 03:17 PM
Thanks, I can get the Image Map to work on it's own and using IE but i try to view it using iBooks and the links do nothing. it recognizes taht there are links but they don't go anywhere. I'm thinking that i just have the code screwed up.

this is a sample of what i have:

<img width="252" height="169" src="images/Departments_Image_Map_f_fmt.png" alt="Departments_Image_Map_fmt.png" usemap="#shapes">

<map name="shapes">
<area shape="rect" coords="35,95,97,123" href="sales.html" />
</map>
</img>

Any ideas? i have the "sales.html" file in the OBEP folder... just not sure what is wrong??

Jellby
09-07-2012, 04:32 AM
I have no idea about iBooks, but I'd say the <map> should be outside the <img> tag.

Doitsu
09-07-2012, 05:37 AM
Any ideas? i have the "sales.html" file in the OBEP folder... just not sure what is wrong??

I played with image maps some time ago and had some problems with the standard example that almost every web site lists. For some reason epubcheck didn't like the pound sign (#) in usemap="#shapes", which most likely is a bug. Did your epub pass epubcheck?

Anyway, after removing the pound sign my test ePub passed epubcheck and worked in Readium, but not in ADE.

Jellby
09-07-2012, 06:44 AM
Not according to the standard example posted on the W3C web site (http://www.w3.org/community/webed/wiki/HTML/Elements/map) and pretty much everywhere else.

Not what? In that example it's outside the <img>, as I said it should (but, since it's HTML and not XHTML, the <img> has no self-closing mark).

I played with image maps some time ago and had some problems with the standard example that almost every web site lists. For some reason epubcheck didn't like the pound sign (#) in usemap="#shapes", which most likely is a bug. Did your epub pass epubcheck?

There's a sample in the ePub 2.0.1 spec (http://idpf.org/epub/20/spec/OPS_2.0.1_draft.htm#Section2.6.3.1.2.2):

<img src="example.gif" usemap="map"
title="Example Map"
alt="A picture of an example." />
<map name="map">
<area href="example1.html"
alt="Link to the first example."
shape="rect" coords="0,0,118,28" />
<area href="example2.html"
alt="Link to the second example"
shape="rect" coords="184,0,276,28" />
</map>

It's as you say, it uses "name" (not "id", as in anchors), and no # sign in the "usemap".

Anyway, after removing the pound sign my test ePub passed epubcheck and worked in Readium, but not in ADE.

I haven't been able to make even simple image links (<a ...><img .../></a>) work in ADE.

Doitsu
09-07-2012, 06:57 AM
Not what? In that example it's outside the <img>, as I said it should (but, since it's HTML and not XHTML, the <img> has no self-closing mark).
You are of course right, for some reason I must've misread your comment as "the <map> shouldn't be outside". :o

I guess it's time to cut back on my coffee intake and to do less speed reading. :-)