Source code in QfSmartyOverlib.tpl

To see how this is used return to this tutorial index.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
     Quickform, Smarty and Overlib all at once. If you have not seen the previous examples, return to the index to do that first.

     Search for 'overlib' in this file to see how to invoke it.
     You just include the overlib javascript file, and then do onmouseover/onmouseout calls

     Copyright (c) 2005, 2009, Parliament Hill Computers ( Author: Alain D D Williams (
     You may used this file as the basis your own (or organisation's/company's) project (under whatever
     licence that you see fit), but may not claim ownership or copyright of the substantially unmodified file.
     This file is made available in the hope that it is useful, there is no warranty at all, use at your own risk.

     SCCS: @(#)QfSmartyOverlib.tpl	1.4 10/21/13 15:08:34
{* {popup_init src="/javascripts/overlib.js"}
   popup_init was removed as a default distributed plugin in Feb 2011 after Smarty 3.0.7
   The next 2 lines replace what it did.
  <div id="overDiv" style="position:absolute; visibility:hidden; z-index:'.$zindex.';"></div>
  <script type="text/javascript" language="JavaScript" src="/javascripts/overlib.js"></script>
  <title>Smarty template demonstration</title>
  <link rel="stylesheet" type="text/css" href="/DefaultStyle.css">

  <!-- Include overlib javascript here -->
  {if $FormData.javascript}


  <!-- A standard page header -->
  <div style='position : absolute;text-align: left;top:10px;'>
   <a href='/'><img src='/Images/kite_40_83_trans.gif' width="40" height="83" alt="Parliament Hill Computers Ltd"
	onmouseout="return nd();" onmouseover="return overlib('Parliament Hill Computers Ltd<br>Kite Logo', WRAP)" style="border-width: 0;"></a>
  <div style='top:0px;margin:0px auto;text-align: center; font-size:40pt; '>

  The current date and time is {$|date_format:"%Y-%m-%d %H:%M:%S"}

   <form {$FormData.attributes}>
         <th>{if $FormData.Title.required}<font color="red">*</font> {/if}{$FormData.Title.label}</th>
         <th>{if $FormData.FirstName.required}<font color="red">*</font> {/if}{$FormData.FirstName.label}</th>
             <!-- The overlib magic is on the next 2 lines, the mouseover/mouseout attributes -->
         <td><a href='javascript:void(0);' onmouseout="return nd();"
		onmouseover="return overlib('Enter John or Bill', WRAP)">{$FormData.FirstName.html}</a></td>
         <th>{if $FormData.LastName.required}<font color="red">*</font> {/if}{$FormData.LastName.label}</th>
         <th>{if $FormData.Age.required}<font color="red">*</font> {/if}{$FormData.Age.label}</th>
         <th>{if $FormData.Telephone.required}<font color="red">*</font> {/if}{$FormData.Telephone.label}</th>
         <td><a href='javascript:void(0);' onmouseout="return nd();"
		onmouseover="return overlib('Enter full STD starting with 0 or international starting with +', WRAP)">

       <!-- Display the buttons -->

   {if $FormData.requirednote and not $FormData.frozen}

   <!-- Display any errors -->
   <div style="color:red">
    {foreach from=$FormData.errors item=error}

   Move the mouse over the Firstname and Telephone fields.
   This is a simple form, fill in some values and press <i>Submit</i>.
   This is a quickform that has been rendered with smarty using overlib.
   There is some validation on this form:
   <li> Firstname: client side: it must have a value: the value 'Bill' or 'John'
   <li> Lastname: client side: it must have a value
   <li> Age: client side: it must have a value and be numeric
   <li> Telephone: client side: it must start '0' or '+'

  <p style="font-size: x-large; font-weight: bold;">
   Return to this <em><a href='index.php'>tutorial index</a></em>.


Return to this tutorial index.