I'm using RoboHelp 8 to generate WebHelp output.
In a handful of help topics I've included a button image (bttn_moreHelp_up.jpg) as a drop-down hotspot. When the image is clicked, the drop-down text appears as expected. What I'd like to do is also swap the image when clicked (to bttn_moreHelp_down.jpg) and then change it back when clicked again. The images have twisty arrows to show expanded or collapsed.
Is there something I can add or tweak in the HTML to swap the image? Here's what the HTML currently looks like:
alt="" style="border: none;" width="132" height="21" border="0" /></a></p>
<div class="droptext" id="POPUP312575649" style="display: none;">
<p>Line 1 of text that appears in drop-down.</p>
<p>Line 2 of text that appears in drop-down. </p>
<p>Line 3 of text that appears in drop-down. </p>
if( typeof( TextPopupInit ) != 'function' ) TextPopupInit = new Function();
Note: I don't want to update the CSS for the drop-down hotspots because I don't want to change every drop-down instance in the project - just the handful that use the image.
Thanks in advance!
Thank you, Peter. I used the twisty2a.js file and followed the directions you outlined and it works great. I can use my button image for a drop-down hotspot and swap the entire image when clicked to indicate when it's expanded. And this method allows me to do this in only a select few spots so my other drop-down text links in the help project are unchanged.