Bartek Medoń – blog|Blog Bartka Medonia dotyczący informatyki, ale nie tylko…

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 :

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.