Lekcja 13

Efekt RollOver w JS

1. bitmapy
2. rollover 1
3. rollover 2

Bitmapy w canvas
Potrafimy rysować geometryczne obiekty w obszarze canvas za pomocą linii, prostokątów, łuków i przeprowadzać na nich skomplikowane obliczenia niezbędne do ich animowania. Do obszaru canvas można również wczytać dowolne grafiki bitmapowe. Na początku zajmiemy się tzw. efektem rollover, czyli zamianą jednego obrazka na inny po najechaniu (onmouseover) i zjechaniu (onmouseout) wskaźnikiem oraz po wciśnięciu (onmousedown) i puszczeniu (onmouseup) przycisku myszki. 

Najbardziej standardowa jest instrukcja dokument.getElementById, ale nowe wersje przeglądarek z powodzeniem reagują na bezpośrednie odwołanie do elementu za pomocą this lub poprzez odwołanie do zdefiniowanego ID.

<!-- getElementById -->
<img id="zso" src="zsologo0.jpg" width=150
  onmouseover=document.getElementById("zso").src="zsologo2.jpg"
  onmouseout=document.getElementById("zso").src="zsologo0.jpg"
  onmousedown=document.getElementById("zso").src="zsologo1.jpg"
  onmouseup=document.getElementById("zso").src="zsologo0.jpg">

<!-- this  -->
<img src="zsologo0.jpg" width=150
  onmouseover=this.src="zsologo2.jpg" 
  onmouseout=this.src="zsologo0.jpg"
  onmousedown=this.src="zsologo1.jpg" 
  onmouseup=this.src="zsologo0.jpg">

<!-- id działa -->
<img src="zsologo0.jpg" id="zso1" width=150
  onmouseover=zso1.src="zsologo2.jpg" 
  onmouseout=zso1.src="zsologo0.jpg"
  onmousedown=zso1.src="zsologo1.jpg"	
  onmouseup=zso1.src="zsologo0.jpg">

<!-- JS -->  
<img src='zsologo0.jpg' id='zso2' width=150>
<script>
  var img1=new Image();
  img1.src='zsologo1.jpg ';
  var img2=new Image();
  img2.src='zsologo2.jpg ';
  zso2.onmouseover=function() {zso2.src='zsologo2.jpg';}
  zso2.onmouseout=function() {zso2.src='zsologo0.jpg';}
  zso2.onmouseup=function() {zso2.src='zsologo0.jpg';}
  zso2.onmousedown=function() {zso2.src='zsologo1.jpg';}
</script>

Ostatnia wersja efektu rollover przygotowana została w oparciu o JS i funkcje wywoływane zdarzeniami. Najpierw wyświetlamy grafikę za pomocą znaczników HTML.  Następnie tworzymy w pamięci miejsce na obrazek New Image(). Za pomocą funkcji onmous i kolejnych podmieniamy obrazki. Obrazek podstawowy zsologo0.jpg posiada parametr ID równy zso. Za pomocą tego parametru odwołujemy się do obrazka i z jego pomocą konstruujemy funkcje.

Menu rollover
Jeśli mamy do załadowania więcej obrazków, najlepiej posłużyć się tablicą. Wszystkie grafiki w poniższym przykładzie mają dwie litery w nazwie i znajdują się w folderze OBRAZKI. Grafiki do podmiany mają dodatkowo w nazwie znaczek „_”.

Kod w HTML, który realizuje efekt rollover dla pojedynczego obrazka (cd.gif) pokazany w ramce.

<img src='obrazki/cd.gif' id=cd width=50 
  onmouseover=this.src='obrazki/cd_.gif'
  onmouseout=this.src='obrazki/cd.gif'>

Program właściwy podmienia nazwy obrazków w pętli pobierając je z tablicy Tnaz. Tworząc kod w JS powinieneś pamiętać, że apostrofy (') tworzą wewnętrzną strukturę tekstów – kod HTML, a cudzysłów (") wstawiamy gdy chcemy oddzielić lub połączyć kod HTML w większe fragmenty. W praktyce na początku i na końcu kody dodajemy cudzysłów oraz wszystkie nazwy obrazków podmieniamy na "+Tnaz[i]+". Kod w HTML może być w kilku wierszach i strona działa poprawnie. Tworząc kod w JS cały wiersz musi być w jednym akapicie.

<script>
  var Tnaz = new 
  Array('cd','dr','fd','hd','gr','mu','kl','md','mo','my','pa','pl','po','pr','sk');
  for (var i=0; i<Tnaz.length; i++) {
    document.write(
    "<img src='obrazki/" + Tnaz[i] + ".gif' id=" + Tnaz[i] + " width=50 " + 
    "onmouseover = this.src='obrazki/" + Tnaz[i] + "_.gif' " + 
    "onmouseout = this.src='obrazki/" +  Tnaz[i] + ".gif'>");
  }
</script>

Wczytanie grafik to tablicy przed ich wyświetleniem na stronie
Menu działa doskonale, ale może zdarzyć się, że strona „zawiesi się”, bo zajęta będzie wczytywaniem grafik. Co prawdziwy programista może zrobić? – wczyta najpierw wszystkie obrazki do tablic, a potem ich będzie używał. Tablica Tnaz będzie zawierała nazwy obrazków, a tablica Tobr (dwuwymiarowa) będzie zawierała wczytane grafiki. W elemencie zerowym główny obrazek, w kolejnym obrazek do podmiany.

Ładowanie obrazków do tablicy
Deklarujemy tablicę Tnaz i wstawiamy do niej nazwy obrazków (bez rozszerzeń). Następnie deklarujemy tablicę jednowymiarową Tobr. Do każdego elementu tablicy Tobr wstawiamy pustą tablicę aby powstała tablica dwuwymiarowa. Element zerowy każdej komórki tablicy Tobr[i][0] zawiera nazwę obrazka podstawowego, a element z numerem jeden tablicy Tobr[i][1] zawiera obrazek do podmiany.

<script>
var Tnaz = new Array( 'cd','dr','fd','hd','gr','mu','kl','md','mo','my','pa','pl','po','pr','sk');
var Tobr=new Array();
for (i=0; i<Tnaz.length; i++) {
  Tobr[i] = new Array(); 
  Tobr[i][0] = new Image();
  Tobr[i][0].src='obrazki/'+Tnaz[i]+'.gif';
  Tobr[i][1] = new Image();
  Tobr[i][1].src='obrazki/'+Tnaz[i]+'_.gif'
}

//tutaj kod wyświetlania obrazków


//tutaj kod obsługi zdarzeń - rollover

</script>

Wyświetlanie obrazków
Wyświetlamy obrazki na stronie tworząc odpowiedni kod HTML. Kod dla pierwszego obrazka:
<img src=obrazki/cd.gif id=cd width=50>
Wszystkie nazwy będą podlegać podmianie w pętli, która utworzy na stronie 15 linijek ze znacznikami wyświetlającymi obrazki.

//kod wyświetlania obrazków
for (i=0; i<Tnaz.length; i++) {
  document.write(
  '<img src=obrazki/' +  
  Tnaz[i] + '.gif' + ' id=' + 
  Tnaz[i] + ' width=50>');
}

Efekt rollover
Przypisanie odpowiednich funkcji do obrazków również zrealizujemy za pomocą pętli. Do ID konkretnego obrazka musimy przypisać dwie funkcje. Z tablic pobieramy nazwy obrazków, odwołanie do obrazków realizujemy za pomocą metody getElementById, a identyfikator klikniętego obrazka sprawdzamy metodą target.id.

//kod obsługi zdarzeń - rollover
for (var i=0; i<Tnaz.length; i++) {
  document.getElementById(Tnaz[i]).onmouseover=function(e){
    this.src='obrazki/'+e.target.id+'_.gif';
}
  document.getElementById(Tnaz[i]).onmouseout=function(e) {
    this.src='obrazki/'+e.target.id+'.gif';
}

UWAGA. W tym przypadku nie pomaga odwołanie się bezpośrednio do parametru ID (stan na rok 2018) – być może zostanie to zrealizowane w nowej wersji przeglądarki.