 |
Buttons and Navigation Systems
We already introduced the template function „PrintCategoryTree“ which you can use to build a simple textual menu navigation. But on many websites there are no text menus, but more or less expensive buttons with mouse-over and hover-effects. The buttons on portals are often the only graphics „web design“, in its original sense of creating web graphics, is still practised for.
The Portalsuite 2002 allows to generate all kind of buttons and navigation systems one could think of in the templates through HTML. You can realize everything which is possible with HTML, Javascript, DHTML and other techniques. Create your menus and your buttons as normal in the templates and use your existing Javascripts etc. for simplex buttons with mouse-over and hover-effects, or create complex menu systems.
In the following we like to show you the realization of a graphic button with a template and we will hereby again use the template function „PrintLink“. With the function „PrintLink“ we will link the button onto the category „products“. Since we need two pictures for this button, we assume that the pictures were stored under the same domain.
Template button example:
{TemplateInclude name="HTMLHead"}
<body bgcolor=#ffffff>
<table border=1><tr><td valign=top>
<a href=<? PrintLink ("/products"); ?>>
<img src=http://www......com/images/ button.jpg></a><br>
</td><td valign=top>
<? PrintArticle (); ?>
</td></tr></table>
</body>
</html>
As you can see, we used the normal HTML image tag to include the graphic-button. We hereby addressed the graphic absolutely. Again the „trick“ is to nest a normal HTML link tag with the template function „PrintLink“. Mouse-over, hover-effects and other specials can be realized as normal. Simply include your normal and amend the graphic and the link tag with corresponding Javascript functions and calls.