Swap Image onclick for Drop-Down Hotspot

[ttrujillo]

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:

<p><a class="dropspot" href="javascript:TextPopup(this)" id="a1"><img src="images/icons/bttn_moreHelp_up.jpg"
  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>
</div>
<?rh-script_start ?><script type="text/javascript" language="JavaScript1.2">//<![CDATA[
if( typeof( TextPopupInit ) != 'function' ) TextPopupInit = new Function();
TextPopupInit('a1', 'POPUP312575649');
//]]></script><?rh-script_end ?>

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!

Tricia

[Peter Grainge · Accepted solution]

See if the Twisties page on my site helps.

http://www.grainge.org/pages/authoring/twisty/twisty.htm

---

See www.grainge.org for RoboHelp and Authoring tips

@petergrainge

[ttrujillo]

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.