## page was renamed from DevCenter/Projects/DynamicGraphicResizing
## page was renamed from Dynamically Resizing Graphics
== Dynamically Resizing Graphics ==

This note demonstrates a method for implementing clickable in-place resizing of graphics in !WebWorks Help. You could use this method to implement thumbnails that toggle to full size and back again on the HTML page; the example here employs it to allow users to temporarily enlarge screenshots for improved legibility.

=== Why Have dynamically resizable graphics? ===

In using FrameMaker to author software user guides and help, we display most screen shots at a somewhat reduced size (125 DPI to 250 DPI, depending on the size of the graphic), to better fit a standard page (in PDF output) and to minimize required scrolling in a typically small help window (in HTML output). In FrameMaker, we use Object Properties to specify the desired DPI for display.
 
The reduced shots are usually perfectly legible in PDF, on screen and in printouts. In HTML, the layout of reduced shots is clear, but text and button labels (if not large and bold) are not. Whether we let ePublisher Pro process the full-size screenshot or whether we create a pre-shrunk version in a graphic tool and then import it full-size into HTML, browsers cannot display the reduced text legibly.
 
The technique described here allows the user to click on any screenshot to display it at its full size, in-place on the help page. A second click restores the image to its original inserted size. You can implement this capability by modifying the XSL transform that ePublisher uses to generate image tags in its !WebWorks Help output.

=== What the Output Looks like ===

Click [[http://msapps.webworks.com/Downloads/Adam/resize/resize.html|here]] for an example.  The referenced [[attachment:resize.html|HTML file]] and [[attachment:Dashboard-Executive.png|image]] are attached to this article.  Note that there is hover text (tool-tip text) that informs the user that the image can be resized.

=== What the Generated Display Code Looks Like ===

In default !WebWorks Help 5, an image imported into a FrameMaker document, anchored to its own paragraph and explicitly sized, is converted to HTML similar to the following (carriage returns added for readability):

{{{
<div id="727345" class="Anchor">
<img id="727363" class="Default" src="images/login_screen.png" width="349" height="139"
style="display: block; float: none; left: 0.0; text-align: center; top: 0.0;" />
</div>
}}}

In our version of !WebWorks Help modified to support resizing, the same imported image would result in the following HTML (carriage returns added for readability):

{{{
<div class="Anchor"><a name="727869">
<img id="727867" class="Default" src="images/login_screen.png" width="349" height="139"
style="display: block; float: none; left: 0.0; text-align: center; top: 0.0;"
alt="Click to enlarge" title="Click to enlarge"
onclick="javascript:document.getElementById('727867').style.display='none';
document.getElementById('727867a').style.display='block';" />
 
<img id="727867a" class="Default" src="images/login_screen.png" style="display: none; float: none;
left: 0.0; text-align: center; top: 0.0;"
alt="Click to reduce" title="Click to reduce"
onclick="javascript:document.getElementById('727867').style.display='block';document.getElementById('727867a').style.display='none';" /></a></div>
}}}

In this code, the first {{{img}}} element displays the graphic at reduced size, but includes a JavaScript {{{onclick}}} attribute that uses the document object's {{{getElementByID}}} method to hide the reduced graphic and display the full-size one. The second {{{img element}}} is active only when the enlarged graphic is being displayed; its {{{onclick}}} hides the full-size graphic and displays the reduced one.

=== To implement the Display Code ===

To generate this more complex code, you need to alter only the file {{{content.xsl}}}. In !WebWorks Help 5, the file is located at {{{WebWorks\ePublisher Pro\Formats\WebWorks Help 5.0}}}. (You should of course use format overrides or create a custom format so that you are not altering the original !WebWorks Help 5.0 format.)

In {{{content.xsl}}}, locate the section that generates the {{{IMG}}} tag and its attributes. It is in the {{{Frame-FullSize}}} XSL template, near the end of the file:
 
{{{
<xsl:template name="Frame-FullSize">
...
    <!-- Tag -->
...
<!-- Graphic element -->
...
    <!-- Generate D Links -->
...
</xsl:template>
}}}
 
Within the {{{Frame-FullSize}}} template, you will change parts of the {{{Graphic element}}} section--the stretch from just after the {{{Tag}}} section to just before the {{{Generate D Links}}} section.
 
The altered code is displayed below. Changed or added code sections are bolded. Note that this altered section is essentially two consecutive versions the of the original {{{Graphic element}}} section, each customized slightly so that together they generate the two {{{img}}} elements shown above. The principal changes are these:

 * Alteration of the {{{alt}}} attribute, and addition of a {{{title}}} attribute, to generate "Click to enlarge" and "Click to reduce" tool-tips for IE and Firefox, respectively. 

 * Generation of a unique ID for the expanded version of the graphic. The code for the second {{{img}}} tag adds the letter {{{a}}} to the end of the ID generated by ePublisher for the original (reduced) version of the graphic. (That unique ID is used in the {{{getElementByID}}} method.) 
 
 * Use of string manipulation to modify the {{{Style}}} attribute section in the second {{{img}}} tag. It changes {{{" display: block "}}} to {{{" display: none "}}}. This change is needed to prevent the reduced graphic from re-displaying when the expanded graphic is displayed. 
 
 * Addition of a JavaScript {{{onclick}}} attribute to each {{{img tag}}}, to hide the graphic in its current state and redraw it in its new state. 

'''{{{
     <!-- First Graphic element (unexpanded) -->
}}}'''
{{{
     <!--                 -->
    <xsl:element name="{$VarTag}" namespace="{$GlobalDefaultNamespace}">
     <!-- ID attribute -->
     <!--              -->
     <xsl:attribute name="id">
      <xsl:value-of select="$ParamFrame/@id" />
    </xsl:attribute>
 
     <!-- Class attribute -->
     <!--                 -->
     <xsl:attribute name="class">
      <xsl:value-of select="wwstring:CSSClassName($ParamFrame/@stylename)" />
     </xsl:attribute>
 
     <!-- Src attribute -->
     <!--               -->
     <xsl:attribute name="src">
      <xsl:value-of select="$VarSrc" />
     </xsl:attribute>
 
     <!-- Width attribute -->
     <!--                 -->
     <xsl:if test="$VarWidth &gt; 0">
      <xsl:attribute name="width">
       <xsl:value-of select="$VarWidth"/>
      </xsl:attribute>
     </xsl:if>
 
     <!-- Height attribute -->
     <!--                  -->
     <xsl:if test="$VarHeight &gt; 0">
      <xsl:attribute name="height">
       <xsl:value-of select="$VarHeight"/>
      </xsl:attribute>
     </xsl:if>
 
     <!-- Style attribute -->
     <!--                 -->
     <xsl:if test="string-length($VarInlineCSSProperties) &gt; 0">
      <xsl:attribute name="style">
       <xsl:value-of select="$VarInlineCSSProperties" />
      </xsl:attribute>
     </xsl:if>
}}}
'''{{{
 
     <!-- Alt attribute -->
     <!--               -->
     <xsl:choose>
      <xsl:when test="string-length($VarAltText) &gt; 0">
       <xsl:attribute name="alt">
        <xsl:value-of select="$VarAltText" />
       </xsl:attribute>
      </xsl:when>
      <xsl:otherwise>
       <xsl:attribute name="alt">
        <xsl:value-of select="'Click to enlarge'" />
       </xsl:attribute>
      </xsl:otherwise>
     </xsl:choose>
 
     <!-- Title attribute -->
     <!--               -->
       <xsl:attribute name="title">
        <xsl:value-of select="'Click to enlarge'" />
       </xsl:attribute>
 
 
     <!-- onclick Javascript attribute -->
     <!--                  -->
       <xsl:attribute name="onclick">
        <xsl:value-of select="'javascript:document.getElementById('" />&apos;<xsl:value-of select='$ParamFrame/@id' />&apos;).style.display='none';document.getElementById(&apos;<xsl:value-of select='$ParamFrame/@id' />a&apos;).style.display='block';</xsl:attribute>
}}}'''
{{{
 
     <!-- Longdesc attribute -->
     <!--                    -->
     <xsl:if test="string-length($VarLongDescription) &gt; 0">
      <xsl:attribute name="longdesc">
       <xsl:value-of select="$VarLongDescription" />
      </xsl:attribute>
     </xsl:if>
 
     <!-- Usemap attribute -->
     <!--                  -->
     <xsl:if test="string-length($VarUseMap) &gt; 0">
      <xsl:attribute name="usemap">
       <xsl:value-of select="$VarUseMap" />
      </xsl:attribute>
      <xsl:attribute name="border">
       <xsl:value-of select="'0'" />
      </xsl:attribute>
     </xsl:if>
    </xsl:element>
 
 
}}}
'''{{{
     <!-- Second Graphic element (expanded) -->
}}}'''
{{{
    <!--                 -->
    <xsl:element name="{$VarTag}" namespace="{$GlobalDefaultNamespace}">
     <!-- ID attribute -->
     <!--              -->
     <xsl:attribute name="id">
}}}
'''{{{
       <xsl:value-of select="$ParamFrame/@id" />a</xsl:attribute>
}}}'''
{{{
 
     <!-- Class attribute -->
     <!--                 -->
     <xsl:attribute name="class">
      <xsl:value-of select="wwstring:CSSClassName($ParamFrame/@stylename)" />
     </xsl:attribute>
 
     <!-- Src attribute -->
     <!--               -->
     <xsl:attribute name="src">
      <xsl:value-of select="$VarSrc" />
     </xsl:attribute>
 
}}}
'''{{{
      <!-- Style attribute: same as before except don't display it (assumes default display style is "block") -->
     <!--                 -->
     <xsl:if test="string-length($VarInlineCSSProperties) &gt; 0">
      <xsl:variable name="VarPrefix" select="substring-before($VarInlineCSSProperties, 'block')" />
      <xsl:variable name="VarSuffix" select="substring-after($VarInlineCSSProperties, 'block')" />
      <xsl:attribute name="style">
       <xsl:value-of select="concat($VarPrefix,'none',$VarSuffix)" />
      </xsl:attribute>
     </xsl:if>
 
 
     <!-- Alt attribute -->
     <!--               -->
     <xsl:choose>
      <xsl:when test="string-length($VarAltText) &gt; 0">
       <xsl:attribute name="alt">
        <xsl:value-of select="$VarAltText" />
       </xsl:attribute>
      </xsl:when>
      <xsl:otherwise>
       <xsl:attribute name="alt">
        <xsl:value-of select="'Click to reduce'" />
       </xsl:attribute>
      </xsl:otherwise>
     </xsl:choose>
 
     <!-- Title attribute -->
     <!--               -->
       <xsl:attribute name="title">
        <xsl:value-of select="'Click to reduce'" />
       </xsl:attribute>
 
 
     <!-- onclick Javascript attribute -->
     <!--                  -->
       <xsl:attribute name="onclick">
        <xsl:value-of select="'javascript:document.getElementById('" />&apos;<xsl:value-of select='$ParamFrame/@id' />&apos;).style.display='block';document.getElementById(&apos;<xsl:value-of select='$ParamFrame/@id' />a&apos;).style.display='none';</xsl:attribute>
}}}'''
{{{ 
     <!-- Longdesc attribute -->
     <!--                    -->
     <xsl:if test="string-length($VarLongDescription) &gt; 0">
      <xsl:attribute name="longdesc">
       <xsl:value-of select="$VarLongDescription" />
      </xsl:attribute>
     </xsl:if>
 
     <!-- Usemap attribute -->
     <!--                  -->
     <xsl:if test="string-length($VarUseMap) &gt; 0">
      <xsl:attribute name="usemap">
       <xsl:value-of select="$VarUseMap" />
      </xsl:attribute>
      <xsl:attribute name="border">
       <xsl:value-of select="'0'" />
      </xsl:attribute>
     </xsl:if>
    </xsl:element>
}}}

=== Making Only Certain Graphics Resizable ===

Because it may not make sense to have all graphics resizable (some graphics may be at full size already, and high-resolution images or line drawings may be too large if displayed at full size), you can add logic to {{{content.xsl}}} to ensure that only graphics of a given class ({{{Default}}} in the example shown here) will be made resizable, all others getting the normal handling of the unchanged {{{content.xsl}}}. (As explained in the !WebWorks documentation, you can specify a graphic element's class in FrameMaker by embedding a text frame with a particular GraphicStyle marker in the imported graphic's frame.)
 
The example below shows the XSL logic added to {{{content.xsl}}} to allow this discrimination based on graphic class. (Non-bold portions are the unchanged default content.xsl code before and after the changed sections; bolded portions are the added logic code.)

{{{
    ...
    <!-- Tag -->
    <!--     -->
    <xsl:variable name="VarTagProperty" select="$VarContextRule/wwproject:Properties/wwproject:Property[@Name = 'tag']/@Value" />
    <xsl:variable name="VarTag">
     <xsl:choose>
      <xsl:when test="string-length($VarTagProperty) &gt; 0">
       <xsl:value-of select="$VarTagProperty" />
      </xsl:when>
 
      <xsl:otherwise>
       <xsl:value-of select="'img'" />
      </xsl:otherwise>
     </xsl:choose>
    </xsl:variable>
 
 
}}}
'''{{{
    <!-- Generate the IMG tag or tags -->
    <!-- If class = "Default", use two tags to toggle image between reduced and full size -->
    <!-- Otherwise use standard WWH 5.0 processing (fixed size) -->
 
  <xsl:choose>
    <xsl:when test="(wwstring:CSSClassName($ParamFrame/@stylename) = 'Default')">
}}}'''
''{{{
       ***In here goes the altered graphic-element section that was presented above***
}}}''
'''{{{
 
   <xsl:otherwise>
 
}}}'''
''{{{
      ***In here goes the original unchanged graphic-element section from content.xsl ***
 
}}}''
'''{{{
   </xsl:otherwise>
  </xsl:choose>
}}}'''

An altered version of {{{content.xsl}}}, containing the changes noted here, is atached to this note ([[attachment:content.xsl]]). To customize it for your purposes, you might want to change the graphics class that it specifies as resizable, and you might want to change the {{{alt}}} or {{{title}}} text.

=== Acknowledgments ===

Originally contributed by DaveBice.  Thanks to Carla Ahlstrom of RSA Security for providing the original Dynamic HTML replacement code.

----

<<PageComment2>>