Форум русской поддержки Joomla!® CMS
08.12.2016, 20:11:48 *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

Войти
   
   Начало   Поиск Joomla 3.0 FAQ Joomla 2.5 FAQ Joomla 1.5 FAQ Правила форума Новости Joomla Реклама Войти Регистрация Помощь  
Страниц: [1]   Вниз
  Добавить закладку  |  Печать  
Автор

Смена картинки при наведении указателя на пункт меню

 (Прочитано 7696 раз)
0 Пользователей и 1 Гость смотрят эту тему.
pautina
Осваиваюсь на форуме
***

Репутация: +1/-1
Offline Offline

Сообщений: 160


« : 26.04.2010, 08:06:07 »

Сдравствуйте Уважаемое сообщество, как можно сделать смену картинки при наведении указателя на пункт меню.
Для того чтоб картинки менялись при переходе на пункт меню использую такой код
Код:

<div id="box_img"> <!-- Блок в шапке где выводятся изображения-->
           
           <?php $Itemid = JRequest::getInt('Itemid'); ?>    <!-- инициализация $Itemid (пунктов меню) -->
           <?php if ($Itemid == '1' )
            {
               echo "<img src='templates/template_tut/images/img-1.jpg' width='339' height='255' border='0' />";
            }
            elseif ($Itemid == '2' )
            {
               echo "<img src='templates/template_tut/images/img-2.jpg' width='339' height='255' border='0' />";
            }
            elseif ($Itemid == '3' )
            {
               echo "<img src='templates/template_tut/images/img-3.jpg' width='339' height='255' border='0' />";
            }
elseif ($Itemid == '4' )
            {
               echo "<img src='templates/template_tut/images/img-4.jpg' width='339' height='255' border='0' />";
            }
elseif ($Itemid == '5' )
            {
               echo "<img src='templates/template_tut/images/img-5.jpg' width='339' height='255' border='0' />";
            }
elseif ($Itemid == '6' )
            {
               echo "<img src='templates/template_tut/images/img-6.jpg' width='339' height='255' border='0' />";
            }
            else
            {
            }
?>
       
        </div>
...
А как сделать чтоб картинка менялась при наведении указателя мыши.
Записан
danik.html
Практически профи
*******

Репутация: +351/-4
Offline Offline

Пол: Мужской
Сообщений: 2723



« Ответ #1 : 26.04.2010, 09:00:33 »

А не проще вставлять картинки из админчасти?
Ну или хотябы elseif замени на switch.
По идее надо картинку пункта выводить не в тег img а в css-свойство background ссылки. Тогда можно будет использовать картинку как спрайт.
.menu a:hover{ background-position: bottom }
Вот только как превратить <img src="src" /> в style="background-image: url(src);" я хз. надо копаться в mod_mainmenu/tmpl
Записан
danik.html
Практически профи
*******

Репутация: +351/-4
Offline Offline

Пол: Мужской
Сообщений: 2723



« Ответ #2 : 26.04.2010, 09:23:34 »

В общем нужно скопировать файл modules/mod_mainmenu/tmpl/default.php в папку templates/твой_шаблон/html/mod_mainmenu/default.php и добавить в него вот такой код:
Код:
if (($node->name() == 'a') && isset($node->img)) {
$node->addAttribute('style','background-image: url('.$node->getElementByPath(img)->attributes('src').')');
$node->removeChild($node->getElementByPath(img));
}
В итоге мы превращаем картинку в фоновое изображение, и делаем с ним через CSS что хотим. например .menu a:hover{ background-position: bottom }
Записан
pautina
Осваиваюсь на форуме
***

Репутация: +1/-1
Offline Offline

Сообщений: 160


« Ответ #3 : 26.04.2010, 12:09:44 »

Вот адрес сайта http://my-page41.xmldesign.ru/
Что нужно сделать чтоб при наведении на пункт левого меню (где ссылки ОБУЧЕНИЕ, РЕШЕНИЯ, АРМ, БИБЛИОТЕКА (ИНФ-ЦИЯ), ОФОРМЛЕНИЕ) менялась картинка справа, делал как вы говорили не пошло,
сейчас работает так при нажатии на кнопку, рисунок картинки справа меняется.
Как сделать чтоб картинка справа менялась при наведении указателя на этот пункт.
Записан
SmokerMan
Профи
********

Репутация: +694/-25
Offline Offline

Пол: Мужской
Сообщений: 5225



« Ответ #4 : 26.04.2010, 12:17:12 »

pautina
ответ вам уже написали. В таких случаях делать проще всего через background и hover.
Она и так меняется
Код
#ver_menu ul li a:hover { display:block; font-family:Tahoma; font-size:11pt; color:#FFFFFF; padding:5px 0px 5px 12px; text-decoration:none; background:url(../images/ver_menu_hover.jpg) center right no-repeat; }
Записан
SmokerMan
Профи
********

Репутация: +694/-25
Offline Offline

Пол: Мужской
Сообщений: 5225



« Ответ #5 : 26.04.2010, 12:17:45 »

удалить
Записан
pautina
Осваиваюсь на форуме
***

Репутация: +1/-1
Offline Offline

Сообщений: 160


« Ответ #6 : 26.04.2010, 13:33:56 »

Я это и сам знаю,
http://my-page41.xmldesign.ru/
Это смена картинки для пункта меню идёт, при наведении там стрелка появляется.
Я бы хотел менять картинку при наведении не в пункте меню а справа от пункта меню, сейчас сделано так, картинка справа пеняется при переходе на новый пункт меню посредством участка кода
Код:

<div id="box_img"> <!-- Блок в шапке где выводятся изображения-->
            
           <?php $Itemid = JRequest::getInt('Itemid'); ?>    <!-- инициализация $Itemid (пунктов меню) -->
           <?php if ($Itemid == '1' )
            {
               echo "<img src='templates/template_tut/images/img-1.jpg' width='339' height='255' border='0' />";
            }
            elseif ($Itemid == '2' )
            {
               echo "<img src='templates/template_tut/images/img-2.jpg' width='339' height='255' border='0' />";
            }
            elseif ($Itemid == '3' )
            {
               echo "<img src='templates/template_tut/images/img-3.jpg' width='339' height='255' border='0' />";
            }
elseif ($Itemid == '4' )
            {
               echo "<img src='templates/template_tut/images/img-4.jpg' width='339' height='255' border='0' />";
            }
elseif ($Itemid == '5' )
            {
               echo "<img src='templates/template_tut/images/img-5.jpg' width='339' height='255' border='0' />";
            }
elseif ($Itemid == '6' )
            {
               echo "<img src='templates/template_tut/images/img-6.jpg' width='339' height='255' border='0' />";
            }
            else
            {
            }
?>
        
        </div>
...
Как сделать чтоб картинка справа менялась не при переходе на новый пункт меню, а при наведении.
Записан
SmokerMan
Профи
********

Репутация: +694/-25
Offline Offline

Пол: Мужской
Сообщений: 5225



« Ответ #7 : 26.04.2010, 13:52:03 »

Как сделать чтоб картинка справа менялась не при переходе на новый пункт меню, а при наведении.
на PHP никак. Только через JS. Вешать событие на пункты меню и в скрипте обрабатывать события и менять соответственно элемент.
Записан
danik.html
Практически профи
*******

Репутация: +351/-4
Offline Offline

Пол: Мужской
Сообщений: 2723



« Ответ #8 : 26.04.2010, 14:53:17 »

Я тут накатал целое решение.
Правим файл default.php :
меняем те строки что я писал на ето:
   if (($node->name() == 'a') && isset($node->img)) {
      $node->addAttribute('onmouseover', "changeBanner('".$node->getElementByPath(img)->attributes('src')."')");
      $node->removeChild($node->getElementByPath(img));
   }


перед modMainMenuHelper::render($params, 'modMainMenuXMLCallback');
добавляем
<script>
   function changeBanner(img){
      var banner = document.getElementById('banner');
      banner.style.background = 'url('+img+')';
   }
</script>

Так, ну теперь при наведении на пункт, #banner будет менять фон.
Терь осталось при перезагрузке страницы выводить нужное изображение. в свой шаблон добавляем следующее:
      $menu = & JSite::getMenu();
      $item = $menu->getActive();
      $iParams = new JParameter($item->params);
      $image = $iParams->get('menu_image');
      if ($iParams->get('menu_image') && $iParams->get('menu_image')!= -1){
         $image = JURI::base(true).'/images/stories/'.$iParams->get('menu_image');
      }else
      {
         $image = $this->baseurl.'/templates/'.$this->template.'/images/header.jpg';
      }
      $style = ' style="background: url('.$image.')"';
<div id="banner"<?php echo $style ?>></div>

Код проверял не весь, так что...
Записан
pydix
Осваиваюсь на форуме
***

Репутация: +0/-0
Offline Offline

Сообщений: 34


« Ответ #9 : 13.10.2016, 11:34:10 »

А не проще вставлять картинки из админчасти?
Ну или хотябы elseif замени на switch.
По идее надо картинку пункта выводить не в тег img а в css-свойство background ссылки. Тогда можно будет использовать картинку как спрайт.
.menu a:hover{ background-position: bottom }
Вот только как превратить <img src="src" /> в style="background-image: url(src);" я хз. надо копаться в mod_mainmenu/tmpl

Действительно, проще вставлять картинки через админчасть. Тогда и изменение картинки при наведении указателя на пункт меню можно сделать просто через css:
1)... a img {display: none} /*отключаем показ картинки добавленной через админчасть*/
2)... a {background: url(путь к картинке); /* вместо неё выводим как нам надо другую картинку фоном*/
Записан
Страниц: [1]   Вверх
  Добавить закладку  |  Печать  
 
Перейти в:  

Powered by SMF 1.1.21 | SMF © 2006, Simple Machines

Joomlaforum.ru is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by Open Source Matters
the trademark holder in the United States and other countries.

LiveInternet