2 Replies Latest reply on Nov 11, 2011 9:35 AM by ttrujillo

    Swap Image onclick for Drop-Down Hotspot

    ttrujillo Level 1

      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