[talanter]

Приветствую всех любителей ЮМИ, и администрацию этого ресурса.

Прошу помощи в ответе на не очень сложный вопрос, как сделать средствами TPL
вывод графического меню но что бы при  наведении курсора менялось изображение
с неактивной картинки на активную.

Пробывал решить через СSS но не воспринимает в пути данный макрос как

a: link {backgraund url(%menu_pic_ua%);}
a: hover {backgraund url(%menu_pic_a%);}

подскажите может я не правильно указал путь
или другой вариант решения данного вопроса.

[admin]

тут надо немного другой подход во первых где вы прописываете эти стили?

во вторых %menu_pic_ua% не выведет ссылку на картинку, пробуйте так

%data getProperty(%id%,menu_pic_ua,src)%

шаблон /tpls/data/src.tpl должен выводить поле типа "images_file" таким шаблоном

Код: [Выделить]

$FORMS['img_file'] = <<<END
%src%
END;

[talanter]

Вот это оперативность, спасибо сейчас попробую,
я пробовал прописывать стили непосредственно в шаблоне меню.

[admin]

тогда все ок должно быть

[talanter]

И я думал что должно работать, но как выяснилось нет.
привожу полный листинг шаблона меню

подправь если найдешь ошибку.
(P.S. ничего если я буду обращаться на ты)

Код: [Выделить]

<style type="text/css">
#imgmenu {
    margin: 0 auto 0 auto;
    width: 100%;
}
#imgmenu .imgmenuItem {
    width: 33%; float: left;
    margin: 0 0 10px; 0;

}                                  
#imgmenu .imgmenuItem  a {
background: url("%menu_pic_ua%"); 

} 

#imgmenu .imgmenuItem  a:hover {
background: url("%menu_pic_a%"); 
} 




</style>

<?php

$FORMS = Array();

$FORMS['menu_block_level1'] = <<<END
<div id="imgmenu">  
	%lines%       
</div>
END;

$FORMS['menu_line_level1'] = <<<END
<div class="imgmenuItem">
<a href="%link%" > 
<img src="%menu_pic_ua%">
</a>  
 <a href="%link%" class="img-repl">%text%
</a>    
</div>

END;

$FORMS['menu_line_level1_a'] = <<<END
<div class="imgmenuItem">
<a href="%link%" >
<img src="%menu_pic_a%">	
</a>
<a href="%link%" class="img-repl">%text%
</a>
</div>

END;
?>

[admin]

1. старайся не писать в шаблонах ничего вне блоков

Код: [Выделить]

$FORMS['menu_block_level1'] = <<<END
...
END;

2. Ты так и не исправил

Код: [Выделить]

background: url("%menu_pic_ua%"); 

 на

Код: [Выделить]

background: url("%data getProperty(%id%,menu_pic_ua,src)%"); 

 (не забудь про то что надо еще создать шаблон /tpls/data/src.tpl)

3. Если ты делаешь картинку фоном в ссылке, то тогда непонятно зачем тебе вывод картинки таким образом (

Код: [Выделить]

<a href="%link%" > <img src="%menu_pic_a%"> </a>

) параллельно с css
 
4. Твой стиль не будет работать, в смысле у каждого пункта меню может быть своя картинка, а ты каждый раз приравниваешь его с одному стилю

Код: [Выделить]

#imgmenu .imgmenuItem  a {
background: url("%menu_pic_ua%"); 
} 

а стили для каждой ссылки должны быть разные, если ты хочешь чтобы у пункта меню были разные картинки.
Лучше сделай так:
  - весть style блок перенси в файл css.
  - вот это:
    

Код: [Выделить]

#imgmenu .imgmenuItem  a {
     background: url("%menu_pic_ua%"); 
     } 

    #imgmenu .imgmenuItem  a:hover {
    background: url("%menu_pic_a%"); 
    } 

   сотри вообще, а в шаблоне пропиши

Код: [Выделить]

<?php

$FORMS = Array();

$FORMS['menu_block_level1'] = <<<END
<div id="imgmenu">  
	%lines%       
</div>
END;

$FORMS['menu_line_level1'] = <<<END
<style type="text/css">                               
#link_%id% {padding:10px 10px 10px 40px; background: url("%data getProperty(%id%,menu_pic_ua,src)%"); } 
#link_%id%:hover {padding:10px 10px 10px 40px;  background: url("%data getProperty(%id%,menu_pic_a,src)%"); } 
</style>

<div class="imgmenuItem">
<a href="%link%"  class="img-repl" id="link_%id%">%text%</a>         
</div>

END;

$FORMS['menu_line_level1_a'] = <<<END
<style type="text/css">                               
#link_%id% {padding:10px 10px 10px 40px; background: url("%data getProperty(%id%,menu_pic_ua,src)%"); } 
#link_%id%:hover {padding:10px 10px 10px 40px;  background: url("%data getProperty(%id%,menu_pic_a,src)%"); } 
</style>

<div class="imgmenuItem">
<a href="%link%"  class="img-repl" id="link_%id%">%text%</a>     
</div>

END;
?>

P.S. стили "

Код: [Выделить]

padding:10px 10px 10px 40px;

" я прописал для того что ссылка имела отступ , по большей части слева чтобы картинка была видна слева от текста, но числа в твоем случае могут быть (и скорее всего будут другие)

[talanter]

Превосходно, все работает, как много я еще не знаю по работе с ЮМИ.
Спасибо вашему ресурсу за пролитый свет в кромешной тьме.

Спасибо тебе друг.
Админ.

[admin]

Пожалуйста