Strona główna » Poradniki » Blogger » Kilkuobrazkowy Baner
 

Kilkuobrazkowy Baner

https://mattomatti.com/br01

Wstęp

Niniejszy artykuł przedstawia w jaki sposób umieścić na stronie niezmienne logo ze zmieniającym się tłem. Obrazek w tle będzie zmieniać się co 10 sekund (ale oczywiście będzie można zmienić). Co najważniejsze rozwiązanie jest oparte całkowicie na javascript, a nie dodatkowych dodatkach. Czyni to rozwiązaniem, które zadziała w każdej przeglądarce.

Krok po kroku

Chociaż proces ten jest całkowicie bezpieczny. Warto przed przystąpieniem do prac wykonać kopię zapasową szablonu!

Obiekt img

Taki baner / nagłówek możemy umieścić w dowolnym miejscu. Żeby znalazł się na stronie zamiast nagłówka należy znaleźć w szablonie obiekt div o id header-inner. Żeby tego dokonać wystarczy Wcisnąć Ctrl+F, wpisać header-inner i wcisnąć ENTER. Następnie w środku obiektu div wstawiamy:

  1. <img id="photoDisplay" onclick="nextPhoto();" src="" style="margin:0px auto;display:block; background-image: url();" border="0" />

Jednak, aby jako nagłówek był specjalny baner należy dodać style="display:none" do obiektu, który już tam był. Prostszym rozwiązaniem będzie ustawić, aby nagłówek na stronie się nie wyświetlał z poziomu układu.

Kod javascript

Następnym etapem jest dopisanie kodu javascript na stronie. W Bloggerze można go dodać w zakładce Układ. Następnie w grupie np. Main dodać gadżet HTML/JavaScript. W nowym oknie zamiast w polu Tytuł sugeruje wpisać header (lub coś innego sensownego). Jako treść należy wkleić poniższy kod:

  1. <script>
  2. var a = 0;
  3. var lista = [];
  4. loadPhoto();
  5. function nextPhoto(){
  6.  a++;
  7.  if(a == lista.length){a = 0;}
  8.  loadPhoto();
  9. }
  10. function loadPhoto(){
  11.  document.getElementById("photoDisplay").style.backgroundImage = "url(" + lista[a] + ")";
  12. }
  13. var t=setInterval("nextPhoto();",10000);
  14. </script>

(2.) Ustalamy, które zdjęcie wyświetlamy (w informatyce pierwsze jest 0). (3.) Ustalamy listę zdjęć do wyświetlenia tj. adresu url zdjęć. Każdy adres zapisujemy w cudzysłowach " ", a kolejne adresy rozdzielamy przecinkiem. Przykładowo ["url1", "url2"]. (4.) Ładujemy zdjęcie. (5.) Funkcja nextPhoto(): (6.) zwiększa indeks wybranego zdjęcia, (7.) jeśli nie ma więcej elementów to wracamy do pierwszego. Ostatnie polecenie (8.) aktualizuje zdjęcie. (10.) Funkcja loadPhoto(): (11.) Ładuje zdjęcie do pola photoDisplay, które wcześniej dodaliśmy do szablonu. (13.) Ustalamy co ile ma się zmieniać obrazek w tle: tutaj 10000 oznacza co ile milisekund, dlatego do wartości w sekundach należy zawsze dopisać trzy zera.

Zdjęcia

Potrzebujemy teraz uzupełnić kod i obiekt właściwymi adresami url. W tym celu warto utworzyć nowy post i przesłać do niego zdjęcia. Potem kopiujemy adresy url wstawionych zdjęć. Następnie należy zmienić w szablonie wartość src obiektu photoDisplay (który dodawaliśmy) na obrazek, który ma być stałą częścią logo. Przykładowo może to być napis z przezroczystym tłem. Można to osiągnąć przesyłając na serwer zdjęcie w formacie *.png. Zdjęcia, które mają być w tle mogą być przesłane w dowolnym formacie. Ich adresy wpisujemy w kodzie javascript, który znajduje się w dodanym wcześniej gadżecie.

Teraz zamiast nagłówka powinien znaleźć się nagłówek ze zmieniającym się tłem.