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]](http://noxxerteam.fragowicze.com.pl/upload/files/screen-01-06_574ed2c89b67d.png)
Zmieniało się na np. takie:
![[Obrazek: logo-cat01-06_574ed3ab15ae5.png]](http://noxxerteam.fragowicze.com.pl/upload/files/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
<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.