<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
</head>
<body bgcolor="#FFFFFF" text="#000000">
Hello,<br>
<br>
This behavior is caused by the fact that the imagemaps are not
responsive in the generated output.<br>
To avoid this you could use a jQuery plugin that makes the imagemaps
responsive. You can find such a plugin here: <a
class="moz-txt-link-freetext"
href="https://github.com/stowball/jQuery-rwdImageMaps">https://github.com/stowball/jQuery-rwdImageMaps</a><br>
<br>
To include the plugin in WebHelp Responsive output you should create
a well-formed XML file with the following content and refer it using
the "webhelp.fragment.head" parameter from the transformation
scenario:<br>
<tt><head></tt><tt><br>
</tt><tt> <script
src="${oxygen-webhelp-output-dir}/jquery.rwdImageMaps.min.js"
/></tt><tt><br>
</tt><tt> <script></tt><tt><br>
</tt><tt> $(document).ready(function(e) {</tt><tt><br>
</tt><tt> $('img[usemap]').rwdImageMaps();</tt><tt><br>
</tt><tt> });</tt><tt><br>
</tt><tt> </script></tt><tt><br>
</tt><tt> <style></tt><tt><br>
</tt><tt> img[usemap] {</tt><tt><br>
</tt><tt> max-width: 100%;</tt><tt><br>
</tt><tt> }</tt><tt><br>
</tt><tt> </style></tt><tt><br>
</tt><tt></head></tt><br>
<br>
To have the "jquery.rwdImageMaps.min.js" file automatically copied
in the output, you should also set the "webhelp.custom.resources"
parameter from the transformation scenario to point to a directory
that contains this file. Note that all files and directories found
in that folder will be also copied in the output directory.<br>
<br>
More information can be found here:<br>
- <a class="moz-txt-link-freetext"
href="https://www.oxygenxml.com/doc/versions/19.1/ug-editor/topics/webhelp-plugin-additional-parameters.html">https://www.oxygenxml.com/doc/versions/19.1/ug-editor/topics/webhelp-plugin-additional-parameters.html</a><br>
- <a class="moz-txt-link-freetext"
href="https://www.oxygenxml.com/doc/versions/19.1/ug-editor/topics/copy_resources.html">https://www.oxygenxml.com/doc/versions/19.1/ug-editor/topics/copy_resources.html</a><br>
- <a class="moz-txt-link-freetext"
href="https://www.oxygenxml.com/doc/versions/19.1/ug-editor/topics/wh-add-custom-html.html">https://www.oxygenxml.com/doc/versions/19.1/ug-editor/topics/wh-add-custom-html.html</a><br>
<br>
Regards,<br>
Bogdan<br>
<pre class="moz-signature" cols="72">Bogdan Cercelaru
oXygen XML Editor and Author Support
Tel: +1-650-352-1250
Fax: +40-251-461482
<a class="moz-txt-link-abbreviated" href="mailto:support@oxygenxml.com">support@oxygenxml.com</a>
<a class="moz-txt-link-freetext" href="http://www.oxygenxml.com">http://www.oxygenxml.com</a></pre>
<div class="moz-cite-prefix">On 12/13/2017 1:16 PM, Yves Barbion
wrote:<br>
</div>
<blockquote
cite="mid:CAMa27Ewt4yihSTrGncisaLoXT4dzFWTQet8yjihd2HYuGLzm3w@mail.gmail.com"
type="cite">
<div dir="ltr">
<div class="gmail_default"
style="font-family:verdana,sans-serif">Hi group</div>
<div class="gmail_default"
style="font-family:verdana,sans-serif"><br>
</div>
<div class="gmail_default"
style="font-family:verdana,sans-serif">I'm using oXygen XML
Author 19 and the responsive webhelp transformation, similar
to this one:</div>
<div class="gmail_default"
style="font-family:verdana,sans-serif"><br>
</div>
<div class="gmail_default"
style="font-family:verdana,sans-serif"><a
moz-do-not-send="true"
href="https://www.oxygenxml.com/doc/versions/19.1/ug-author/topics/create-new-project.html"
target="_blank">https://www.oxygenxml.com/doc/<wbr>versions/19.1/ug-author/<wbr>topics/create-new-project.html</a><br>
</div>
<div class="gmail_default"
style="font-family:verdana,sans-serif"><br>
</div>
<div class="gmail_default"
style="font-family:verdana,sans-serif">The output looks nice
but I when I use an imagemap,<i> </i>I see that the image
becomes a lot larger in the output. The result is that the
navigation pane on the right overlaps part of the image.</div>
<div class="gmail_default"
style="font-family:verdana,sans-serif"><br>
</div>
<div class="gmail_default"
style="font-family:verdana,sans-serif">Is anyone else seeing
this? Any way to avoid this?</div>
<div class="gmail_default"
style="font-family:verdana,sans-serif"><br>
</div>
<div class="gmail_default"
style="font-family:verdana,sans-serif">Cheers</div>
<div class="gmail_default"
style="font-family:verdana,sans-serif"><br>
</div>
<div class="gmail_default"
style="font-family:verdana,sans-serif">Yves<br>
</div>
<div class="gmail_default"
style="font-family:verdana,sans-serif"><br>
</div>
<div class="gmail_default"
style="font-family:verdana,sans-serif"><br>
</div>
</div>
<br>
<fieldset class="mimeAttachmentHeader"></fieldset>
<br>
<pre wrap="">_______________________________________________
oXygen-user mailing list
<a class="moz-txt-link-abbreviated" href="mailto:oXygen-user@oxygenxml.com">oXygen-user@oxygenxml.com</a>
<a class="moz-txt-link-freetext" href="https://www.oxygenxml.com/mailman/listinfo/oxygen-user">https://www.oxygenxml.com/mailman/listinfo/oxygen-user</a>
</pre>
</blockquote>
<br>
</body>
</html>