JavaScript tanfolyam

9. rész

Animált gombok, linknél

A látvány lényege annyiból áll, hogy egy területen cserélgetjük a képeket. Jelen esetben a képek szöveget tartalmaznak, a képek annyiban különböznek egymástól, hogy a tintaszín más:

Ennek megvalósításához a JavaScript 1.1 verziót ismerő böngésző szükséges. Ilyenek a  Netscape 3-as vagy a Internet Explorer 4-es verziók.


1. Mivel a window.status változót is feltöltjük és ezt mindegyik böngésző ismeri, elsőként határozzuk meg a böngésző típust, hogy a két eseményt külön kezelhessük.

<script language="JavaScript">
<!---
bongeszo_neve    = navigator.appName;
bongeszo_verzio = parseInt(navigator.appVersion);
ismeri                 = false;
if (bongeszo_neve == "Netscape"  &&  bongeszo_verzio >= 3) ismeri = true;
    else if (bongeszo_neve == "Microsoft Internet Explorer"  &&  bongeszo_verzio >= 4) ismeri = true;

2. Az ablak státuszsorába írandókat is felvehetnénk egy 'hagyományos tömbbe', de mivel ez egy tanfolyam, készítsünk egy objektumot. Az objektum neve a "window_status_obj" lesz, változóit a 'this' kulcsszóval definiáljuk.

function window_status() {
    this[0] = "Bemutatkozás";
    this[1] = "Friss hírek";
}
var window_status_obj = new window_status()

3. Nos ezután jönnek a képcsere függvényekhez szükséges dekralációk.

if (ismeri) {
    image_count = 2;             //menupontok szama
    select_images = new Array(image_count-1);
    select_images.scr = new Array(image_count-1);
    unselect_images = new Array(image_count-1);
    unselect_images.scr = new Array(image_count-1);
     for (var i=0;i<image_count;i++) {
        select_images[i] = new Image;
        unselect_images[i] = new Image;
    }
        unselect_images.scr[0] = "bemut1.gif";
        unselect_images.scr[1] = "friss1.gif";
        select_images.scr[0]     = "bemut2.gif";
        select_images.scr[1]     = "friss2.gif";
}

4. A függvények, melyek a megfelelő egérizgatással aktiválódnak:

function kepen_van(aktualis) {
    window.status=window_status_obj[aktualis];
    if (ismeri) {
        var image_name = "kep" + aktualis;
        document[image_name].src = eval("select_images.scr[aktualis]");
    }
}
 
function keprol_elment(aktualis) {
    window.status="";
    if (ismeri) {
        var image_name = "kep" + aktualis;
        document[image_name].src = eval("unselect_images.scr[aktualis]");
    }
}
//-->
</script>

Először kiíratjuk az ablak státusz sorába a megfelelő szöveget (ha az egér lemegy a képről, akkor egy üres sztringgel töröljük a sort). Az IMAGE elemváltozója (.SCR) tartalmazza a kép címét (nevét), ezt értékeljük ki. Az IMAGE objektumot a JavaScript 1.1 ismeri.

6. A body részben arra ügyeljünk, hogy a képek területe egyforma legyen, s a lap (táblázat) háttérszíne is igazodjon a képekhez. Ne legyen keret, rácsvonal.  Az itt megadott méretek és háttérszínek a jelenlegi példához alkalmazkodnak.

Megjegyzés: a képeket mindig célszerű egy táblázatban cellákba tenni.

<body bgcolor="#FFFFFF">
<table border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<a href="bemutat.htm" target="idetedd" OnMouseOver="kepen_van(
0);return true" OnMouseOut="keprol_elment(0)">
<img src="bemut1.gif" alt="Első menüpont" border="0" width="100" height="20" name="
kep0"></a>
</td>
</tr>
<tr>
<td>
<a href="friss.htm" target="idetedd" OnMouseOver="kepen_van(
1);return true" OnMouseOut="keprol_elment(1)">
<img src="friss1.gif" alt="Második menüpont" border="0" width="100" height="20" name="
kep1"></a>
</td>
</tr>
</table>

Az OnMouseDown -ot is lehet használni, akkor 3 képet cserélgetünk.

OnMouseDown: ha a felhasználó ráklikkel a képre. Amennyiben a return false, akkor nem aktiválódik a kattintás.


Probléma:

Ha a képre rámutatunk, akkor kezdi letölteni a select képet. Erre egyszerű megoldás lenne, a <body onload="start( )">  függvényhívás, melyben a new Image és a document.image.scr = unselect dekralációk szerepelnek.

De ez sajna nem jó megoldás, mert az .scr értékadása olyan ütemben hajtódik végre, ahogy a képek egymás után lejönnek. Namost pl. 3 kép már megvan, és a türelmetlen felhasználó rábök egy olyan képre, ami még nem töltödött le, a böngésző kiakad, mert annak a képnek még nincs (.scr) értéke.

Trükkösen meglehet oldani az öszes kép letöltését, csak éppen addig ugyanazt bámulja a felhasználó. Én a  WEBGraphics Optimizer-t ajánlom.


Innen folytatjuk...