Dodawanie linków paska menu (nawigacja)

Założony przez  Nina.

Kilka szczegółów o moim forum i stylu, z którym mam problem:
nazwa stylu: PowerGreen
wersja skryptu MyBB: 1.4.8
adres forum: http://muzoforus.ugu.pl/index.php

Opis problemu:
Jak dodać jakiś link do menu? Tak jak jest "Muzo Forus" , "Szukaj" , "Użytkownicy" ...
Chciałabym dodać "MusicTube" oraz "Kontakt", co będzie przechodziło do wysłania wiadomości na mój e-mail.
Szablony Twojego stylu > PowerGreen Templates > Header Templates (Nagłówek) > header:
Znajdź:
<ul>
    <li><a href="{$mybb->settings['bburl']}/index.php">{$mybb->settings['bbname']}</a></li>
    <li><a href="{$mybb->settings['bburl']}/search.php">{$lang->toplinks_search}</a></li>
    <li><a href="{$mybb->settings['bburl']}/memberlist.php">{$lang->toplinks_memberlist}</a></li>
    <li><a href="{$mybb->settings['bburl']}/calendar.php">{$lang->toplinks_calendar}</a></li>
    <li><a href="{$mybb->settings['bburl']}/misc.php?action=help">{$lang->toplinks_help}</a></li>
</ul>
i dodaj własne linki. ;)
Żadna sprawa nie jest przegrana dopóki choć jeden szaleniec o nią walczy. Tylko wariaci są coś warci.
A jak można zastąpić menu obrazkami? Choćby pierwsza lepsza strona:
http://s2o.tv/homepage.aspx lub http://pandanda.eu/.
Chciałabyś aby obok napisu np. Szukaj był jeszcze obrazek tak jak na mybboard.pl czy żeby zamiast napisu Szukaj był tylko obrazek?

Dam kod do obydwu opcji:

1.
<ul>
                    <li><a href="{$mybb->settings['bburl']}/search.php"><img src="{$mybb->settings['bburl']}/{$theme['imgdir']}/toplinks/search.gif" alt="" title="" />{$lang->toplinks_search}</a></li>
                    <li><a href="{$mybb->settings['bburl']}/memberlist.php"><img src="{$mybb->settings['bburl']}/{$theme['imgdir']}/toplinks/memberlist.gif" alt="" title="" />{$lang->toplinks_memberlist}</a></li>
                    <li><a href="{$mybb->settings['bburl']}/calendar.php"><img src="{$mybb->settings['bburl']}/{$theme['imgdir']}/toplinks/calendar.gif" alt="" title="" />{$lang->toplinks_calendar}</a></li>
                    <li><a href="{$mybb->settings['bburl']}/misc.php?action=help"><img src="{$mybb->settings['bburl']}/{$theme['imgdir']}/toplinks/help.gif" alt="" title="" />{$lang->toplinks_help}</a></li>
                </ul>
2.
<ul>
                    <li><a href="{$mybb->settings['bburl']}/search.php"><img src="{$mybb->settings['bburl']}/{$theme['imgdir']}/toplinks/search.gif" alt="" title="" /></a></li>
                    <li><a href="{$mybb->settings['bburl']}/memberlist.php"><img src="{$mybb->settings['bburl']}/{$theme['imgdir']}/toplinks/memberlist.gif" alt="" title="" /></a></li>
                    <li><a href="{$mybb->settings['bburl']}/calendar.php"><img src="{$mybb->settings['bburl']}/{$theme['imgdir']}/toplinks/calendar.gif" alt="" title="" /></a></li>
                    <li><a href="{$mybb->settings['bburl']}/misc.php?action=help"><img src="{$mybb->settings['bburl']}/{$theme['imgdir']}/toplinks/help.gif" alt="" title="" /></a></li>
                </ul>

Widzisz różnicę?
(20.09.2009, 13:10)virus4 napisał(a): Chciałabyś aby obok napisu np. Szukaj był jeszcze obrazek tak jak na mybboard.pl czy żeby zamiast napisu Szukaj był tylko obrazek?

Dam kod do obydwu opcji:

1.
<ul>
                    <li><a href="{$mybb->settings['bburl']}/search.php"><img src="{$mybb->settings['bburl']}/{$theme['imgdir']}/toplinks/search.gif" alt="" title="" />{$lang->toplinks_search}</a></li>
                    <li><a href="{$mybb->settings['bburl']}/memberlist.php"><img src="{$mybb->settings['bburl']}/{$theme['imgdir']}/toplinks/memberlist.gif" alt="" title="" />{$lang->toplinks_memberlist}</a></li>
                    <li><a href="{$mybb->settings['bburl']}/calendar.php"><img src="{$mybb->settings['bburl']}/{$theme['imgdir']}/toplinks/calendar.gif" alt="" title="" />{$lang->toplinks_calendar}</a></li>
                    <li><a href="{$mybb->settings['bburl']}/misc.php?action=help"><img src="{$mybb->settings['bburl']}/{$theme['imgdir']}/toplinks/help.gif" alt="" title="" />{$lang->toplinks_help}</a></li>
                </ul>
2.
<ul>
                    <li><a href="{$mybb->settings['bburl']}/search.php"><img src="{$mybb->settings['bburl']}/{$theme['imgdir']}/toplinks/search.gif" alt="" title="" /></a></li>
                    <li><a href="{$mybb->settings['bburl']}/memberlist.php"><img src="{$mybb->settings['bburl']}/{$theme['imgdir']}/toplinks/memberlist.gif" alt="" title="" /></a></li>
                    <li><a href="{$mybb->settings['bburl']}/calendar.php"><img src="{$mybb->settings['bburl']}/{$theme['imgdir']}/toplinks/calendar.gif" alt="" title="" /></a></li>
                    <li><a href="{$mybb->settings['bburl']}/misc.php?action=help"><img src="{$mybb->settings['bburl']}/{$theme['imgdir']}/toplinks/help.gif" alt="" title="" /></a></li>
                </ul>

Widzisz różnicę?
U mnie jest trochę inaczej:
<div align="center"><div style="width:950px; height:199px;">
<table id="Table_01" width="950" height="200" border="0" cellpadding="0" cellspacing="0">

    <tr>
        <td>
            <img src="images/harmony/images/harm_header_01.gif" width="87" height="73" alt=""></td>
        <td>
            <a onmouseover="var img=document['fpAnimswapImgFP1'];img.imgRolln=img.src;img.src=img.lowsrc?img.lowsrc:img.getAttribute?img.getAttribute('lowsrc'):img.src;" onmouseout="document['fpAnimswapImgFP1'].src=document['fpAnimswapImgFP1'].imgRolln" href="javascript:void(0)">
            <a href="http://muzoforus.ugu.pl/portal.php"><img border="0" src="images/harmony/images/1.gif" width="131" height="73" id="fpAnimswapImgFP1" name="fpAnimswapImgFP1" dynamicanimation="fpAnimswapImgFP1" lowsrc="images/harmony/images/1-.gif"></a></a></td>
        <td>
            <a onmouseover="var img=document['fpAnimswapImgFP2'];img.imgRolln=img.src;img.src=img.lowsrc?img.lowsrc:img.getAttribute?img.getAttribute('lowsrc'):img.src;" onmouseout="document['fpAnimswapImgFP2'].src=document['fpAnimswapImgFP2'].imgRolln" href="javascript:void(0)">
            <a href="http://muzoforus.ugu.pl/index.php"><img border="0" src="images/harmony/images/2.gif" width="129" height="73" id="fpAnimswapImgFP2" name="fpAnimswapImgFP2" dynamicanimation="fpAnimswapImgFP2" lowsrc="images/harmony/images/2-.gif"></a></a></td>

        <td>
            <a onmouseover="var img=document['fpAnimswapImgFP3'];img.imgRolln=img.src;img.src=img.lowsrc?img.lowsrc:img.getAttribute?img.getAttribute('lowsrc'):img.src;" onmouseout="document['fpAnimswapImgFP3'].src=document['fpAnimswapImgFP3'].imgRolln" href="javascript:void(0)">
            <a href="http://muzoforus.ugu.pl/misc.php?action=help"><img border="0" src="images/harmony/images/3.gif" width="129" height="73" id="fpAnimswapImgFP3" name="fpAnimswapImgFP3" dynamicanimation="fpAnimswapImgFP3" lowsrc="images/harmony/images/3-.gif"></a></a></td>
        <td>
            <a onmouseover="var img=document['fpAnimswapImgFP4'];img.imgRolln=img.src;img.src=img.lowsrc?img.lowsrc:img.getAttribute?img.getAttribute('lowsrc'):img.src;" onmouseout="document['fpAnimswapImgFP4'].src=document['fpAnimswapImgFP4'].imgRolln" href="javascript:void(0)">
            <a href="http://muzoforus.ugu.pl/vgallery.php"><img border="0" src="images/harmony/images/4.gif" width="130" height="73" id="fpAnimswapImgFP4" name="fpAnimswapImgFP4" dynamicanimation="fpAnimswapImgFP4" lowsrc="images/harmony/images/4-.gif"></a></a></td>
        <td>
            <a onmouseover="var img=document['fpAnimswapImgFP5'];img.imgRolln=img.src;img.src=img.lowsrc?img.lowsrc:img.getAttribute?img.getAttribute('lowsrc'):img.src;" onmouseout="document['fpAnimswapImgFP5'].src=document['fpAnimswapImgFP5'].imgRolln" href="javascript:void(0)">
            <a href="http://muzoforus.ugu.pl/memberlist.php"><img border="0" src="images/harmony/images/5.gif" width="129" height="73" id="fpAnimswapImgFP5" name="fpAnimswapImgFP5" dynamicanimation="fpAnimswapImgFP5" lowsrc="images/harmony/images/5-.gif"></a></a></td>

        <td>
            <a onmouseover="var img=document['fpAnimswapImgFP6'];img.imgRolln=img.src;img.src=img.lowsrc?img.lowsrc:img.getAttribute?img.getAttribute('lowsrc'):img.src;" onmouseout="document['fpAnimswapImgFP6'].src=document['fpAnimswapImgFP6'].imgRolln" href="javascript:void(0)">
            <a href="http://muzoforus.ugu.pl/search.php"><img border="0" src="images/harmony/images/6.gif" width="129" height="73" id="fpAnimswapImgFP6" name="fpAnimswapImgFP6" dynamicanimation="fpAnimswapImgFP6" lowsrc="images/harmony/images/6-.gif"></a></a></td>
        <td>
            <img src="images/harmony/images/harm_header_08.gif" width="86" height="73" alt=""></td>
    </tr>
    <tr>
        <td colspan="8">
            <img src="images/harmony/images/harm_header_09.gif" width="950" height="1" alt=""></td>

    </tr>
    <tr>
        <td colspan="4">
            <img src="images/harmony/images/harm_header_10.png" width="476" height="107" alt=""></td>
        <td colspan="4">
            <img src="images/harmony/images/harm_header_11.gif" width="474" height="107" alt=""></td>
    </tr>
    <tr>
        <td colspan="8">

            <img src="images/harmony/images/harm_header_12.gif" width="950" height="19" alt=""></td>
    </tr>
</table>
</div>
<!-- /logo -->

<div id="container">
        <div id="content">
        <a name="top" id="top"></a>
        <div id="header">
<div id="topbar">
<div class="colorchooser"> <span>Zmień kolor na: </span>
<a href="javascript:ChennaigsmStyle('none')" style="background-color:blue; border-color:#ffffff;"></a>
<a href="javascript:ChennaigsmStyle('black-theme')" style="background-color:#000000; border-color:#ffffff;"></a>
<a href="javascript:ChennaigsmStyle('orange-theme')" style="background-color:orange; border-color:#ffffff;"></a>
<a href="javascript:ChennaigsmStyle('green-theme')" style="background-color:green; border-color:#ffffff;"></a>
</div>
</div>
            <div id="panel">
                {$welcomeblock}
            </div>
        </div>
        <hr class="hidden" />
        <br class="clear" />

            {$pm_notice}
            {$bannedwarning}
            {$bbclosedwarning}
            {$unreadreports}
            <br />
Jak mam to zrobić? Na próbę, chcę zamienić napis "Muzo Forus" na ten obrazek:
[Obrazek: muzoforus2.png]
ścieżka ma wyglądać tak:
images/harmony/menu/muzoforus.png
Po najechaniu myszką:
[Obrazek: muzoforus.png]
ścieżka:
images/harmony/menu/muzoforus2.png
Jeżeli dobrze się orientuje, to js wyglądałby tak:
<a onmouseover="var img=document['fpAnimswapImgFP1'];img.imgRolln=img.src;img.src=img.lowsrc?img.lowsrc:img.getAttribute?img.getAttribute('lowsrc'):img.src;" onmouseout="document['fpAnimswapImgFP1'].src=document['fpAnimswapImgFP1'].imgRolln" href="javascript:void(0)">
            <a href="http://muzoforus.ugu.pl/index.php"><img border="0" src="images/harmony/menu/muzoforus.png" width="131" height="73" id="fpAnimswapImgFP1" name="fpAnimswapImgFP1" dynamicanimation="fpAnimswapImgFP1" lowsrc="images/harmony/menu/muzoforus2.png"></a></a></td>

Jutro dam jeszcze inne buttony na menu, to czy ktoś mógłby mi to poukładać? Mój numer GG, to 4823654.
Jeżeli chcesz aby po najechaniu myszką obrazek zmienił się na inny w CSS musisz użyć efektu rollover.

Nie wiem po co Ci tam JS jak można to dużo łatwiej zrobić za pomocą CSS.



Użytkownicy przeglądający ten wątek:

1 gości