This is not a question, but for those interested: a description of how I build my menu's with images and a little javascript.
First of all, I know I shouldn't use images to build menu's, but sometimes (for example on this site http://www.degrebber-mandolin.com) I think I can't get the same result with just CSS.
I couldn't get this http://themes.cmsmadesimple.org/Howto/Image_menu.html to work, so I had to think of something else. Somewehere I came across this piece of code (can't remember where
):
Code: Select all
{* CSS classes used in this template:
.activeparent - The top level parent when a child is the active/current page
li.active0n h3 - n is the depth/level of the node. To style the active page for each level separately. The active page is not clickable.
.clearfix - Used for the unclickable h3 to use the entire width of the li, just like the anchors. See the Tools stylesheet in the default CMSMS installation.
li.sectionheader h3 - To style section header
li.separator - To style the ruler for the separator *}
{assign var='number_of_levels' value=10000}
{if isset($menuparams.number_of_levels)}
{assign var='number_of_levels' value=$menuparams.number_of_levels}
{/if}
{if $count > 0}
<ul>
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{repeat string="<ul>" times=$node->depth-$node->prevdepth}
{elseif $node->depth < $node->prevdepth}
{repeat string="</li></ul>" times=$node->prevdepth-$node->depth}
</li>
{elseif $node->index > 0}</li>
{/if}
{if $node->parent == true or $node->current == true}
{assign var='classes' value='menuactive'}
{if $node->parent == true}
{assign var='classes' value='menuactive menuparent'}
{/if}
{if $node->children_exist == true and $node->depth < $number_of_levels}
{assign var='classes' value=$classes|cat:' parent'}
{/if}
<li id="i{$node->id}" class="{$classes}"><a class="{$classes}" href="{$node->url}"><span>[b]<img src="/uploads/menuimages/button{$node->id}active.png" alt="{$node->menutext}" title="{$node->menutext}" id="button{$node->id}" />[/b]</span></a>
{elseif $node->children_exist == true and $node->depth < $number_of_levels and $node->type != 'sectionheader' and $node->type != 'separator'}
<li id="i{$node->id}" class="parent"><a class="parent" href="{$node->url}"[b]onMouseOver="SwapImg('button{$node->id}','/uploads/menuimages/button{$node->id}active.png')" onMouseOut="SwapImg('button{$node->id}','/uploads/menuimages/button{$node->id}.png')"><span><img src="/uploads/menuimages/button{$node->id}.png" alt="{$node->menutext}" title="{$node->menutext}" id="button{$node->id}" />[/b]</span></a>
{elseif $node->current == true}
<li id="i{$node->id}" class="currentpage"><h3><span>{$node->menutext}</span></h3>
{elseif $node->type == 'sectionheader'}
<li class="sectionheader"><span>{$node->menutext}</span>
{elseif $node->type == 'separator'}
<li class="separator" style="list-style-type: none;"> <hr />
{else}
<li id="i{$node->id}"><a href="{$node->url}" [b]onMouseOver="SwapImg('button{$node->id}','/uploads/menuimages/button{$node->id}active.png')" onMouseOut="SwapImg('button{$node->id}','/uploads/menuimages/button{$node->id}.png')"><span><img src="/uploads/menuimages/button{$node->id}.png" alt="{$node->menutext}" title="{$node->menutext}" id="button{$node->id}" />[/b]</span></a>
{/if}
{/foreach}
{repeat string="</li></ul>" times=$node->depth-1}</li>
</ul>
{/if}
Basically here's what I do:
I use the $node->id in the name of the image. For example, when the $node->id is 57, the name of the images will be button57.png for the non-active button and button57active.png for the active button.
I use a little javascript to change the image when it is hovered.
Here's the javascript:
Code: Select all
var button
var path
function SwapImg(button,path)
{
var elem = document.getElementById(button);
elem.setAttribute("src",path);
}Hope this is clear, comments will be appreciated
Hans
...
