imagemap increases the size of the image in the DITA responsive webhelp transformation
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 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
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-... - https://www.oxygenxml.com/doc/versions/19.1/ug-editor/topics/copy_resources.... - https://www.oxygenxml.com/doc/versions/19.1/ug-editor/topics/wh-add-custom-h... Regards, Bogdan Bogdan Cercelaru oXygen XML Editor and Author Support Tel: +1-650-352-1250 Fax: +40-251-461482 support@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-proj... <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@oxygenxml.com https://www.oxygenxml.com/mailman/listinfo/oxygen-user
Wonderful! Thank you very much, multumesc, Bogdan! On 14 December 2017 at 14:54, Oxygen XML Editor Support (Bogdan Cercelaru) < support@oxygenxml.com> wrote:
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 <(650)%20352-1250> Fax: +40-251-461482 <+40%20251%20461%20482>support@oxygenxml.comhttp://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
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 listoXygen-user@oxygenxml.comhttps://www.oxygenxml.com/mailman/listinfo/oxygen-user
_______________________________________________ oXygen-user mailing list oXygen-user@oxygenxml.com https://www.oxygenxml.com/mailman/listinfo/oxygen-user
participants (2)
-
Oxygen XML Editor Support (Bogdan Cercelaru) -
Yves Barbion