Grafika w JavaScript

W tym artykule zajmiemy się jedynie możliwościami wyświetlenia w przeglądarce gotowych plików graficznych, a w szczególności odczytem właściwości grafiki i możliwością podmiany grafiki (efekt rollover). Samo tworzenie grafiki, animacje i efekty będą omawiane w oddzielnym kursie poświęconym HTML5 Canvas.

Odwołanie do grafiki na stronie

Możemy na wiele sposobów odwołać się do konkretnej grafiki na stronie. Oto kilka sposobów:

poprzez getElementById - jeżeli nasza grafika w kodzie HTML ma przypisany atrybut id, to możemy zadeklarować zmienną, zawierającą referencję do naszej grafiki poprzez var grafika = document.getElementById('nazwa_id'); Możemy też użyć metod getElementByTagName, querySelector lub querySelectorAll (opisane pod tym samym linkiem co metoda getElementById).
poprzez kolekcję - var grafiki = document.images.

Podmiana obrazków - efekt rollover

Ten efekt najlepiej realizować za pomocą CSS. JavaScript umożliwia jednak również taką możliwość.

Aby zastosować efekt rollover potrzebujesz dwa obrazki: jeden, który będzie wyświetlany domyślnie, drugi, gdy najedziesz wskaźnikiem myszy, ewentualnie osobna grafike dla kliknięcia. Powyższe można zrealizować w następujący sposób:

Przykład 1 - Podmiana obrazka - prosta metoda

To prosta i mało wydajna metoda podmiany obrazka w zależności od zajścia różnych zdarzeń. Kod JavaScript umieszczony jest wewnątrz znacznika HTML.

Najedź myszką na poniższy obrazek i kliknij na nim przyciskiem. Obsługiwane są tu zdarzenia onMouseOver, onMouseOut oraz onClick.

Podstawowa wada tego rozwiązania jest taka, że obrazki num2.jpg i num3.jpg są wczytywane z serwera dopiero w momencie zajścia zdarzenia onMouseOver i onClick, co prawdopodobnie dla wolniejszych łączy spowoduje opóźnienie w działaniu.

<img src="informatyka/grafika/num1.jpg" width="258" height="246" alt="obraz1" name="obraz" onMouseOut="this.src='informatyka/grafika/num1.jpg'" onMouseOver="this.src='informatyka/grafika/num2.jpg'"; onClick="this.src='informatyka/grafika/num3.jpg'" />

obraz1

Lepiej jest jednak wczytać do pamięci wszystkie grafiki i dopiero wówczas wyswietolać je w odpowiednim momencie.

Przykład 2 - Podmiana obrazka - efekt rollover z wcześniejszym załadowaniem grafiki do bufora przeglądarki

Aby załadować do pamięci przeglądarki obrazki zanim zostaną wyświetlone na stronie, wystarczy je załadować do zmiennych. Już dla trzech obrazków warto użyc tablic, ale dla przejrzystości kodu tutaj tego nie zrobiłem.

Najpierw sprawdzamy, czy przeglądarka obsługuje obiekt images, następnie deklarujemy zmienne typu Image i przypisujemy im grafiki ze ścieżkami dostępu do nich. Potem wyszukujemy element strony z obrazkiem, do którego przypisujemy zdarzenia, w których to podmieniamy źródła grafik.

Oczywiście aby kod działał, na stronie musi się znajdować obrazek z atrybutem id="obrazek".

Oto cały kod:

<script>
if (document.images) {
var obrazek1 = new Image;
var obrazek2 = new Image;
var obrazek3 = new Image;
obrazek1.src = 'informatyka/grafika/num1.jpg';
obrazek2.src = 'informatyka/grafika/num2.jpg';
obrazek3.src = 'informatyka/grafika/num3.jpg';

var img = document.getElementById('obrazek');
img.addEventListener('mouseout', function() {this.src = obrazek1.src});
img.addEventListener('mouseover', function() {this.src = obrazek2.src});
img.addEventListener('click', function() {this.src = obrazek3.src});
}
</script>

obraz1