0 Пользователей и 1 Гость просматривают эту тему.
  • 9 Ответов
  • 12587 Просмотров
*

pautina

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

<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

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

danik.html

  • Живу я здесь
  • 2650
  • 353 / 4
В общем нужно скопировать файл 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 }
【Мегапак Virtuemart:
 • метатеги (description,keywords)
 • заголовки (title)
 • красивые алиасы (чпу) без тормозов и дублей!
*

pautina

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

SmokerMan

  • Гуру
  • 5293
  • 720 / 26
pautina
ответ вам уже написали. В таких случаях делать проще всего через background и hover.
Она и так меняется
Код: css
#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

  • Гуру
  • 5293
  • 720 / 26
*

pautina

  • Захожу иногда
  • 160
  • 1 / 1
Я это и сам знаю,
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

  • Гуру
  • 5293
  • 720 / 26
Как сделать чтоб картинка справа менялась не при переходе на новый пункт меню, а при наведении.
на PHP никак. Только через JS. Вешать событие на пункты меню и в скрипте обрабатывать события и менять соответственно элемент.
*

danik.html

  • Живу я здесь
  • 2650
  • 353 / 4
Я тут накатал целое решение.
Правим файл 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>

Код проверял не весь, так что...
【Мегапак Virtuemart:
 • метатеги (description,keywords)
 • заголовки (title)
 • красивые алиасы (чпу) без тормозов и дублей!
*

pydix

  • Осваиваюсь на форуме
  • 34
  • 0 / 0
А не проще вставлять картинки из админчасти?
Ну или хотябы 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(путь к картинке); /* вместо неё выводим как нам надо другую картинку фоном*/
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

убрать из меню заголовки h3

Автор nexter

Ответов: 19
Просмотров: 6394
Последний ответ 03.02.2020, 18:49:47
от durte
При добавлении нового пункта меню не отображается содержимое

Автор Denko

Ответов: 2
Просмотров: 2072
Последний ответ 16.01.2020, 18:40:55
от Denko
Не нажимается пункт меню на мобильной версии

Автор Sensession

Ответов: 7
Просмотров: 2998
Последний ответ 04.01.2020, 16:45:27
от xpank
Не отображаются пункты в меню

Автор physic

Ответов: 20
Просмотров: 21285
Последний ответ 20.09.2019, 16:54:01
от beliyadm
Как в ARI Ext Menu добиться работы параметра "Показать в меню"?

Автор vasmed

Ответов: 1
Просмотров: 2287
Последний ответ 01.03.2019, 11:12:18
от vasmed