How to implement rollover menus

Next topic

Author	Message
Charles Okech	Sunday 20 July 2003 11:58:11 am 1. I am trying to implement a menu system with javascript rollover images in a new site using ezpublish with 5 folders. The code is as below: <table cellspacing="0" cellpadding="0" border="0"> <tr> <td><a href={"content/view/full/(node_id)"\|ezurl} onMouseOver="F_roll('navigationButton1',1)" onMouseOut="F_roll('navigationButton1',0)"><img id="navigationButton1" name="navigationButton1" src={"folder1_Hp3.gif"\|ezimage} onLoad="F_loadRollover(this,'folder_HRp4.gif')" height="25" width="85" border="0" alt="Folder1"></a></td> <td><a href={"content/view/full/(node_id)"\|ezurl} onMouseOver="F_roll('navigationButton2',1)" onMouseOut="F_roll('navigationButton2',0)"><img id="navigationButton2" name="navigationButton2" src={"folder2_Np1.gif"\|ezimage} onLoad="F_loadRollover(this,'folder2_NRp2.gif')" width="85" height="25" border="0" alt="Folder2"></a></td> <td><a href={"content/view/full/(node_id)"\|ezurl} onMouseOver="F_roll('navigationButton3',1)" onMouseOut="F_roll('navigationButton3',0)"><img id="navigationButton3" name="navigationButton3" src={"folder3_Np1.gif"\|ezimage} onLoad="F_loadRollover(this,'folder3_NRp2.gif')" width="85" height="25" border="0" alt="Folder3"></a></td> <td><a href={"content/view/full/(node_id)"\|ezurl} onMouseOver="F_roll('navigationButton4',1)" onMouseOut="F_roll('navigationButton4',0)"><img id="navigationButton4" name="navigationButton4" src={"folder4_Np1.gif"\|ezimage} onLoad="F_loadRollover(this,'folder4_NRp2.gif')" width="85" height="25" border="0" alt="Folder4"></a></td> <td><a href={"content/view/full/(node_id)"\|ezurl} onMouseOver="F_roll('navigationButton5',1)" onMouseOut="F_roll('navigationButton5',0)"><img id="navigationButton5" name="navigationButton5" src={"folder5_Np1.gif"\|ezimage} onLoad="F_loadRollover(this,'folder5_NRp2.gif')" width="85" height="25" border="0" alt="Folder5"></a></td> </tr> </table> The rollovers work just fine. The image "foldern_Hp3.gif" points to the active folder and the rollover image for the active folder is "foldern_HRp4.gif", such that if a user clicks on Folder5 the image changes to folder5_Hp3.gif and the rollover to folder5HRp4.gif. Does anyone have an idea how to implement this without override templates for all the folders, I guess with {switch} statements? Thx in advance!
Charles Okech	Thursday 24 July 2003 6:11:07 am Ok, I tried to solve it in this way: created 5 template files for each folder and used the following code to access them: {switch match=$node.node_id} {case match=17} {include uri="design:page_navbarfrontpage.tpl"} {/case} {case match=24} {include uri="design:page_navbararticles.tpl"} {/case} {case match=25} {include uri="design:page_navbarforums.tpl"} {/case} {case match=104} {include uri="design:page_navbarprojects.tpl"} {/case} {case match=105} {include uri="design:page_navbardownloads.tpl"} {/case} {case} {include uri="design:page_navbarfrontpage.tpl"} {/case} {/switch} This works very well when a user clicks on the top navbar and the top folder in the left navigation which also lists the subfolders in this way: Articles -Subfolder1 -Subfolder2 -Subfolder3 Forums -Subfolder1 -Subfolder2 -Subfolder3 Projects -Subfolder1 -Subfolder2 -Subfolder3 it does not work anymore when a user clicks on the subfolders. After wasting the last 4 days trying to find a way of making it work, I now give up. So consider this matter closed. I'm very disappointed.

Author

Message

Sunday 20 July 2003 11:58:11 am

1. I am trying to implement a menu system with javascript rollover images in a new site using ezpublish with 5 folders. The code is as below:

</tr>
</table>

The rollovers work just fine. The image "foldern_Hp3.gif" points to the active folder and the rollover image for the active folder is "foldern_HRp4.gif", such that if a user clicks on Folder5 the image changes to folder5_Hp3.gif and the rollover to folder5HRp4.gif.

Does anyone have an idea how to implement this without override templates for all the folders, I guess with {switch} statements?

Thx in advance!

Charles Okech

Thursday 24 July 2003 6:11:07 am

Ok, I tried to solve it in this way:
created 5 template files for each folder and used the following code to access them:

{switch match=$node.node_id}
{case match=17}
{include uri="design:page_navbarfrontpage.tpl"}
{/case}
{case match=24}
{include uri="design:page_navbararticles.tpl"}
{/case}
{case match=25}
{include uri="design:page_navbarforums.tpl"}
{/case}
{case match=104}
{include uri="design:page_navbarprojects.tpl"}
{/case}
{case match=105}
{include uri="design:page_navbardownloads.tpl"}
{/case}
{case}
{include uri="design:page_navbarfrontpage.tpl"}
{/case}
{/switch}

This works very well when a user clicks on the top navbar and the top folder in the left navigation which also lists the subfolders in this way:
Articles
-Subfolder1
-Subfolder2
-Subfolder3
Forums
-Subfolder1
-Subfolder2
-Subfolder3
Projects
-Subfolder1
-Subfolder2
-Subfolder3

it does not work anymore when a user clicks on the subfolders.

After wasting the last 4 days trying to find a way of making it work, I now give up. So consider this matter closed.
I'm very disappointed.