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.

eZ debug

Timing:	Jan 18 2025 11:44:49
Script start
Timing:	Jan 18 2025 11:44:49
Module start 'layout'
Timing:	Jan 18 2025 11:44:49
Module start 'content'
Timing:	Jan 18 2025 11:44:50
Module end 'content'
Timing:	Jan 18 2025 11:44:50
Script end

Main resources:

Total runtime	0.8756 sec
Peak memory usage	4,096.0000 KB
Database Queries	52

Timing points:

Checkpoint	Start (sec)	Duration (sec)	Memory at start (KB)	Memory used (KB)
Script start	0.0000	0.0063	587.9063	152.6250
Module start 'layout'	0.0063	0.0024	740.5313	39.4453
Module start 'content'	0.0087	0.8653	779.9766	447.1719
Module end 'content'	0.8740	0.0015	1,227.1484	12.4766
Script end	0.8755		1,239.6250

Time accumulators:

Accumulator	Duration (sec)	Duration (%)	Count	Average (sec)
Ini load
Load cache	0.0032	0.3598	16	0.0002
Check MTime	0.0013	0.1464	16	0.0001
Mysql Total
Database connection	0.0007	0.0849	1	0.0007
Mysqli_queries	0.8236	94.0669	52	0.0158
Looping result	0.0005	0.0567	50	0.0000
Template Total	0.8459	96.6	2	0.4230
Template load	0.0023	0.2580	2	0.0011
Template processing	0.8437	96.3585	2	0.4218
Template load and register function	0.0002	0.0175	1	0.0002
states
state_id_array	0.0010	0.1122	1	0.0010
state_identifier_array	0.0017	0.1888	2	0.0008
Override
Cache load	0.0020	0.2239	55	0.0000
Sytem overhead
Fetch class attribute can translate value	0.0006	0.0666	1	0.0006
Fetch class attribute name	0.0012	0.1350	2	0.0006
XML
Image XML parsing	0.0001	0.0160	1	0.0001
class_abstraction
Instantiating content class attribute	0.0000	0.0007	2	0.0000
General
dbfile	0.0007	0.0747	10	0.0001
String conversion	0.0000	0.0013	4	0.0000
Note: percentages do not add up to 100% because some accumulators overlap

Templates used to render the page:

Usage	Requested template	Template	Template loaded
1	node/view/full.tpl	full/forum_topic.tpl	extension/sevenx/design/simple/override/templates/full/forum_topic.tpl
2	content/datatype/view/ezxmltext.tpl	<No override>	extension/community_design/design/suncana/templates/content/datatype/view/ezxmltext.tpl
7	content/datatype/view/ezxmltags/paragraph.tpl	<No override>	extension/ezwebin/design/ezwebin/templates/content/datatype/view/ezxmltags/paragraph.tpl
6	content/datatype/view/ezxmltags/line.tpl	<No override>	design/standard/templates/content/datatype/view/ezxmltags/line.tpl
1	print_pagelayout.tpl	<No override>	extension/community/design/community/templates/print_pagelayout.tpl
Number of times templates used: 17 Number of unique templates used: 5

Time used to render debug report: 0.0002 secs