Controlling Button 'States' with Template Parameters & Expressions

On a complex (or even a relatively simple) website, one is always faced with the issue of displaying, in an easily grasped manner, some kind of roadmap (or 'breadcrumb') so that the visitor can understand where in the page/folder hierarchy they are located, and how they got there - or conversely, how to get out! This kind of information is often displayed using a down state for the proper button on a site so that it can act as an indicator of which page you are on. In earlier versions of DW, this was more difficult to do, and could often involve custom java scripting.

Nevertheless, some hardy users plunged ahead and, even on a template page, recognized that it could also be done in one of several ways -

1. You can make the buttons reside in editable regions. This would let you change the source of each button on any child page. The advantage to this approach is that it's easy to do and you can simply change the source for the image on the corresponding page. The disadvantage is that if you have a three-state rollover (up, over and down), and you change the button's source to the down state, you will still get a rollover onmouseover. In addition, since the buttons are now in editable regions, you lose the control of the template (this is a big one).

2. You can leave the buttons in a non-editable region, and dynamically set the source of each button depending on the page using some clever javascript and variables in an editable region that was first described by the wizards at Project Seven. The advantages and disadvantages are the same as #1 above (except for the last disadvantage which is overcome by the fact that your buttons are *not* in an editable region using this method).

Either of these methods has another disadvantage - the button is *still* hyperlinked to the corresponding page. If you have already gone to the about us page, why would you want the button to still be linked to the about us page, so that when you push it, the page refreshes. It's a small thing but it's annoying, and not professional in our opinion.

ENTER... Dreamweaver MX!

There are two new features of templates in DMX that are wonderfully suited to solving this problem: template parameters (i.e., page variables) and template expressions. We'll show you how to use these two in a template to set a button's down state *and* to remove the hyperlink!

We have a template page created with some navigation buttons. The site is defined with this hierarchy -

[ROOT]
index.htm
members.htm
products.htm
faqs.htm
    [Templates]
        tut_buttons.dwt
    [Assets]
        buttons.css
    [SourceFiles]
        Buttons_Tutorial.png
    [images]
        header.gif
        header_bg.gif
        [navigation]
            faqbutt.gif
            faqbutt_o.gif
            faqbutt_d.gif
            homebutt.gif
            homebutt_o.gif
            homebutt_d.gif
            memberbutt.gif
            memberbutt_o.gif
            memberbutt_d.gif
            productbutt.gif
            productbutt_o.gif
            productbutt_d.gif

We need to have a way to identify which page is being built when we spawn a child from the template, so we insert a template parameter on the template page that contains a text variable, the value of which we can set on each child page, like this -

</script>
<!-- TemplateParam name="pagename" type="text" value="home" -->
</head>

Clearly, this line is inserted below any javascript in the head, but above the end of the head and outside any editable regions.

Note that we have given this parameter the default value of "home", which means that unless we specify otherwise, any child page from this template will be treated as if it were the home page.

This is the code for the products button on the template page -

<td><a href="../products.htm" onMouseOver="MM_swapImage('productsbutt','','..
    /images/navigation/productbutt_o.gif',1)" onMouseOut="MM_swapImgRestore()
    "><img src="../images/navigation/productbutt.gif" alt="Our Products" name
    ="productsbutt" width="98" height="22" border="0" id="productsbutt"></a>
    </td>

Note that this is a standard rollover button for the "our products" page on this site, and it is in a table cell.

We change this code to the following so that this button's state will be determined by the pagename parameter, and a clever application of template expressions -

<td>@@(pagename=="products"?'':'<a href="products.htm" onMouseOver="MM_swapIm
    age(&#39;productsbutt&#39;,&#39;&#39;,&#39;images/navigation/productbutt_
    o.gif&#39;,1)" onMouseOut="MM_swapImgRestore()">')@@<img src="images/navi
    gation/productbutt@@(pagename=="products"?'_d':'')@@.gif" alt="Our Produc
    ts" name="productsbutt" width="98" height="22" border="0" id="productsbut
    t">@@(pagename=="products"?'':'</a>')@@</td>

Now, what happens in the template expressions [template expressions are the @@(xxxx)@@ part] is this. Before anything gets written to the table cell, the value of the template parameter is checked [that's the @@(pagename== ...) part], and if the pagename (as set on the child page using MODIFY > Template Properties...) is "products", then a null is written into the cell [that's the ' ' part just after the ?]. If the pagename parameter is equivalent to "products", [that's the == part] we do not want a hyperlink on the button, right? So we only write the <a href part if this pagename test fails, and that's the code that is shown just after the : above. This is how you do an "if-then-else" test. In this case we said, if the page is the products page, write a null, else write the first part of the hyperlink.

Note that because the nesting of the quotes gets a little tricky here, we have used the single quote entity code for the single quotes within the hyperlink code, i.e., the ' part, see the table Common Conversions for other characters that may need special encoding inside template expressions.

Common Conversions
Character	Character Code
'	'
"	"
@	@

Next, we write the <img> tag and its source statement, but we want this source to be the down button when the pagename test succeeds, so we do another if-then-else test using a template expression that is actually embedded within the src line! If the test succeeds, we add the _d suffix to the button's filename just before the .gif extension ( that "_d" suffix is just how we elected to name the down state - in addition we used "_o" to represent the over state, and no suffix to represent the up state).

Finally, we test again for the pagename and if the test fails, we add the closing </a> tag (remember if the test succeeds, we want no link on the button).

Get it?

Here's how the code on the products page looks after setting the template parameter to "products" (MODIFY > Template Parameters...) -

<td><img src="images/navigation/productbutt_d.gif" alt="Our Products" name=
    "productsbutt" width="98" height="22" border="0" id="productsbutt"></td>

(note that there is no hyperlink *and* no rollover *AND* the button is set to the down state)

Here's how this same code looks on any other page -

<td><a href="products.htm" onMouseOver="MM_swapImage(&#39;productsbutt&#39;,
    &#39;&#39;,&#39;images/navigation/productbutt_o.gif&#39;,1)" onMouseOut=
    "MM_swapImgRestore()"><img src="images/navigation/productbutt.gif" alt="
    Our Products" name="productsbutt" width="98" height="22" border="0" id="
    productsbutt"></a></td>

(note that there is a hyperlink and a rollover)

And all this happens automatically when the MODIFY >Template Parameters... option is used to set a pagename value and the dialog is closed.

A final note: In order to do this, we had to *remove* the proper pathing for the button images and hyperlinks from the code and "hardwire" the paths. This means that we have sacrificed the site management capabilities of DMX by using the @@(..)@@ expressions in the code (in this instance at least). This also means that if the image file is moved, or if a hyperlinked page is moved, the child pages will break. On the other hand, since all the child pages are now controlled by a single template, and since the code is pretty straight-forward and relatively easy to fix, it's not such a big sacrifice, in our opinion.

So - to summarize, we have used a pagename parameter and template expressions to control the downstate button image within a navigation element. This control happens within a noneditable region of the template page, and is automatically expressed when the value of the template parameter is specified. If you have made it this far, and understand what we have done and why we have done it, then you should have no problem not only extending this approach to the rest of the buttons on this page, but also to your very own pages, too!

Would this work for you?

To learn more about how to do cool things like this and more with DMX templates, get our book entitled Dreamweaver MX Templates, or keep your eyes peeled to this tutorial area for future tutorials.

Modifications you can make:

There are several modifications that can be made to this example. We invite you to explore them using the sample download available below.

Modify the Title to use the same parameter thereby reducing the number of steps required to make new pages for the site. We've already done this one for you in the downloadable example files. What we had to do was remove the doctitle editable region and insert the parameter in the title tag.
This example site assumes that, and will only work if, all your pages exist in the same folder. If your pages are not in the same folder then your links to images and to url's must be either root relative or absolute.
Document relative: ../images/navigation/productbutt.gif;
Root relative: /images/navigation/productbutt.gif;
Absolute: http://www.mysite.com/images/navigation/productbutt.gif
Add more menu items to the template and make them work on child pages as the example does by following the instructions.
Notice that each of the child pages has its name in an H1 tag pair in the editable region beside the navigation system. Convert the template so that the pagename parameter is also used inside the H1 tag pair. Hint... you'll need to modify the contained area of the editable region and use an expression.

Downloads:

Please download ButtonStates.zip to see what we've done