CSS for Imagemap
Oxygen general issues.
CSS for Imagemap
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:
or
Nothing seems to work. Do you know if this is possible? If so, what am I doing wrong.
Thanks,
Danielle
I have tried to add the following style:
Code: Select all
.area:hover {border: 1px solid red;}
Code: Select all
area:hover {border: 1px solid red;}
Thanks,
Danielle
-
- 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
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
<oXygen/> XML Editor, Schema Editor and XSLT Editor/Debugger
http://www.oxygenxml.com
Re: CSS for Imagemap
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]
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
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.
Also, I need to change the img usemap class from .image to .map. How would I go about that?
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
Hello,
You can set the map class directly in the source topic using the outpuclass attribute on the corresponding image element.
For example:
Regards,
Alin
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"/>
Alin
Alin Balasa
Software Developer
<oXygen/> XML Editor
http://www.oxygenxml.com
Software Developer
<oXygen/> XML Editor
http://www.oxygenxml.com
Re: CSS for Imagemap
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
Hello,
Are you using the WebHelp Classic or the WebHelp Responsive transformation? Also, please specify what version of oXygen are you using.
Regards,
Alin
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
Software Developer
<oXygen/> XML Editor
http://www.oxygenxml.com
Re: CSS for Imagemap
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
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
Software Developer
<oXygen/> XML Editor
http://www.oxygenxml.com
Re: CSS for Imagemap
Hello,
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:
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
Does the content of the XML file that you are referring trough the args.hdr get copied into the output html file?That does not appear to be working.
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>
Regards,
Alin
Alin Balasa
Software Developer
<oXygen/> XML Editor
http://www.oxygenxml.com
Software Developer
<oXygen/> XML Editor
http://www.oxygenxml.com
Re: CSS for Imagemap
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
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jq ... "></script>
somewhere?
Thanks,
Danielle
Jump to
- Oxygen XML Editor/Author/Developer
- ↳ Feature Request
- ↳ Common Problems
- ↳ DITA (Editing and Publishing DITA Content)
- ↳ SDK-API, Frameworks - Document Types
- ↳ DocBook
- ↳ TEI
- ↳ XHTML
- ↳ Other Issues
- Oxygen XML Web Author
- ↳ Feature Request
- ↳ Common Problems
- Oxygen Content Fusion
- ↳ Feature Request
- ↳ Common Problems
- Oxygen JSON Editor
- ↳ Feature Request
- ↳ Common Problems
- Oxygen PDF Chemistry
- ↳ Feature Request
- ↳ Common Problems
- Oxygen Feedback
- ↳ Feature Request
- ↳ Common Problems
- Oxygen XML WebHelp
- ↳ Feature Request
- ↳ Common Problems
- XML
- ↳ General XML Questions
- ↳ XSLT and FOP
- ↳ XML Schemas
- ↳ XQuery
- NVDL
- ↳ General NVDL Issues
- ↳ oNVDL Related Issues
- XML Services Market
- ↳ Offer a Service