<html>
<head>
<title>Graphics tags</title>
<meta name="keywords" content="">
</head>

<body bgcolor=#113377 text=#000000 vlink=#551a8b alink=#00c0ff link=#0000ee>




















































<table width=100% border=0>
<tr>
  <td valign=top>
  <table width=100% cellpadding=5 cellspacing=0 border=0>
    <tr><td bgcolor="#ffffff" align=center>
       <img height=40 alt="" border=0 src="../../img/logga.gif" width=102>
    </td></tr>
    <tr><td valign=top>
      <img src=internal-roxen-unit width=1 height=3 alt="">
    </td></tr>
    <tr valign=top>
      <td bgcolor="#ffffff">




        <table cellpadding=0 cellspacing=0 border=0>
          
       <!--a1  Introduction manual.tmpl-->
    
            <tr><td><a href="../introduction/index.html"><img src="../../img/chapter.gif" border=0></a>&nbsp;</td>
	      <td><a href="../introduction/index.html">Introduction</a></td>
	    </tr>
    
          
       <!--a1  Publishing web pages manual.tmpl-->
    
            <tr><td><a href="../publishing/index.html"><img src="../../img/chapter.gif" border=0></a>&nbsp;</td>
	      <td><a href="../publishing/index.html">Publishing web pages</a></td>
	    </tr>
    
          
       <!--a1  RXML manual.tmpl-->
    
            <tr><td><a href="../rxml/index.html"><img border=0 src="../../img/chapter.gif"></a>&nbsp;</td>
	      <td><a href="../rxml/index.html">RXML</a></td>
	    </tr>
    
          
       <!--a1  Information tags manual.tmpl-->
    
            <tr><td><a href="../information/index.html"><img src="../../img/chapter.gif" border=0></a>&nbsp;</td>
	      <td><a href="../information/index.html">Information tags</a></td>
	    </tr>
    
          
       <!--a1  String tags manual.tmpl-->
    
            <tr><td><a href="../string/index.html"><img src="../../img/chapter.gif" border=0></a>&nbsp;</td>
	      <td><a href="../string/index.html">String tags</a></td>
	    </tr>
    
          
       <!--a1  Variable tags manual.tmpl-->
    
            <tr><td><a href="../variable/index.html"><img border=0 src="../../img/chapter.gif"></a>&nbsp;</td>
	      <td><a href="../variable/index.html">Variable tags</a></td>
	    </tr>
    
          
       <!--a1  URL tags manual.tmpl-->
    
            <tr><td><a href="../url/index.html"><img src="../../img/chapter.gif" border=0></a>&nbsp;</td>
	      <td><a href="../url/index.html">URL tags</a></td>
	    </tr>
    
          
       <!--a1  If tags manual.tmpl-->
    
            <tr><td><a href="../if/index.html"><img src="../../img/chapter.gif" border=0></a>&nbsp;</td>
	      <td><a href="../if/index.html">If tags</a></td>
	    </tr>
    
          
       <!--a1  Graphics tags manual.tmpl-->
    
            <tr><td><a href="index.html"><img border=0 src="../../img/chapter.gif"></a>&nbsp;</td>
	      <td><a href="index.html"><b>Graphics tags</b></a></td>
	    </tr>
    
          
	</table>
	
        <table cellpadding=0 cellspacing=0 border=0>
	  
      <!--b1  -->
    
	    <tr><td>&nbsp;&nbsp;<a href="gtext.html"><img border=0 src="../../img/page.gif"></a>&nbsp;</td>
	      <td><a href="gtext.html">&lt;gtext&gt;</a></td>
	    </tr>
    
	  
      <!--b1  -->
    
	    <tr><td>&nbsp;&nbsp;<a href="diagram.html"><img src="../../img/page.gif" border=0></a>&nbsp;</td>
	      <td><a href="diagram.html">&lt;diagram&gt;</a></td>
	    </tr>
    
	  
      <!--b1  -->
    
	    <tr><td>&nbsp;&nbsp;<a href="gclock.html"><img src="../../img/page.gif" border=0></a>&nbsp;</td>
	      <td><a href="gclock.html">&lt;gclock&gt;</a></td>
	    </tr>
    
	  
      <!--b1  -->
    
	    <tr><td>&nbsp;&nbsp;<a href="pimage.html"><img border=0 src="../../img/page.gif"></a>&nbsp;</td>
	      <td><a href="pimage.html">&lt;pimage&gt;</a></td>
	    </tr>
    
	  
      <!--b1  -->
    
	    <tr><td>&nbsp;&nbsp;<a href="imgs.html"><img src="../../img/page.gif" border=0></a>&nbsp;</td>
	      <td><a href="imgs.html">&lt;imgs&gt;</a></td>
	    </tr>
    
	  
      <!--b1  -->
    
	    <tr><td>&nbsp;&nbsp;<a href="config_tablist.html"><img src="../../img/page.gif" border=0></a>&nbsp;</td>
	      <td><a href="config_tablist.html">&lt;config_tablist&gt;</a></td>
	    </tr>
    
	  
        </table>

        <table cellpadding=0 cellspacing=0 border=0>
          
      <!--c1  -->
    
            <tr><td><a href="../database/index.html"><img border=0 src="../../img/chapter.gif"></a>&nbsp;</td>
	      <td><a href="../database/index.html">Database tags</a></td>
	    </tr>
    
          
      <!--c1  -->
    
            <tr><td><a href="../ldap/index.html"><img src="../../img/chapter.gif" border=0></a>&nbsp;</td>
	      <td><a href="../ldap/index.html">LDAP</a></td>
	    </tr>
    
          
      <!--c1  -->
    
            <tr><td><a href="../programming/index.html"><img src="../../img/chapter.gif" border=0></a>&nbsp;</td>
	      <td><a href="../programming/index.html">Programming tags</a></td>
	    </tr>
    
          
      <!--c1  -->
    
            <tr><td><a href="../ssi/index.html"><img border=0 src="../../img/chapter.gif"></a>&nbsp;</td>
	      <td><a href="../ssi/index.html">SSI tags</a></td>
	    </tr>
    
          
      <!--c1  -->
    
            <tr><td><a href="../image_maps/index.html"><img src="../../img/chapter.gif" border=0></a>&nbsp;</td>
	      <td><a href="../image_maps/index.html">Image maps</a></td>
	    </tr>
    
          
      <!--c1 intraseek -->
    
      <!--c2 intraseek -->
           
    
          
      <!--c1 logview -->
    
      <!--c2 logview -->
           
    
          
      <!--c1 platform -->
    
      <!--c2 platform -->
           
    
          
      <!--c1 platform -->
    
      <!--c2 platform -->
           
    
          
      <!--c1 platform -->
    
      <!--c2 platform -->
           
    
          
      <!--c1  -->
    
            <tr><td><a href="../supports/index.html"><img src="../../img/chapter.gif" border=0></a>&nbsp;</td>
	      <td><a href="../supports/index.html">Supports system</a></td>
	    </tr>
    
          
      <!--c1  -->
    
            <tr><td><a href="../security/index.html"><img src="../../img/chapter.gif" border=0></a>&nbsp;</td>
	      <td><a href="../security/index.html">Security</a></td>
	    </tr>
    
          
      <!--c1  -->
    
            <tr><td><a href="../appendix/index.html"><img border=0 src="../../img/chapter.gif"></a>&nbsp;</td>
	      <td><a href="../appendix/index.html">Appendix</a></td>
	    </tr>
    
          
	</table>

      </td>
    </tr>
    <tr><td height=100%>&nbsp;</td></tr>
  </table>
  </td>
  <td>
    <img src=internal-roxen-unit width=3 height=1 alt="">
  </td>

  <td valign=top>
    <table cellspacing=0 cellpadding=5 width=100% height=100% border=0>
    <tr>
      <td bgcolor="#ffffff">
       <b><font size=+2>Graphics tags</font></b>

	<p>Good looking graphics are an important part of the layout of web
pages. But creating graphics can also be very time consuming,
especially if it involves creating the same type of headings, only
with different text.

<p>Therefore, Challenger features graphic tags that create images.
They can be used to draw analog clocks and graphical headings as well
as diagrams.



<p><a name="File Formats">
<b><font size=+2>File Formats</font></b></a>
<br>

Some of the tags take images as attributes. For example, to use as
background. The images can be in GIF, JPEG, PNM or PNG format.



<p><a name="Color Attributes">
<b><font size=+2>Color Attributes</font></b></a>
<br>

Color attributes can be specified in one of the following ways:

<dl>

<dt><b>name</b><dd>


For example <i>black</i> or <i>darkred</i>.

<p>
<dt><b>#RGB value</b><dd>


The color is specified as a
hexadecimal-digits, <tt>#RRGGBB</tt>. For example, <i>#ffdead</i> or
<i>#00ff00</i>.

<p>
<dt><b>@HSV value</b><dd>


The color is specified with the syntax
<tt>@h,s,v</tt> where h is the hue specified as degrees (0 to 359), s
is the saturation specified as a percentage and v the value also
specified as a percentage. For example, <i>@150,70,70</i>.

<p>
<dt><b>%CMTK value</b><dd>


The color is specified with the syntax
<tt>%c,m,t,k</tt> where all the values are percentages. For example,
<i>%10,20,30,40</i>.
</dl>

The graphics tags are:

<dl>


<dt><b><a href=gtext.html>&lt;gtext&gt;</a></b><dd>

Renders a GIF image of the
contents.

<p>

<dt><b><a href=diagram.html>&lt;diagram&gt;</a></b><dd>

Draws draw pie,
bar, or line charts as well as graphs.

<p>

<dt><b><a href=gclock.html>&lt;gclock&gt;</a></b><dd>

Draws an analogue clock that
will always show the right time.

<p>

<dt><b><a href=pimage.html>&lt;pimage&gt;</a></b><dd>

A Pike tag optimized for
creating images or GIF animations.

<p>

<dt><b><a href=imgs.html>&lt;imgs&gt;</a></b><dd>

Works like an <tt>&lt;img&gt;</tt> tag
where the server automatically sets the width and height attributes.

<p>

<dt><b><a href=config_tablist.html>&lt;config_tablist&gt;</a></b><dd>

Generates a
list of tabs, like the one in the configuration interface.
</dl>


      </td>
    </tr>
    </table>
  </td>
</tr>
<tr>
</table>
</body>
</html>
