CSS for Imagemap

Oxygen general issues.
dgallo
Posts: 90
Joined: Tue Mar 31, 2015 10:43 pm

CSS for Imagemap

Post by dgallo »

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: 222
Joined: Tue Jul 01, 2014 11:48 am

Re: CSS for Imagemap

Post by bogdan_cercelaru »

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: 90
Joined: Tue Mar 31, 2015 10:43 pm

Re: CSS for Imagemap

Post by dgallo »

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/jq ... "></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: 90
Joined: Tue Mar 31, 2015 10:43 pm

Re: CSS for Imagemap

Post by dgallo »

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: 268
Joined: Thu Dec 24, 2009 11:21 am

Re: CSS for Imagemap

Post by alin »

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: 90
Joined: Tue Mar 31, 2015 10:43 pm

Re: CSS for Imagemap

Post by dgallo »

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: 268
Joined: Thu Dec 24, 2009 11:21 am

Re: CSS for Imagemap

Post by alin »

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: 90
Joined: Tue Mar 31, 2015 10:43 pm

Re: CSS for Imagemap

Post by dgallo »

I am using classic web help for 17.1.
alin
Site Admin
Posts: 268
Joined: Thu Dec 24, 2009 11:21 am

Re: CSS for Imagemap

Post by alin »

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: 90
Joined: Tue Mar 31, 2015 10:43 pm

Re: CSS for Imagemap

Post by dgallo »

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: 268
Joined: Thu Dec 24, 2009 11:21 am

Re: CSS for Imagemap

Post by alin »

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: 90
Joined: Tue Mar 31, 2015 10:43 pm

Re: CSS for Imagemap

Post by dgallo »

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

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jq ... "></script>

somewhere?

Thanks,
Danielle
alin
Site Admin
Posts: 268
Joined: Thu Dec 24, 2009 11:21 am

Re: CSS for Imagemap

Post by alin »

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
Post Reply