IMG tag Light effekttel

Ez a script a böngészöbe ágyazott effektek közül a light effekttel operál. Ennek hatására azon <IMG> tagok, amik id-ja spotlight (<img src="spider.jpg" id="spotlight">), teljesen elfeketednek, majd ha az egér föléjük megy, egy 'fejfénnyel' megvilágítódnak. Nézzük hogy is érjük el ezt.

Müködésröl röviden:
A <BODY> onLoad()-ja akkor hívódik meg, mikor az egész oldal teljesen betöltödött. Ekkor meghívja a InitLights() függvényt, ami végiggmegy az összes spotlight "id"-ju objektumon, eltárolja azok aktuális x, y pozicióját, majd az objektum közeppontjára kitesz egy elmozdítható fényforrást a addPoint() függvénnyel. Miután ezekkel végzett, ráköti az onMouseMove() eseménykezelöre a move()-ot, a onScroll()-ra meg a scroll()-t, amik ezáltal mindig meghídnak majd, ha az egér megmozdul, ill. ha scrollozunk egyett az ablakon.
A scroll() semmi mást nem csinál, mint meghívja a slidelight() függvényt annyiszor, amennyi spotlight "id"-ju objektum van, egyesével növekvö bemeneti paraméterrel.
A move() ugyanezt csinálja, csak a függvényhívás elött eltárolja az egér aktuális pozicióját.
És végül a slidelight() függvény annyit tesz mindössze, hogy kiszámolja, hogy mennyit scrolloztunk le/fel az ablakban, majd ezzel az értékkel modósitva az elözöleg a move() által eltárolt x, y koordinátákat, meghívja a MoveLight()-ot, ami fényforrás helyét átja.

Rövid leirás a Light filter tagfüggvényeiröl:

AddAmbient
Egyszerü fényforrás létrehozására szolgál. Az így létrehozott fényforrás nem mozdítható.

szintaxis:

R - (0-255) a piros összetevö az RGB hármasból.
G - (0-255) a zöld összetevö az RGB hármasból.
B - (0-255) a kék összetevö az RGB hármasból.
I - (0-100) a fény intenzitása

AddCone
Egy olyan féforrást hoz létre, ami leginkább egy kúpra hasonlít. Tehát egy pontból indúl ki, és a paraméterlistában megadott szögnek megfelelöen (ami a kúp csúcsszögének felel meg) szóródik a fény. Mind az alap-, mind a középvonal koordinátája elmozdítható.

szintaxis:

x1,y1,z1 - a fényforrás x, y, z koordinátája.
x2,y2 - x, y koordináta, amin a 'fénykúp' középvonala áhalad (z2=0).
R - (0-255) a piros összetevö az RGB hármasból.
G - (0-255) a zöld összetevö az RGB hármasból.
B - (0-255) a kék összetevö az RGB hármasból.
I - (0-100) a fény intenzitása.
S - (0-90) mekkora legyen a 'kúp' csúcsszöge (fokban megadva)

AddPoint
Ez egy elmozdíható "ambient" lámpát hoz létre.

szintaxis:

x,y,z - a lámpa x, y és z koordinátája, ahol az z koordináta azt adja meg, hogy a lámpa milyen magasan legyen a kép sikjától.
R - (0-255) a piros összetevö az RGB hármasból.
G - (0-255) a zöld összetevö az RGB hármasból.
B - (0-255) a kék összetevö az RGB hármasból.
I - (0-100) a fény intenzitása.

ChangeStrength
Akkor kell használni, ha meg akarjuk változtatni az elözöekben mar lérehozott lámpa fényerejét.

szintaxis:

LN - (0-9) az indexe a már létezö lámpának, aminek meg akarjuk változtatni a fényerejét.
I - (0-100) a fény intenzitása.
fA - (true vagy false):
- true - a fényeröt lecseréli az ujra.
- false - a fényeröt növeli ill. csökkenti az új értékkel, attól függöen, hogy az új érték pozitív vagy negatív.

ChangeColor
Ha az elözöekben már lérehozott lámpa színösszetevöit szeretnénk megváltoztatni akkor hívjuk meg ezt a függényt.

szintaxis:

LN - (0-9) az indexe a már létezö lámpának, aminek meg akarjuk változtatni a színösszetevöjét.
R - (0-255) a piros összetevö az RGB hármasból.
G - (0-255) a zöld összetevö az RGB hármasból.
B - (0-255) a kék összetevö az RGB hármasból.
fA - (true vagy false):
- true - az elözöleg megadott RGB-t lecseréli az ujra.
- false - az elözöleg megadott RGB-t növeli ill. csökkenti az új értékkel, attól függöen, hogy az új érték pozitív vagy negatív.

Clear
Ha ki akarunk törölni egy féforrást, akkor kell ezt használni.

szintaxis:

object.filters.Light.Clear;

MoveLight
Ez a fügvény a lámpa mozgatására való.

szintaxis:

LN - (0-9) az indexe a már létezö lámpának, aminek meg akarjuk változtatni a pozicióját
x,y,z - az új x,y é z koordináták
fA - (true vagy false):
- true - a koordináták abszolút koordináták
- false - a koordináták relatívok (az aktuális pozicióhoz képest).

Eredmény:

Install:
Másold ki a forráskódot, és tedd a HEAD-be.
A BODY onLoad-jába ird be, hogy InitLights().
pl.: <body onload="InitLights()">
Ha már valami a BODY onLoad-jában, akkor az InitLights()-ot írd hozzá az onLoad-hoz.
pl.: <body onload="akarmi(); InitLights()">

Ezek után, amelyik képet meg akarsz majd vilaggíttatni, annak az "id"-ja legyen spotlight.
pl.: <img src="spider.jpg" id="spotlight">
[ezen képek teljesen el fognak feketedni!]

A forráskód:

<HEAD>

var intensity = 100;
var z=90;

function slidelight(cur){		
	
	scry = window.document.body.scrollTop;
	spotlight[cur].filters.light.MoveLight(0,x[cur]-x_pos[cur],y[cur]-y_pos[cur]+scry,z,1)	
}

function move() {

if (spotlight.length==null){	
		x[0]=event.x;
		y[0]=event.y;
		slidelight(0);
	} else {
		for (i=0;i<spotlight.length;i++){			
			x[i]=event.x;
			y[i]=event.y;
			slidelight(i);
		}
	}
}

function scroll() {

if (spotlight.length==null){	
		slidelight(0);
	} else {
		for (i=0;i<spotlight.length;i++){			
			slidelight(i);
		}
	}
}

function InitLights() {

if (document.all && window.spotlight){	
		
		if (spotlight.length==null){		
				
			spotlight[0]=document.all.spotlight			
	
			x_pos[0] = spotlight[0].offsetLeft;			
			y_pos[0] = spotlight[0].offsetTop;
						
			x[0] = spotlight[0].offsetLeft + (spotlight[0].width/2);
			y[0] = spotlight[0].offsetTop + (spotlight[0].height/2);
					
			spotlight[0].filters.light.addPoint(x[0],y[0],z,255,255,255,intensity)

}
		else {					
			for (i=0;i<spotlight.length;i++){							
				x_pos[i] = spotlight[i].offsetLeft;			
				y_pos[i] = spotlight[i].offsetTop;
				
				x[i] = spotlight[i].offsetLeft + (spotlight[i].width/2);
				y[i] = spotlight[i].offsetTop + (spotlight[i].height/2);				
					
				spotlight[i].filters.light.addPoint(x[i],y[i],z,255,255,255,intensity)
			}
		}
		window.document.onmousemove=move;
		window.onscroll=scroll;

}
}

</script>

Másold a vágólapra