Меню CSS картинка для каждого раздела как?

dstudi

Осваиваюсь на форуме
34
1 / 1

Меню CSS картинка для каждого раздела как?

« : 24.03.2008, 15:31:01 »

Делаю сай на Joomla на тему фото

Есть идея сделать меню сместо букв картинки (картинка для каждого раздела своя)
Тоесть есть горизонтальное меню размер картинок 30/30 пикселей при наведении курсором на картинку раздел она увеличивается до 60 пикселей все остальные так и остаются по 30 пикселей

Кто-то такое уже делал (приму любой совет) можна даже прописать вручную без каких либо модулей.
Я в СSS не силён может кто знает как енто воплотить в жизнь (Подскажите)
Как в (Вложении)

[вложение удалено Администратором]

Записан

dstudi

Осваиваюсь на форуме
34
1 / 1

Re: Меню CSS картинка для каждого раздела как?

« Ответ #1 : 24.03.2008, 15:46:27 »

Ну скачал я модуль установил (не вижу настроек) или там в самом модуле ???

Нужно чтоб при наведении курсора увеличивалась картинка (30 пик на 60 пик)

« Последнее редактирование: 24.03.2008, 15:59:30 от dstudi »

Записан

Mitrich

Захожу иногда
289
524 / 13
Все можно. Но сначала учиться, учиться и учиться.

Re: Меню CSS картинка для каждого раздела как?

« Ответ #2 : 24.03.2008, 17:28:21 »

Что за модуль скачал?
картинки для всех пунктов одинаковые или нет?
текст нужен или нет?

Записан

http://mitrichlab.ru создание сайтов на CMS Joomla!

Часто задаваемые вопросы и ответы по Joomla Все что надо знать о HTML и CSS приличному человеку Как найти и читать error.log Не стучите в личку, огорчусь

dstudi

Осваиваюсь на форуме
34
1 / 1

Re: Меню CSS картинка для каждого раздела как?

« Ответ #3 : 24.03.2008, 18:24:37 »

Пишет мне (мол мона енто сделать с помощью мод mod_fynmenu)
Скачал я (просто фонарь)

Делаю сай на Joomla на тему фото хочу сделать меню чтоб (картинка для каждого раздела своя)

Есть идея сделать меню сместо букв картинки
Тоесть есть горизонтальное меню размер картинок 30/30 пикселей при наведении курсором на картинку раздел она увеличивается до 60 пикселей все остальные так и остаются по 30 пикселей

Кто-то такое уже делал (приму любой совет) можна даже прописать вручную без каких либо модулей.
Я в СSS не силён может кто знает как енто воплотить в жизнь (Подскажите)
Как в (Вложении) ток картинки типа будут разные

Есть вариант Java script:
Даже всё работает но хотелось попроще с помощью CSS (яко возможно енто)

На всяк случай вот код Java script может кому пригодится.
Вписывается прямо в index.php

Код

<?php defined( "_VALID_MOS" ) or die( "Direct Access to this location is not allowed." );?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<?php if ( $my->id ) { initEditor(); } ?>
<meta http-equiv="Content-Type" content="text/html;><?php echo _ISO; ?>" />
<?php mosShowHead(); ?>
<?php echo "<link rel=\"stylesheet\" href=\"$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]/css/template_css.css\" type=\"text/css\"/>" ; ?><?php echo "<link rel=\"shortcut icon\" href=\"$GLOBALS[mosConfig_live_site]/images/favicon.ico\" />" ; ?>
<!--[if lt IE 7.]>
<script defer type="text/javascript" src="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/pngfix.js"></script>
<![endif]-->

Вот 

<script language="JavaScript">  

<!--

function pokaz(numer, i) {
     var picturs;
     j1 = -1
   for (j = 0; j < imnArray.length; j++)
   {
     picturs = imnArray[j];
     j1 = j1 + 1
     document.images[j1].src = picturs;
   }  
     picturs = imgArray[numer];
     document.images[i].src = picturs;
}

function nepokaz() {
     var picturs;
     j1 = -1
   for (j = 0; j < imnArray.length; j++)
   {
     j1 = j1 + 1
     picturs = imnArray[j];
     document.images[j1].src = picturs;
   }  
}

//-->

</script>


Конец

</head>

<body id="body_bg" bgcolor="fffff">





     <table width="100%"   border="0" align="center" cellpadding="0" cellspacing="0">
         <tr>
            

              <td width="100%" height="200" align="center" class="topnav" valign="bottom" bgcolor="#F7FBFD">

  <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="1000" height="200" id="15" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="15.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#3399cc" /><embed src="15.swf" quality="high" bgcolor="#3399cc" width="1000" height="200" name="15" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>

                 </td>
         
        </tr>
  </table>  
  
  <table width="100%"   border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td  width="100%" height="50">



Вот снова


<script language="JavaScript">  
<!--
imgArray = new Array ('01-1.gif','01-1.gif','01-1.gif');
imnArray = new Array ('01-2.gif','01-2.gif','01-2.gif');
//-->
</script>

<p align="center">

<a href="#" onMouseOver="pokaz(0,0)" onMouseOut="nepokaz()"><img border="0" src="01-2.gif" width="163" height="65"></a>
<a href="#" onMouseOver="pokaz(1,1)" onMouseOut="nepokaz()"><img border="0" src="01-2.gif" width="163" height="65"></a>
<a href="#" onMouseOver="pokaz(2,2)" onMouseOut="nepokaz()"><img border="0" src="01-2.gif" width="163" height="65"></a>

Вот конец

</td>
</tr>
</table>
  
<table width="100%"   border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="Black" width="100%" height="2"></td>
</tr>
</table>
  
  <table width="95%" class="top2"  border="0" align="center" cellpadding="0" cellspacing="0"  >
          <tr>
                 <?php if (mosCountModules('left')) { ?>
             <td valign="top" class="lcol">
                 <div class="leftrow">
                  <?php mosLoadModules ( 'left' ); ?>
                 </div>
             </td>
          
             <td class="bgline" ><img  src="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/images/space.gif" alt="" width="7" border="0"/></td>
            
                   <?php } ?>

             <td valign="top"  width="100%" > 
  <table width="100%"  border="0" cellspacing="0" cellpadding="0" style="border-top: 5px solid #ffffff;">
                   <?php if (mosCountModules('top')) { ?>              
          <tr valign="top" >
                   <td colspan="3">
                        <div>
                        <?php mosLoadModules ( 'top' ); ?>
                        </div>
                   </td> 
          </tr>
               <tr><td colspan="3"></td></tr>
                        <?php } ?>
<?php if (mosCountModules('user1','user2')) { ?>
          <tr>
                        <?php if (mosCountModules('user1')) { ?> 
                       <td valign="top" ><div>
                        <?php mosLoadModules ( 'user1' ); ?>
                        </div>
                       </td>
                       <td width="4" class="mod" valign="top" bgcolor="#FFFFFF" ><div class="mod"> <?php } ?> <?php if (mosCountModules('user2')) { ?> </div></td> 
                  
                       <td valign="top"><div>
                    <?php mosLoadModules ( 'user2' ); ?>
                    </div></td> <?php } ?>
          </tr>
                    
                   <tr><td colspan="3"></td></tr>
                    <?php } ?>

          <tr align="left" valign="top">
                      <td colspan="3" style="border-top: 3px solid #ffffff; padding: 3px;"><div class="main">
                      <?php mosMainBody(); ?>
                      </div></td>
          </tr>
          <tr>
                      <td colspan="3" valign="top" style="border-top: 3px solid #FFFFFF;"> <?php if (mosCountModules('bottom')) { ?>
                      <div>
                      <?php mosLoadModules ( 'bottom' ); ?>
                      </div>
                      <?php } ?>
							 
														 
                      </td>
          </tr>
  </table>
  
  </td>

<td class="bgline"><img  src="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/images/space.gif" alt="" width="7" border="0"/></td>
                      
<?php if (mosCountModules('right')) { ?>

<td valign="top" class="rcol"> 
                  <div class="rightrow">
                  <?php mosLoadModules ( 'right' ); ?>
                  </div>
                 </td><?php } ?>
         </tr>
        </table> 
        
         <table width="100%" align="center" class="topnav"  border="0" cellspacing="0" cellpadding="0" bgcolor="56b9f3">
                <tr>

                                        <td width="100%" height="200" align="center" class="topnav" valign="bottom">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="1000" height="200" id="fon_nz" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="fon_nz.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#3399cc" /><embed src="fon_nz.swf" quality="high" bgcolor="#3399cc" width="1000" height="200" name="fon_nz" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
													 
													 
													                                   </td>

           </tr>

         </table>
          


</body>
</html>

Токо нужно рисунки сделать 01-2.gif' и 01-1.gif'

[вложение удалено Администратором]

« Последнее редактирование: 24.03.2008, 18:41:19 от dstudi »

Записан

Кликабельность псевдоэлемента в пункте меню Автор vasilii.pupkov	Ответов: 4 Просмотров: 4896	29.12.2021, 23:15:38 от v42bis
Выпадающее меню Автор DrShepard	Ответов: 10 Просмотров: 4202	20.10.2021, 12:36:16 от DrShepard
Как закруглить края выпадающего меню? Автор coliandra	Ответов: 1 Просмотров: 2619	11.12.2020, 21:15:57 от effrit
При прокрутке страницы виджет залезает на меню Автор coliandra	Ответов: 2 Просмотров: 2442	27.11.2020, 11:33:58 от coliandra
Как убрать маркер только из одного пункта меню. Автор kuraev64	Ответов: 2 Просмотров: 2563	20.07.2020, 11:18:44 от kuraev64

Меню CSS картинка для каждого раздела как? - Вопросы по CSS

Новости Joomla

🏆 Открыто голосование за Joomla в премии CMS Critic People’s Choice Awards 2025

👩‍💻 Релиз JoomGallery 4.3.0 - компонент галереи изображений для Joomla.

👩‍💻 Вместе мы развиваем Joomla: станьте Joomfluencer!

dstudi

Меню CSS картинка для каждого раздела как?

dstudi

Re: Меню CSS картинка для каждого раздела как?

Mitrich

Re: Меню CSS картинка для каждого раздела как?

dstudi

Re: Меню CSS картинка для каждого раздела как?

Похожие темы