eZ Community » Forums » General » How to implement rollover menus
expandshrink

How to implement rollover menus

How to implement rollover menus

Sunday 20 July 2003 8:58:11 pm - 1 reply

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!

Modified on Sunday 20 July 2003 9:46:32 pm by Charles Okech

Thursday 24 July 2003 3:11:07 pm

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.

expandshrink

You must be logged in to post messages in this topic!

36 542 Users on board!

Forums menu

Proudly Developed with from