[oXygen-user] imagemap increases the size of the image in the DITA responsive webhelp transformation

Thu Dec 14 07:54:49 CST 2017

Hello,

This behavior is caused by the fact that the imagemaps are not 
responsive in the generated output.
To avoid this you could use a jQuery plugin that makes the imagemaps 
responsive. You can find such a plugin here: 
https://github.com/stowball/jQuery-rwdImageMaps

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:
<head>
     <script 
src="${oxygen-webhelp-output-dir}/jquery.rwdImageMaps.min.js" />
     <script>
         $(document).ready(function(e) {
             $('img[usemap]').rwdImageMaps();
         });
     </script>
     <style>
     img[usemap] {
         max-width: 100%;
     }
     </style>
</head>

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.

More information can be found here:
- 
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/copy_resources.html
- 
https://www.oxygenxml.com/doc/versions/19.1/ug-editor/topics/wh-add-custom-html.html

Regards,
Bogdan

Bogdan Cercelaru
oXygen XML Editor and Author Support

Tel: +1-650-352-1250
Fax: +40-251-461482
support at oxygenxml.com
http://www.oxygenxml.com

On 12/13/2017 1:16 PM, Yves Barbion wrote:
> Hi group
>
> I'm using oXygen XML Author 19 and the responsive webhelp 
> transformation, similar to this one:
>
> https://www.oxygenxml.com/doc/versions/19.1/ug-author/topics/create-new-project.html 
> <https://www.oxygenxml.com/doc/versions/19.1/ug-author/topics/create-new-project.html>
>
> The output looks nice but I when I use an imagemap,//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.
>
> Is anyone else seeing this? Any way to avoid this?
>
> Cheers
>
> Yves
>
>
>
>
> _______________________________________________
> oXygen-user mailing list
> oXygen-user at oxygenxml.com
> https://www.oxygenxml.com/mailman/listinfo/oxygen-user

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://www.oxygenxml.com/pipermail/oxygen-user/attachments/20171214/63239d89/attachment.html>