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

pautina

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

<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

  • Практически профи
  • 2659
  • 348
А не проще вставлять картинки из админчасти?
Ну или хотябы 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

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

SmokerMan

  • Профи
  • 5333
  • 689
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

  • Профи
  • 5333
  • 689
*

pautina

  • Осваиваюсь на форуме
  • 160
  • 0
Я это и сам знаю,
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

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

danik.html

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

как сделать пункт меню не кликабельным?

Автор qweqweqwe

Ответов: 13
Просмотров: 5234
Последний ответ 07.09.2017, 01:45:49
от forzi
Сдвинуть пункты меню в левое положение

Автор wectra

Ответов: 6
Просмотров: 299
Последний ответ 12.07.2017, 21:09:01
от wectra
Не отображаются пункты в меню

Автор physic

Ответов: 16
Просмотров: 15302
Последний ответ 27.05.2017, 00:10:15
от OutLaw1
Nextend Accordion Menu можно ли сделать открытым только первый пункт меню?

Автор tmpnikl

Ответов: 0
Просмотров: 135
Последний ответ 26.05.2017, 09:59:09
от tmpnikl
В K3 меню сайта меняется на английское

Автор nautilus.lg

Ответов: 0
Просмотров: 174
Последний ответ 25.05.2017, 11:09:20
от nautilus.lg