Hi,
I'd like to show hotspots without any shading or outlining, and to have a box appear when hovering, but no other effects.
I can't work out where the settings are, so a pointer would be appreciated.
Thanks
Pete
Hotspot style
Moderators: Alexander Halser, Tim Green
-
Tim Green
- Site Admin
- Posts: 23178
- Joined: Mon Jun 24, 2002 9:11 am
- Location: Bruehl, Germany
- Contact:
Re: Hotspot style
Hi Pete,
The CSS that formats the hotspots is included at the end of the CSS file for topic content. However, you shouldn't try to edit it there, because the file gets re-generated every time you publish. Instead, edit the skin you are using to publish and put the CSS you want to change in the <head> section of the HTML page template (Configuration > HTML Page Templates > Default). For it to work, you need to put it AFTER the line containing the <%STYLESHEET%> variable.
The standard code looks like this:
To have it without shading or transparency, just a box on hover, insert this version in your page template:
Note the <style> and </style> tags at the beginning and end. You don't need those if there is already a style block in the right position after the line containing the <%STYLESHEET%> variable. Then you can just add your code after any other code in that block.
I have just made a basic black/grey outline and a transparent background. You can add additional CSS attributes if you like, of course.
The CSS that formats the hotspots is included at the end of the CSS file for topic content. However, you shouldn't try to edit it there, because the file gets re-generated every time you publish. Instead, edit the skin you are using to publish and put the CSS you want to change in the <head> section of the HTML page template (Configuration > HTML Page Templates > Default). For it to work, you need to put it AFTER the line containing the <%STYLESHEET%> variable.
The standard code looks like this:
Code: Select all
/* CSS for responsive image maps */
.hmImageMap a.hmHotspotRect { display:block; position:absolute; border: 1px solid transparent; background:#000; opacity:0.01; filter:alpha(opacity=1) }
.hmImageMap a.hmHotspotEllipse { display:block; position:absolute; border-radius:50%; border: 1px solid transparent; background:#000; opacity:0.01; filter:alpha(opacity=1) }
.hmImageMap:hover a.hmHotspotRect {opacity:0.3; filter:alpha(opacity=30); }
.hmImageMap:hover a.hmHotspotEllipse { opacity:0.3; filter:alpha(opacity=30); }
a.hmHotspotRect:hover { border:1px solid #000; background:#FFF; opacity:0.3; filter:alpha(opacity=30) }
a.hmHotspotEllipse:hover { border:1px solid #000; background:#FFF; opacity:0.3; filter:alpha(opacity=30) }Code: Select all
<style type="text/css">
/* CSS for responsive image maps */
.hmImageMap a.hmHotspotRect { display:block; position:absolute; border: 1px solid #000000; background:transparent; opacity:0.01; filter:alpha(opacity=1) }
.hmImageMap a.hmHotspotEllipse { display:block; position:absolute; border-radius:50%; border: 1px solid #000000; background: transparent; opacity:0.01; filter:alpha(opacity=1) }
.hmImageMap:hover a.hmHotspotRect {opacity:0.3; filter:alpha(opacity=30); }
.hmImageMap:hover a.hmHotspotEllipse { opacity:0.3; filter:alpha(opacity=30); }
a.hmHotspotRect:hover { border: 1px solid #000000; opacity:0.3; filter:alpha(opacity=30) }
a.hmHotspotEllipse:hover { border: 1px solid #000000; opacity:0.3; filter:alpha(opacity=30) }
</style>I have just made a basic black/grey outline and a transparent background. You can add additional CSS attributes if you like, of course.
Regards,
Tim (EC Software Documentation & User Support)
Private support:
Please do not email or PM me with private support requests -- post to the forum directly.
Tim (EC Software Documentation & User Support)
Private support:
Please do not email or PM me with private support requests -- post to the forum directly.
-
Peter Muckle
- Posts: 101
- Joined: Fri Oct 18, 2019 9:33 pm
Re: Hotspot style
Perfect!
Thanks Tim
Cheers
Pete
Thanks Tim
Cheers
Pete