Webboard

Pełna wersja: Zmieniające się logo
Aktualnie przeglądasz uproszczoną wersję forum. Kliknij tutaj, by zobaczyć wersję z pełnym formatowaniem.
wersja skryptu MyBB: 1.8.7
adres forum: http://noxxerteam.fragowicze.com.pl/index.php
na czym polega problem (screen, opis, komunikaty, nazwa stylu/theme/szablonu):

A więc chciałbym zrobić tak aby to logo po najechaniu na nie:

[Obrazek: screen-01-06_574ed2c89b67d.png]

Zmieniało się na np. takie:
[Obrazek: logo-cat01-06_574ed3ab15ae5.png]
A po zdjęciu z niego kursora wracało do swojej poprzedniej postaci

----------
Okej, dzięki, ale jak zrobić aby działało to z tym kodem?


Kod:
<div id="container">
        <a name="top" id="top"></a>
        <div id="header">
            <div id="logo">
                          <div class="wrapper">
            <a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" ></a>
                  </div>
            </div>

                      <div id="panchor"></div>

            <div id="panel">
                <div class="upper">
                    <div class="wrapper">
                        {$welcomeblock}
                    <!-- </div> in header_welcomeblock_member and header_welcomeblock_guest -->
                <!-- </div> in header_welcomeblock_member and header_welcomeblock_guest -->

            </div>
        </div>
        <div id="content">
            <div class="wrapper">
                    {$bbclosedwarning}
                    {$unreadreports}
                    {$bannedwarning}
                    {$pending_joinrequests}
                    {$awaitingusers}

<navigation>        

<br />
Zdarzenia onmouseoveri onmouseout dla tagu img z logo.
Nie bardzo wiem co to znaczy ^^
Jestem początkujący w te klocki, to jest moje pierwsze forum które tworzę od podstaw

Prosiłbym o napisanie całego kodu i wytłumaczenie krok po kroku co zmienia dany argument/zdarzenie/etc.
Zdarzenie onmouseoverjest wywoływane, gdy kursorem najedziemy na trzymany przez nas element. W tym przypadku chcemy, aby był złapany tag img z logo, a więc dodamy do niego owe zdarzenie.

A więc twój obecny tag img, który wygląda tak:
Kod:
<img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" >
zamieniamy na taki, który będzie zawierał interesujące nas zdarzenie, tj.:
Kod:
<img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" onmouseover="this.src='tutaj_link_do_grafiki'">

Sama zamiana już działa, ale gdy kursor opuści nasz obrazek, to logo ciągle pozostaje to samo. Aby zamienić ja ponownie na domyślne użyjemy onmouseout.
Robimy analogicznie jak z onmouseover, a więc kod będzie wyglądał tak:
Kod:
<img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" onmouseover="this.src='tutaj_link_do_grafiki'" onmouseout="this.src='{$theme['logo']}'">
Napisanie całego kodu to bardziej pod dział "giełda".
Tłumaczenie całego kodu - to poradniki w necie. Naprawdę nie opiszemy danego zdarzenia dokładniej, niż zostało to zrobione milion razy w necie, a skoro tworzysz forum to niezbędna jest umiejętność używania wyszukiwarki i próbowania do skutku - w przeciwnym wypadku, gdy nie masz na to ochoty, po prostu zleć komuś tą pracę i zapłać.

Z tego co podał divir - po wpisaniu w google pierwszy wynik:
http://www.w3schools.com/jsref/event_onmouseover.asp

Od razu jest dostępny przykład, który idealnie obrazuje działanie zdarzenia.
http://www.w3schools.com/jsref/tryit.asp...nmouseover

Przeanalizuj to na spokojnie i bez problemu powinieneś zrozumieć co i jak.
Dodam, że inne style możesz tam zastosować analogicznie do tych użytych, np. x.style.background = "url('link')"
Okej dzięki ^^ już rozumiem :D
<a href="{$mybb->settings['bburl']}/index.php">



Kod PHP:
<img src="{$theme['logo']}alt="{$mybb->settings['bbname']}title="{$mybb->settings['bbname']}// to powoduje że logo "początkowe" jest brane z serwera (flatty)
onmouseover="this.src='http://noxxerteam.fragowicze.com.pl/upload/files/logo-cat01-06_574f1e7ed22d6.png'" // to powoduje że jak najadę myszką na logo to bierze ono obraz z linku 

onmouseout="this.src='{$theme['logo']}'"></a // 
to powoduje że jak zjadę myszką z loga to ono wraca do "poprzedniej" wersji


Rozumiem że  x.style.background = "url('link')" używam podobnie? A zresztą sobie to przetestuję ^^ Dzięki !
Kod dawaj w tagi odpowiednie bo w takiej formie jest kompletnie nieczytelny.
Musisz pamiętać o załączeniu skryptu jeszcze - w przykładzie go masz.