Forums / General / How to implement rollover menus

"Please Note:
  • At the specific request of Ibexa we are changing this projects name to "Exponential" or "Exponential (CMS)" effective as of August, 11th 2025.
  • This project is not associated with the original eZ Publish software or its original developer, eZ Systems or Ibexa".

How to implement rollover menus

« 
Previous topic
|
General
|
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 Exponential 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.