Resources
Articles
Links

Showing the Selected Page on a Dreamweaver Menu

Rollovers built using Dreamweaver and Fireworks are widely used in a menu systems (fig 1). When the mouse moves over each button the image is swapped with a rollover image red -> green (fig 2).

The logical place to include the menu is in a template. But then how can you change the button to indicate that the page has been selected (fig 3) ?

figure 1 : menu
figure 2 : rollover 1st item
figure 3 : item 1 selected

 

The Dreamweaver template must determine when to display the normal image and when to display the selected image. This can be done using a template parameter.

In each page that uses the template parameter is set to a unique value, 1,2,3...

A template expression conditionally formats each menu item depending on which page it is being applied to.

Below is a sample HTML code showing how this looks. The @@ symbols identify the template expression. When the template is applied to Page1.htm, menuselect is set to 1, so the image src becomes "menu1_s.gif" - grey in the above example. When the template is applied to Page2.htm menuselect variable is not equal to 1 so the image src becomes "menu1.gif" - purple .

Template

<!-- TemplateParam name="menuselect" type="number" value="0" -->

<a href="Page1.htm" onMouseOut="MM_swapImgRestore();" onMouseOver="MM_swapImage('menu1','','../Images/menu1_f2.gif',1)">

<img name="menu1" src="@@(menuselect==1?'Images/menu1_s.gif':'Images/menu1.gif')@@"
width="81" height="13" border="0" alt="Our Principles"></a>

<img name="menu2" src="@@(menuselect==2?'Images/menu2_s.gif':'Images/menu2.gif')@@"
width="81" height="13" border="0" alt="Our Principles"></a>

 

Page1.htm

<!-- InstanceParam name="menuselect" type="number" value="1" -->

Page2.htm

<!-- InstanceParam name="menuselect" type="number" value="2" -->