Zmieniające się okienka reklamowe

Zapewne wielu z Was kojarzy choćby stroną Wirtualnej Polski. Wchodząc na ów stronę widzimy mniej więcej na środku ekranu box reklamowy gdzie co parę sekund zmienia się element reklamowy czyli po prostu obrazy z odsyłaczami. Na pierwszą myśl wielu przychodzi na myśl technologia Flash jednak wystarczy kliknąć prawym przyciskiem myszy, aby przekonać się, że standardowe menu pliku swf się nie pokaże, a zamiast tego zwykłe menu podręczne przeglądarki. Wiadomo więc, że mamy do czynienia z użyciem języka JavaScript.

Skoro mamy do czynienia ze zmianą zawartości jakiegoś elementu bez przeładowania strony co kilka sekund to łatwo się domyślić, że używane jest do tego zdarzenie czasowe. W JavaScript jest to oczywiście funkcja setTimeout.

Chciałbym tutaj przedstawić proste rozwiązanie jak taki skrypt wykonać czyli zmieniające się obrazki w raz z nawigowaniem po nich (łącza 1,2,3,4) jednak zanim to nastąpi przedstawię proste rozwiązanie gdzie po prostu 4 obrazki zmieniają się w czasie.

Tak więc mamy prosty kod CSS :

div.okienko {
  width:560px;
  height:230px;
}
div.okienko IMG {
  border:0px;
}

Element o klasie okienko to oczywiście pewien kontener, w którym zmieniać będą się nasze obrazy. Zanim przedstawię kod JavaScript to taki oto kod powinien się znaleźć w kodzie strony :

W folderze o nazwie graficzki powinny zostać umieszczone 4 pliki o nazwa 1.jpg, 2.jpg itd. Zauważ, że standardowo na starcie obraz w naszym kontenerze odnosi się do pierwszego z obrazów i pierwszego z odnośników. Popatrzmy więc na kod JavaScript :

window.onload = okienka;
var obrazki = new Array("graficzki/1.jpg","graficzki/2.jpg","graficzki/3.jpg","graficzki/4.jpg");
var linki = new Array("http://www.bmedon.net","http://www.blog.bmedon.net","http://www.mp3-pobierz.pl","http://www.adamekvsgolota.pl");
var ile = obrazki.length;
var i = 0;
var ink = 0;
function okienka()
{
	if ( ile != null )
	{
		if(window.document.zmienny_obrazek)
		{
      		ink = i++;
			window.document.zmienny_obrazek.src = obrazki[ink];
			window.document.getElementById("zmienny_link").setAttribute("href",linki[ink]);
			if ( i > ile-1 )
			{
				i=0;
			}
		}
		setTimeout("okienka()",3500);
	}
}

Kod ten jest bardzo prosty, a wytłumaczenie bardzo podobnego przykładu znajdziesz w moim kursie JavaScript. Wszystko działa jak powinno jednak nie mamy paska nawigacja gdzie można by przełączać się między obrazkami zarówno wstecz jak i do przodu.

Tutaj sprawa troszkę się komplikuje ponieważ po każdym kliknięciu należałoby zmieniać odpowiednią zmienną, od której zależy jaki następny obrazek ma się wyświetlać. Niby proste, ale trzeba również zapanować nad zdarzeniem czasowym – nie można tak po prostu go „pozostawić”, bo nie skrypt nie będzie odpowiednio działał i w nieodpowiednich odstępach czasowych zmieniał reklamę po kliknięciu. Również przy nieodpowiednim nadzorze mogłoby dojść do pewnego zdublowania zdarzenia czasowego. Nie mniej popatrzmy na prawidłowego rozwiązanie.

Kod CSS :

div.okienko {
  width:560px;
  /*height:230px;*/
  border:Solid 1px #ccc;
}
div.okienko IMG {
  border:0px;
}
div.nawigacja {
  background:#000;
  color:#fff;
  display:block;
  text-align:center;
}
div.nawigacja a {
  text-decoration:none;
  color:#fff;
  font-family:Tahoma;
  font-size:10pt;
  font-weight:bold;
  padding-left:3px;
  padding-right:3px;
}
div.nawigacja a:hover {
  background:#fff;
  color:#000;
}
.red {
  background:red;
}

Kod html :

1 2 3 4

Jak widać podczas kliknięć w elementy nawigacyjne będziemy korzystać z funkcji ustaw. Jak wiesz korzystanie ze zdarzeń w ten sposób nie jest zgodne z DOM i porządnym programowaniem w JS. Chociaż uważam, że czasem można sobie na to pozwolić – mimo to jeszcze do tego wrócę.

Popatrzmy na zmodyfikowany znacznie kod JavaScript :

window.onload = okienka;
var obrazki = new Array("graficzki/1.jpg","graficzki/2.jpg","graficzki/3.jpg","graficzki/4.jpg");
var linki = new Array("http://www.bmedon.net","http://www.blog.bmedon.net","http://www.mp3-pobierz.pl","http://www.adamekvsgolota.pl");
var ile = obrazki.length;
var i = 0;
var ink = 0;
var odliczanie;
function okienka()
{
	if ( ile != null )
	{
		if(window.document.zmienny_obrazek)
		{
      		ink = i++;
      		ustaw(ink,0);
			if ( i > ile-1 )
			{
				i=0;
			}
		}
		odliczanie = setTimeout("okienka()",3500);
	}
}
function ustaw(indeks,click)
{
	window.document.zmienny_obrazek.src = obrazki[indeks];
	window.document.getElementById("zmienny_link").setAttribute("href",linki[indeks]);
	for(var x=0;x<4;x++)
	{
    	if (x == indeks)
    	{
      		window.document.getElementById(indeks).className = "red";
    	}
    	else
    	{
      		removeClass(window.document.getElementById(x),"red");
    	}
	}
	if (click == 1)
  	{
    	clearTimeout(odliczanie);
    	i = indeks;
    	okienka();
  	}
}

Dodatkowo skorzystamy z dwóch funkcji związanych z posiadaniem przez element danej klasy – funkcje to pochodzą z tej strony :

function hasClass(ele,cls) {
	return ele.className.match(new RegExp('(\s|^)'+cls+'(\s|$)'));
}
function removeClass(ele,cls) {
	if (hasClass(ele,cls)) {
		var reg = new RegExp('(\s|^)'+cls+'(\s|$)');
		ele.className=ele.className.replace(reg,' ');
	}
}

I to wszystko :) Kod nie jest jednak idealny i jak wspomniałem korzysta z przypisania zdarzeń do linków nawigacyjnych starą metodą. Niebawem przedstawię rozwiązanie zmodyfikowane, ulepszone o elementy takie jak :
1). Kod JavaScript napisany obiektowo
2). DOM’owe korzystanie ze zdarzeń
3). Dodatkowe pole na obrazkach ładujące odpowiedni zmienny tekst

Jeśli ktoś miałby problemy ze zrozumieniem przedstawionego kodu, który trudny nie jest jednak wiadomo, że każdy z Nas kiedyś uczył się od zera to proszę napisać w komentarzu. Chętnie wszystko wyjaśnię od podstaw :)

I na koniec działanie omówionego przykładu można zobaczyć na stronie wspominanego kursu języka JavaScript.

VN:F [1.9.22_1171]
Rating: 4.0/5 (2 votes cast)
VN:F [1.9.22_1171]
Rating: +1 (from 1 vote)
Zmieniające się okienka reklamowe, 4.0 out of 5 based on 2 ratings

13 przemyśleń nt. „Zmieniające się okienka reklamowe

  1. hasClass i removeClass są standardowo w jQuery, natomiast brakuje tutaj jeszcze obsługi zdarzeń tylko z poziomu js (DOM), a konkretnie mam na myśli onclick przy linkach.

    Tak w ogóle fajny tekst w raw js :) .

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  2. Napisałem o tym w treści tzn. o tych zdarzeniach – napiszę kolejny wpis gdzie całość zrobię obiektowo i zdarzenia będą tylko i wyłącznie przez listenery ;)

    VN:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VN:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  3. Jeszcze oprócz flesza może przyjść na myśl javaFX ;-P

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  4. Racja, racja jak najbardziej napisałem o Flashu, bo to najpopularniejsza z technologii związanych z animacjami na WWW :)

    VN:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VN:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  5. Hej. Skrypt działa poprawnie. Bardzo mi się przydał. Dzięki.

    Wiek ktoś może jak przy jednoczesnej zmianie obrazka, zrobić zmieniający się opis – biały na czarnym tle, który również będzie hiperłączem?

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  6. Witaj!
    Trzeba by zrobić jakiegoś DIVa albo w sumie element „p” wystarczy i przy zmianie obrazka wpisywać do niego dany tekst przez innerHTML (zgodnie z DOM createTextNode, appendChild itp.) czyli cały kod linka. Albo zrobić w p link i przy zmianie obrazka zmieniać jego atrybut href oraz tekst. Można też kombinować w ten sposób, że wszystkie te teksty będą docelowo w kodzie strony, a tylko przy zmianie obrazka aktywny element np. div będzie ukrywany, a pokazywany będzie inny z tekstem, który akurat chcemy wyświetlić.

    VN:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VN:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  7. Witam.
    Bardzo przydatny tekst, wszystko działa, mam tylko pytanie, może dla niektórych banalne, czy jest możliwość aby linki otwierały się w tym samym oknie, karcie a nie w nowej ??

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  8. Naprawdę bardzo fajny skrypcik. Polecam :)

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  9. Fajny skrypt. Oczywiście największy mankament taki, że nie chodzi w IE. No i mnie coś tam nie pasuje graficznie, ale to już takie moje zboczenie ;) pozdrawiam

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  10. Witaj Jowi,
    jaka wersja IE ? Sprawdzałem na 7 czy 8 i nie było problemu :) Graficznie skrypt jak zauważyłeś nie jest wybitny, ale nie o to tutaj chodziło, a o pokazanie jak coś zrobić ;)

    Fajny slider w jQuery zrobił np. ostatnie komentujący mnie Logos – :)

    Pozdrawiam i dzięki za komentarz !

    VN:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VN:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  11. Zwracam honor – chodzi w ósemce, tylko durna przeglądarka zablokowała mi skrypty „myśląc” że to niebezpieczne.;) Właśnie próbuję coś zmienić, ale wybitnie mi to nie wychodzi. Nie ma się co dziwić – nigdy nie bawiłam się js. Dzięki bardzo bardzo, faktycznie jQuery zrobił to nieźle!

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  12. Wybitna strona ! Pozdrowionka :)

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *


jeden − = 0

Możesz użyć następujących tagów oraz atrybutów HTML-a: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>