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

  • 9 Ответов
  • 8405 Просмотров

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

*

pautina

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

<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

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

В общем нужно скопировать файл 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

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

*

SmokerMan

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


*

pautina

Я это и сам знаю,
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

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

*

danik.html

Я тут накатал целое решение.
Правим файл 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

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