Image mapping in an epub

[gunnlau2]

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]

You'll have to use an imagemap. However, AFAIK, imagemaps are only supported by Webkit based ebook readers such as iBooks.

[gunnlau2]

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]

I have no idea about iBooks, but I'd say the <map> should be outside the <img> tag.

[Doitsu]

Originally Posted by gunnlau2

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]

Originally Posted by Doitsu

Not according to the standard example posted on the W3C web site 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:

                <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]

Originally Posted by Jellby

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".

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