Skip to main content
ROBOPM
ROBOPM
Inspiring
September 26, 2017
Answered

Coding CSS Cursor Property does not work in Rh(11) Preview Topic pane or CHM browser

  • September 26, 2017
  • 1 reply
  • 2400 views

Hello all,

Problem Description: When using CSS cursor Property (Controls what the mouse cursor will look like when it is located over the element); the application (Rh) does not read the cursor Property when implemented in a HTML help page. When previewing using Rh Preview Topic pane or a compiled CHM browser, it does not respond (e.g. hovering over an image map section of an image). However, it does work in IE, Chrome, and Mozilla.

Steps to Reproduce: Paste the following code below into your Rh HTML page.

<style type="text/css">/*<![CDATA[*/

area {

cursor: help     ! important ;

}

/*]]>*/</style>

</head>

Actual Result: Hovering over an 'Image Map' section, the cursor does NOT change into a cursor help icon, rather than its default cursor pointer (when hovering over an image-map or hyperlink section).Using the CSS cursor Property code in CSS/HTML does NOT work in CHM browser relevant in the browsers (mentioned above) in which there is a mouse and cursor.

Expected Result: Hovering over an 'Image Map' section, the cursor changes into a cursor help icon, rather than its default cursor pointer (when hovering over an image-map or hyperlink section).Using the CSS cursor Property code in CSS/HTML works in CHM browser relevant in the browsers (mentioned above) in which there is a mouse and cursor.

Any Workarounds: Is this a bug? Alternatively, the rendering engine does not support certain CSS control what is displayed or not? I do not have any workarounds to provide the development team. Does your team have a workaround?

Submitted (09/29/2017) Bug Id: RH-961

Thank You!

~PM

PS - Hi Peter and Rick

This topic has been closed for replies.
Correct answer ROBOPM

It looks like an IE bug. I found an old post suggesting to use javascript to get IE working. Save this as an htm file outside robohelp to see (I just used a quick and dirty inline version as proof of concept):

<!doctype html>

<html>

<head>

<title>Testing css help cursor</title>

<style>

map area:hover {

cursor: help;

}

p:hover { cursor: help;}

</style>

</head>

<body>

<p>This is some text with a hover cursor to show that IE knows about the cursor code</p>

<h4>plain image map - no help cursor</h4>

<map name="primary">

  <area shape="circle" coords="75,75,75" href="left.html">

  <area shape="circle" coords="275,75,75" href="right.html">

</map>

<img usemap="#primary" src="http://placehold.it/350x150" alt="350 x 150 pic">

<h4>image map using javascript - help cursor on 350 text</h4>

<map name="secondary">

  <area shape="circle" coords="75,75,75" href="javascript:void(0);"

           onmouseover="document.getElementById('img_id').style.cursor='help';"

           onmouseout="document.getElementById('img_id').style.cursor='';">

  <area shape="circle" coords="275,75,75" href="right.html">

</map>

<img id="img_id" usemap="#secondary" src="http://placehold.it/350x150" alt="350 x 150 pic">

</body>

</html>

(example map code from: cursor - CSS | MDN  )


Hello Amebr, Rick, peter, and Jeff,

With the help of amber test code, and a programmer @ my work, I was successful (The help pointer appears on hover over an image map)! The Workaround (code inserted) is as follows:

<style type="text/css">/*<![CDATA[*/ /Nothing needs to be entered here.

/*]]>*/</style>

<p class="Fig_Center"><img id="mapImg" src="../image/process_flow_prepaid_type_decision.gif"

alt="image\process_flow_prepaid_type_decision.gif"

title="image\process_flow_prepaid_type_decision.gif"

usemap="#MAP618061052" width="349" height="456"

border="0" />

<map id="MAP618061052" name="MAP618061052">

<area shape="rect" coords="6, 211, 112, 253" <a="" style="color:blue" href="amortized_prepaid_set_up_process_flow.htm"

title="Click here to review the Amortized Prepaid Setup Process flow."

alt="" onmouseover="document.getElementById('mapImg').style.cursor='help'"

onmouseout="document.getElementById('mapImg').style.cursor=''" />

<area shape="rect" coords="241, 414, 344, 459" <a="" style="color:green"

</map> </p>

Thank you again for all of your time spent; Peter, it may be worth while documenting this workaround (of course, after your replication for accuracy  ).

Cheers!

~PM

1 reply

P
PMROBO
Known Participant
October 2, 2017

Note: If any Rh community members are unable to replicate what I did, please provide me your workaround. If not, please vote on Bug Id: RH-961

Jeff_Coatsworth
Community Expert
Jeff_CoatsworthCommunity Expert
Community Expert
October 2, 2017

Have you tried it with a copy of RH2017? It's *highly* unlikely they will fix this one in RH11...

P
PMROBO
Known Participant
October 2, 2017

Hi Jeff, I do not have a copy of Rh 2017, hence, why I entered this bug in my version 11. Does it work in your version Jeff? If not, please vote.

As for others reading this post and have Rh 2014 and 2017; if you're able to replicate this bug, please vote.

Thank You!

~PM

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices