Forums / General / How to implement rollover menus

How to implement rollover menus

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.

eZ debug

Timing: Jan 30 2025 07:32:10
Script start
Timing: Jan 30 2025 07:32:10
Module start 'content'
Timing: Jan 30 2025 07:32:10
Module end 'content'
Timing: Jan 30 2025 07:32:10
Script end

Main resources:

Total runtime0.4137 sec
Peak memory usage8,192.0000 KB
Database Queries141

Timing points:

CheckpointStart (sec)Duration (sec)Memory at start (KB)Memory used (KB)
Script start 0.00000.0089 587.9219370.3047
Module start 'content' 0.00890.0166 958.22661,005.3750
Module end 'content' 0.02550.3881 1,963.60163,892.9375
Script end 0.4137  5,856.5391 

Time accumulators:

 Accumulator Duration (sec) Duration (%) Count Average (sec)
Ini load
Load cache0.00461.1030200.0002
Check MTime0.00130.3217200.0001
Mysql Total
Database connection0.00080.186810.0008
Mysqli_queries0.280767.85131410.0020
Looping result0.00170.39921390.0000
Template Total0.387793.710.3877
Template load0.00090.219210.0009
Template processing0.386893.483210.3868
Override
Cache load0.00060.152810.0006
Sytem overhead
Fetch class attribute can translate value0.00190.464610.0019
XML
Image XML parsing0.00030.065810.0003
General
dbfile0.02526.0836200.0013
String conversion0.00000.001930.0000
Note: percentages do not add up to 100% because some accumulators overlap

CSS/JS files loaded with "ezjscPacker" during request:

CacheTypePacklevelSourceFiles
CSS0extension/community/design/community/stylesheets/ext/jquery.autocomplete.css
extension/community_design/design/suncana/stylesheets/scrollbars.css
extension/community_design/design/suncana/stylesheets/tabs.css
extension/community_design/design/suncana/stylesheets/roadmap.css
extension/community_design/design/suncana/stylesheets/content.css
extension/community_design/design/suncana/stylesheets/star-rating.css
extension/community_design/design/suncana/stylesheets/syntax_and_custom_tags.css
extension/community_design/design/suncana/stylesheets/buttons.css
extension/community_design/design/suncana/stylesheets/tweetbox.css
extension/community_design/design/suncana/stylesheets/jquery.fancybox-1.3.4.css
extension/bcsmoothgallery/design/standard/stylesheets/magnific-popup.css
extension/sevenx/design/simple/stylesheets/star_rating.css
extension/sevenx/design/simple/stylesheets/libs/fontawesome/css/all.min.css
extension/sevenx/design/simple/stylesheets/main.v02.css
extension/sevenx/design/simple/stylesheets/main.v02.res.css
JS0extension/ezjscore/design/standard/lib/yui/3.17.2/build/yui/yui-min.js
extension/ezjscore/design/standard/javascript/jquery-3.7.0.min.js
extension/community_design/design/suncana/javascript/jquery.ui.core.min.js
extension/community_design/design/suncana/javascript/jquery.ui.widget.min.js
extension/community_design/design/suncana/javascript/jquery.easing.1.3.js
extension/community_design/design/suncana/javascript/jquery.ui.tabs.js
extension/community_design/design/suncana/javascript/jquery.hoverIntent.min.js
extension/community_design/design/suncana/javascript/jquery.popmenu.js
extension/community_design/design/suncana/javascript/jScrollPane.js
extension/community_design/design/suncana/javascript/jquery.mousewheel.js
extension/community_design/design/suncana/javascript/jquery.cycle.all.js
extension/sevenx/design/simple/javascript/jquery.scrollTo.js
extension/community_design/design/suncana/javascript/jquery.cookie.js
extension/community_design/design/suncana/javascript/ezstarrating_jquery.js
extension/community_design/design/suncana/javascript/jquery.initboxes.js
extension/community_design/design/suncana/javascript/app.js
extension/community_design/design/suncana/javascript/twitterwidget.js
extension/community_design/design/suncana/javascript/community.js
extension/community_design/design/suncana/javascript/roadmap.js
extension/community_design/design/suncana/javascript/ez.js
extension/community_design/design/suncana/javascript/ezshareevents.js
extension/sevenx/design/simple/javascript/main.js

Templates used to render the page:

UsageRequested templateTemplateTemplate loadedEditOverride
1pagelayout.tpl<No override>extension/sevenx/design/simple/templates/pagelayout.tplEdit templateOverride template
 Number of times templates used: 1
 Number of unique templates used: 1

Time used to render debug report: 0.0001 secs