UMIhelp

Разработка сайта на UMI.CMS => Шаблоны TPL => Тема начата: talanter от 11 Июня 2011, 01:02:48

Название: Роловер на осноые menu_pic_ua & menu_pic_a
Отправлено: talanter от 11 Июня 2011, 01:02:48
Приветствую всех любителей ЮМИ, и администрацию этого ресурса.

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

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

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

подскажите может я не правильно указал путь
или другой вариант решения данного вопроса.
Название: Re:Роловер на осноые menu_pic_ua & menu_pic_a
Отправлено: admin от 11 Июня 2011, 01:11:39
тут надо немного другой подход во первых где вы прописываете эти стили?

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

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

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

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

Название: Re:Роловер на осноые menu_pic_ua & menu_pic_a
Отправлено: talanter от 11 Июня 2011, 01:15:51
Вот это оперативность, спасибо сейчас попробую,
я пробовал прописывать стили непосредственно в шаблоне меню.
Название: Re:Роловер на осноые menu_pic_ua & menu_pic_a
Отправлено: admin от 11 Июня 2011, 01:20:00
тогда все ок должно быть
Название: Re:Роловер на осноые menu_pic_ua & menu_pic_a
Отправлено: talanter от 11 Июня 2011, 01:29:37
И я думал что должно работать, но как выяснилось нет.
привожу полный листинг шаблона меню

подправь если найдешь ошибку.
(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;
?>
Название: Re:Роловер на осноые menu_pic_ua & menu_pic_a
Отправлено: admin от 11 Июня 2011, 01:47:20
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;
" я прописал для того что ссылка имела отступ , по большей части слева чтобы картинка была видна слева от текста, но числа в твоем случае могут быть (и скорее всего будут другие)
Название: Re:Роловер на осноые menu_pic_ua & menu_pic_a
Отправлено: talanter от 11 Июня 2011, 02:06:35
Превосходно, все работает, как много я еще не знаю по работе с ЮМИ.
Спасибо вашему ресурсу за пролитый свет в кромешной тьме.

Спасибо тебе друг.
Админ.
Название: Re:Роловер на осноые menu_pic_ua & menu_pic_a
Отправлено: admin от 11 Июня 2011, 02:16:25
Пожалуйста