Разные рисунки для фонов пунктов меню

[seregarem]

Как сделать, чтобы в меню у каждого пункта меню при наведении были разные фоновые рисунки?

[afandi]

Все шибко зависит от того как у вас меню устроено

[seregarem]

Вот так

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 class="menu" id="menu">
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{repeat string="<ul class='submenu'>" 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='current'}
  {if $node->parent == true}
    {assign var='classes' value='current menuparent'}
  {/if}
  {if $node->children_exist == true and $node->depth < $number_of_levels}
    {assign var='classes' value=$classes|cat:' parent'}
  {/if}
  <li class="{$classes}"><a class="{$classes}" href="{$node->url}"
{if $node->target}target="{$node->target}" {/if}
><span>{$node->menutext}</span></a>

{elseif $node->children_exist == true and $node->depth < $number_of_levels and $node->type != 'sectionheader' and $node->type != 'separator'}
<li class="parent"><a class="parent" href="#"><span>{$node->menutext}</span></a>

{elseif $node->current == true}
<li 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><a href="{$node->url}"
{if $node->target}target="{$node->target}" {/if}
><span>{$node->menutext}</span></a>
{/if}

{/foreach}
{repeat string="</li></ul>" times=$node->depth-1}</li>
</ul>
{/if}

[afandi]

Каждая $node имеет в себе атрибуты id и alias. Так что прописывайте пунктам меню свойства onmouseover="jscriprtfunc_over({$node->id})" и onmouseout="jscriptfunc_out({$node->id})". И соответственно в скрипте определяйте на каком из пунктов меню сработало событие и подменяйте фон.

[seregarem]

Для проверки делаю так:

Code: Select all

<__script__ type="text/javascript" language="javascript1.5">
function menu_onmouseover(id){
	alert(document.getElementById(id));
}
</__script>

Code: Select all

<a href="{$node->url}" onmouseover="menu_onmouseover({$node->id});" id="{$node->id}" >

Выдает почему-то ссылку на страницу - http://malinaclub.com/index.php?page=aktsii

Что не так делаю?

[Dr.CSS]

You don't need all that onmouseover script stuff, just use CSS, I do this all the time...

[seregarem]

А как использовать в CSS? На сколько я знаю, id должен начинаться с буквы, а $node->id равен цифре.

[afandi]

А как использовать в CSS? На сколько я знаю, id должен начинаться с буквы, а $node->id равен цифре.

Ну так начините его с буквы id="node{$node->id}"