Zmieniające się logo

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:



Zmieniało się na np. takie:

A po zdjęciu z niego kursora wracało do swojej poprzedniej postaci

----------

http://webkod.pl/kurs-css/selektory/pseu...o-elementu

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

<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:

<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.:

<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:

<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
<a href="{$mybb->settings['bburl']}/index.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 !

Szogi1910 napisał 01.06.2016, 19:27:
Kody html/css itp dodajemy w tagach [code]/[php]

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.