CSS for Imagemap

<oXygen/> general issues.
dgallo
Posts: 80

CSS for Imagemap

Mon Feb 08, 2016 11:39 pm

I have been editing the CSS for the imagemap, so that when you hover over a specified area, it highlights.

I have tried to add the following style:

Code: Select all

.area:hover {border: 1px solid red;}


or

Code: Select all

area:hover {border: 1px solid red;}


Nothing seems to work. Do you know if this is possible? If so, what am I doing wrong.

Thanks,
Danielle
bogdan_cercelaru
Posts: 195

Re: CSS for Imagemap

Tue Feb 09, 2016 10:50 am

Hello Danielle,

Unfortunately, it is not possible to style the area elements of an image map using CSS.
As a workaround you might check out some jQuery plugins: Map Highlight and ImageMapster

Regards,
Bogdan
Bogdan Cercelaru
<oXygen/> XML Editor, Schema Editor and XSLT Editor/Debugger
http://www.oxygenxml.com
dgallo
Posts: 80

Re: CSS for Imagemap

Wed Jun 15, 2016 9:17 pm

Hello,

I was able to successfully figure out how to implement the the maphighlight plugin!

Although, this plugin will require two me to add a reference to two external .js files and a js function in the <head> element of the topics that use an imagemap.

[Codebox=]

<head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

<script type="text/javascript" src="jquery.maphilight.min.js"></script>

<script type="text/javascript">$(function() {
$('.map').maphilight();
});
</script>

</head>

[/Codebox]

Also, I need to change the img usemap class from .image to .map. How would I go about that?

[Codebox=]

<div class="fig imagemap" id="reference_lgx_bkx_gr__imagemap_vnj_5qy_gr">

<img usemap="#d1845e31" border="0" class="image" id="reference_lgx_bkx_gr__image_tzj_wqy_gr" src="workspace_vwt.png" />

<map name="d1845e31" id="d1845e31">

<area href="menubar_overview_r.html"

[/Codebox]
dgallo
Posts: 80

Re: CSS for Imagemap

Wed Jun 15, 2016 9:18 pm

Hello,

I was able to successfully figure out how to implement the the maphighlight plugin!

Although, this plugin will require two me to add a reference to two external .js files and a js function in the <head> element of the topics that use an imagemap.


Code: Select all

<head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

<script type="text/javascript" src="jquery.maphilight.min.js"></script>

<script type="text/javascript">$(function() {
$('.map').maphilight();
});
</script>

</head>



Also, I need to change the img usemap class from .image to .map. How would I go about that?


Code: Select all

<div class="fig imagemap" id="reference_lgx_bkx_gr__imagemap_vnj_5qy_gr">

<img usemap="#d1845e31" border="0" class="image" id="reference_lgx_bkx_gr__image_tzj_wqy_gr" src="workspace_vwt.png" />

<map name="d1845e31" id="d1845e31">

<area href="menubar_overview_r.html"
alin
Site Admin
Posts: 111

Re: CSS for Imagemap

Thu Jun 16, 2016 3:12 pm

Hello,

You can set the map class directly in the source topic using the outpuclass attribute on the corresponding image element.

For example:

Code: Select all

<image href="workspace_vwt.png" outputclass="map"/>


Regards,
Alin
Alin Balasa
Software Developer
<oXygen/> XML Editor
http://www.oxygenxml.com
dgallo
Posts: 80

Re: CSS for Imagemap

Thu Jun 16, 2016 5:31 pm

I have put the following scripts into the footer.html file (args.hdf) parameter so that the plugin will work, but it does not seem to be working. Am I putting this information in the wrong place? I know that it needs to be in the <head> of the html files.

Code: Select all

<head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

<script type="text/javascript" src="jquery.maphilight.min.js"></script>

<script type="text/javascript">$(function() {
$('.map').maphilight();
});
</script>

</head>
alin
Site Admin
Posts: 111

Re: CSS for Imagemap

Fri Jun 17, 2016 12:50 pm

Hello,

Are you using the WebHelp Classic or the WebHelp Responsive transformation? Also, please specify what version of oXygen are you using.

Regards,
Alin
Alin Balasa
Software Developer
<oXygen/> XML Editor
http://www.oxygenxml.com
dgallo
Posts: 80

Re: CSS for Imagemap

Fri Jun 17, 2016 2:41 pm

I am using classic web help for 17.1.
alin
Site Admin
Posts: 111

Re: CSS for Imagemap

Fri Jun 17, 2016 4:24 pm

Hello,

You should use the args.hdr parameter instead of args.hdf.
Note that the jquery.maphilight.min.js script file should be copied to the output folder. In your case it must be in the same folder as the html file that contains the image map.

Regards,
Alin
Alin Balasa
Software Developer
<oXygen/> XML Editor
http://www.oxygenxml.com
dgallo
Posts: 80

Re: CSS for Imagemap

Fri Jun 17, 2016 5:41 pm

That does not appear to be working.

Also, can I just keep the jquery.maphilight.min.js in \oxygen-webhelp\resources\js?

Danielle
alin
Site Admin
Posts: 111

Re: CSS for Imagemap

Tue Jun 21, 2016 12:30 pm

Hello,

That does not appear to be working.


Does the content of the XML file that you are referring trough the args.hdr get copied into the output html file?
Also note that the file should contain a valid XML.
The XML file should refer the jquery.maphilight.min.js using an absolute path. The best way is to store this js on your server and use that location's URL to refer it.

In case you are trying to refer it using a relative path, that path should be relative to the output html file that uses it. This might work if you have a single html file that contains an image map. In case you have multiple html files with image maps in different folders it is a high possibility that this configuration might not work, for the simple reason that the same js file's relative path cannot be reached from all the html files that refer it.

So here is an example of the args.hdr XML file that i used to make the highlight support work:

Code: Select all

<?xml version="1.0" encoding="UTF-8"?>
<div>
  <!-- You should replace the map highlight JS URL with the one stored on your server -->
  <script type="text/javascript" src="http://localhost:8080/image-map/jquery.maphilight.min.js"></script>
  <script type="text/javascript">$(function() {
    $('.map').maphilight();
    });
  </script>
</div>


You should replace the URL I've used with the corresponding one on your server. I used a server installed on my local machine for test purposes.

Regards,
Alin
Alin Balasa
Software Developer
<oXygen/> XML Editor
http://www.oxygenxml.com
dgallo
Posts: 80

Re: CSS for Imagemap

Wed Sep 28, 2016 8:36 pm

When you got this to work, did you also have to use:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

somewhere?

Thanks,
Danielle
alin
Site Admin
Posts: 111

Re: CSS for Imagemap

Thu Sep 29, 2016 9:36 am

The WebHelp output files are already referencing a newer version of JQuery: jquery-1.8.2.min.js.
Alin Balasa
Software Developer
<oXygen/> XML Editor
http://www.oxygenxml.com

Return to “Other Issues”

Who is online

Users browsing this forum: No registered users and 0 guests