Page 1 of 1
CSS for Imagemap
Posted: Mon Feb 08, 2016 11:39 pm
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
Re: CSS for Imagemap
Posted: Tue Feb 09, 2016 10:50 am
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
Re: CSS for Imagemap
Posted: Wed Jun 15, 2016 9:17 pm
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]
Re: CSS for Imagemap
Posted: Wed Jun 15, 2016 9:18 pm
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"
Re: CSS for Imagemap
Posted: Thu Jun 16, 2016 3:12 pm
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
Re: CSS for Imagemap
Posted: Thu Jun 16, 2016 5:31 pm
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>
Re: CSS for Imagemap
Posted: Fri Jun 17, 2016 12:50 pm
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
Re: CSS for Imagemap
Posted: Fri Jun 17, 2016 2:41 pm
by dgallo
I am using classic web help for 17.1.
Re: CSS for Imagemap
Posted: Fri Jun 17, 2016 4:24 pm
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
Re: CSS for Imagemap
Posted: Fri Jun 17, 2016 5:41 pm
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
Re: CSS for Imagemap
Posted: Tue Jun 21, 2016 12:30 pm
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
Re: CSS for Imagemap
Posted: Wed Sep 28, 2016 8:36 pm
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
Re: CSS for Imagemap
Posted: Thu Sep 29, 2016 9:36 am
by alin
The WebHelp output files are already referencing a newer version of JQuery: jquery-1.8.2.min.js.