Poradnik webdesignera
Strona główna
Uwagi ogólne
Błędy
Przykazania
Artykuły
Linki
Słowo od autorki
RUSZANIE OBRAZKAMI
Na wielu stronach można zobaczyć menu, w których grafika zmienia się, gdy najedziemy kursorem na obrazek. Efekt taki można uzyskać w bardzo prosty sposób przy zastosowaniu JavaScript.
Zacząć należy od przygotowania dwóch obrazków. Pierwszy z nich będzie widoczny po załadowaniu się strony, drugi obrazek pokaże się jedynie wtedy, gdy kursor będzie nad obrazkiem:
Możemy tutaj stosować różne ciekawe efekty:
- zmiana barwy napisu;
- zmiana barwy tła przycisku;
- usunięcie cienia spod napisu lub przycisku;
- dodanie cienia pod napis, aby wyeksponować tekst;
- rozjaśnienie aktywnej ikony;
- kilka z powyższych, ale bez przesady, żeby nie zaciemnić obrazu.
Przykłady "bawienia się" efektami można zobaczyć na stronie http://www.kaila.linart.pl
Należy pamiętać, że oba obrazki powinny być jednakowych rozmiarów, ponieważ drugi i tak zostanie powiększony, lub pomniejszony do rozmiarów pierwszego, przez co efekt może być daleki od zamierzonego, jeżeli będą się znacznie różniły rozmiarami.
Skoro grafikę mamy już przygotowaną możemy się zająć skryptem.
Na początek należy wpisać deklarację korzystania z JavaScript do nagłówku
dokumentu (pomiędzy <HEAD> a </HEAD>):
<meta http-equiv="Content-Script-Type" content="text/javascript">
Kod skryptu także umieszczamy w obrębie elementu HEAD.
Nasz skrypt zaczniemy od zabezpieczenia się przed błędami mogącymi wystąpić w starszych wersjach przeglądarek, które nie potrafią obsługiwać tego skryptu ( Netscape Navigator poniżej wersji 3.0 oraz Internet Explorer poniżej 4.0). Oczywiście nie są to już popularne wersje, ale jednak jeszcze spotykane, toteż warto zadbać o ich użytkowników prozaicznie wyłączając działanie skryptu, dzięki czemu strona będzie u nich działała poprawnie.
Poniżej wyjaśnię w skrócie poszczególne elementy kodu. Pełny kod bez komentarzy znajduje się na końcu tekstu.
<script language="JavaScript" TYPE="text/javascript">
<!—
// browser test (test przeglądarek):
browserName = navigator.appName;// sprawdzamy jakiej przeglądarki używa nasz gość
browserVer = parseInt(navigator.appVersion);
// Sprawdzamy jaka jest wersja przeglądarki
version="n2" if (browserName == "Netscape"
&& browserVer >= 3) version = "n3"; if
(navigator.appName.substring(0,9) == "Microsoft" &&
browserVer >= 4) version = "n3"; if (version ==
"n3")// W zależności od wersji ustawiamy sobie zmienną, którą potem
wykorzystamy.
// Roboczo przyjmujemy, że zmienna version ma wartość n2, czyli
pod tą przeglądarką skrypt działać nie będzie.
// Chyba, że przeglądarka jest nowsza. Wtedy zmieniamy wartość
zmiennej na n3 i bierzemy się do dalszej pracy nad skryptem
// Jeżeli sktypt będzie działał deklarujemy parametry grafiki:
{ humor = new Image(141,35);
// obrazek standardowy ma rozmiary width(szerokość)=141 oraz
height(wysokość)=35
humor.src = "humor1.gif";// obrazek standardowy znajduje się w tym samym katalogu co dany
plik html i nazywa się humor1.gif
humor_on = new Image(141,35);// obrazek, który ma się pokazać po najechaniu myszką na
obrazek standardowy ma romiary j.w.
humor_on.src = "humor2.gif";
// obrazek do podmiany znajduje się w tym samym katalogu co dany plik
html
// i nazywa się humor2.gif
texts = new Image(114,79);
texts.src = "gif/texts.gif";
// tutaj obrazek standardowy jest umieszczony w katalogu gif
texts_on = new Image(114,79);
texts_on.src = "gif/texts1.gif";
// obrazek do podmiany jest również umieszczony w katalogu gif
}
// poniżej funkcje zmieniające obrazki - w tym fragmencie kodu nie trzeba wprowadzać żadnych zmian
function img_act(imgName) {
if (version == "n3") {
imgOn = eval(imgName + '_on.src');
document [imgName].src= imgOn
}
}
function img_inact(imgName) {
if (version == "n3") {
imgOff = eval(imgName + ".src");
document [imgName].src= imgOff
}
}
// -->
</script>
Skończyliśmy pisanie skryptu. Teraz zostaje nam tylko podpięcie go w
kodzie strony.
Pogrubione fragmenty to miejsca, w których trzeba dokonać zmian,
wprowadzając własne nazwy odnośników, nazwy plików z grafiką oraz
ich rozmiary.
<img alt="Humor" width="141” height="35" name="humor" src="humor1.gif" border="0"></a>
<a href="htm/texts.htm" onMouseOut="
window.status=''; img_inact('texts'); return true" onMouseOver="window.status='htm/texts.htm';
img_act('texts'); return true">
<img alt="Teksty" width="114" height="79"
name="texts" src="gif/texts.gif" border="0"></a>
Jeżeli skrypt nie zadziała, to pierwszą rzeczą jaką należy sprawdzić to rozmiary grafiki - zarówno w samym skrypcie, jak i w kodzie HTML - muszą być one jednakowe oraz zgodne z rzeczywistymi parametrami.
Kod skryptu z komentarzem, który jest niezbędny do jego darmowego
wykorzystywania:
<script language="JavaScript" TYPE="text/javascript"><!--
// Skrypt autorstwa Agnieszki Richter - http://www.kailastudio.com.pl,
http://www.kaila.linart.pl
browserName = navigator.appName;
browserVer = parseInt(navigator.appVersion);
version="n2"
if (browserName == "Netscape" && browserVer >= 3) version =
"n3";
if (navigator.appName.substring(0,9) == "Microsoft" &&
browserVer >= 4) version = "n3";
if (version == "n3") {
humor = new Image(141,35);
humor.src = "humor1.gif";
humor_on = new Image(141,35);
humor_on.src = "humor2.gif";
texts = new Image(114,79);
texts.src = "gif/texts.gif";
texts_on = new Image(114,79);
texts_on.src = "gif/texts1.gif";
}
function img_act(imgName) {
if (version == "n3") {
imgOn = eval(imgName + '_on.src');
document [imgName].src= imgOn
}
}
function img_inact(imgName) {
if (version == "n3") {
imgOff = eval(imgName + ".src");
document [imgName].src= imgOff
}
}
// -->
</script>
Artykuł został także zamieszczony na stronie Webreportera http://web.reporter.pl/
w numerze 12/2001