Képnézeget. Gépigény: Bármilyen számítógépen m ködik, amin található böngész és Internet elérés

Képnézeget Felhasználói dokumentáció Feladat: Java Script segítségével, olyan programot írni, mely képnézeget ként szolgál. Legalább 10 képet kell elhelyezni benne. Gombok választásával kell a design-ok között váltani. Futtatási környezet: A http://10.0.0.101/~hgy/kepnezegeto/ linkre kattintva megjelenik az oldal. Az oldal megtekintéséhez bármilyen grafikus böngész alkalmazható. Gépigény: Bármilyen számítógépen m ködik, amin található böngész és Internet elérés. Kezelési útmutató: Ezzel a két gombbal változtathatunk a design-ok között A két design:

A képeket úgy tudjuk kiválasztani, hogy rá kell kattintani a kis képre:

A képek között a két nyíllal tudunk navigálni. Készítette: Hollósy György 2/14/Aw. Bármilyen probléma esetén jelezzen a [email protected] e-mail címen.

1

Fejleszt i dokumentáció Feladat: Java Script segítségével, olyan programot írni, mely képnézeget ként szolgál. Legalább 10 képet kell elhelyezni benne. Gombok választásával kell a design-ok között váltani. Környezet: Intel Core 2 Duo CPU E8400 @ 3.00 GHz 3.01 GHz/ 3,50 GB RAM/512 MB ATI Radeon HD 4670/160GB HDD/ Windows XP/ Mozilla Firefox. Futtatási környezet: A http://10.0.0.101/~hgy/kepnezegeto/ linkre kattintva megjelenik az oldal. Az oldal megtekintéséhez bármilyen grafikus böngész alkalmazható. Programfejleszt i környezet: A Képnézeget nev program JavaScript programnyelven lett írva és HTML kód segítségével lett beágyazva majd CSS segítségével lett megformázva. Változók: s = String i, n = Egész Tömbök: -kiskepek -kepek -kepek1 -szovegek Függvények: -elore -hatra -init -mutat -valt -valt2 Fájl lista: -index.html -style.css -style1.css -kepnez.js kep mappa: -bg.jpg -bg1.jpg -bg.png -bal.png -bal1.png -jobb.png -jobb1.png -nothing.png

2

-kep.png -elso.jpg -elsodb.jpg -masodik.jpg -masodikdb.jpg -harmadik.jpg -harmadikdb.jpg -negyedik.jpg -negyedikdb.jpg -otodik.jpg -otodikdb.jpg -hatodik.jpg -hatodikdb.jpg -hetedik.jpg -hetedikdb.jpg -nyolcadik.jpg -nyolcadikdb.jpg -kilencedik.jpg -kilencedikdb.jpg -tizedik.jpg -tizedikdb.jpg Forráskódok: -index.html <script type="text/javascript" src="kepnez.js">

3

-style.css body{ background: url('kep/bg.jpg'); color: black; } img{ border: 1px solid black; } input{ background: none; border: 0; color: #666666; text-align: center; } #btn{ font-size: 20px; color: black; } #szoveg{ background:url("kep/kep.png") center; width: 600px; font-weight: bold; } #bg{ background:url("kep/bg.png") center; background-repeat: no-repeat; background-position: center; width: 760px; height: 700px; } #semmi{ border: 0px; } -style1.css body{ background: url('kep/bg1.jpg'); color: black; }

4

img{ border: 1px solid #FFF; } input{ background: none; border: 0; color: #FFF; text-align: center; } #btn{ font-size: 20px; color: black; } #szoveg{ background:url("kep/kep.png") center; width: 600px; font-weight: bold; } #bg{ border: 1px dashed #fff; /*background: #FFF; filter:alpha(opacity=50); -moz-opacity:0.5; opacity: 0.5;*/ background-repeat: no-repeat; background-position: center; width: 760px; height: 700px; } #semmi{ border: 0px; } -kepnez.js kiskepek=new Array("k1","k2","k3","k4","k5","k6","k7","k8","k9","k10"); kepek1=new Array("kep/elsodb.jpg","kep/masodikdb.jpg","kep/harmadikdb.jpg","kep/negyedikdb.jpg","ke p/otodikdb.jpg","kep/hatodikdb.jpg","kep/hetedikdb.jpg","kep/nyolcadikdb.jpg","kep/kilence dikdb.jpg","kep/tizedikdb.jpg"); kepek=new Array("kep/elso.jpg","kep/masodik.jpg","kep/harmadik.jpg","kep/negyedik.jpg","kep/otodik.j pg","kep/hatodik.jpg","kep/hetedik.jpg","kep/nyolcadik.jpg","kep/kilencedik.jpg","kep/tizedi k.jpg"); szovegek=new Array("Fa ág","Fa törzs","Rügy","K ","Tulipán","Légy","Napfény","Napfény2","K ","Toboz"); var myArr = new Array(); s=''; i=0; n=0;

5

Ezzel a függvénnyel lehet a képeket balra mozgatni.

function hatra() { sv=kepek1[9]; for (l=9; l>0; l--) kepek1[l]=kepek1[l-1]; kepek1[0]=sv; sv=kepek[9]; for (l=9; l>0; l--) kepek[l]=kepek[l-1]; kepek[0]=sv; sv=szovegek[9]; for (l=9; l>0; l--) szovegek[l]=szovegek[l-1]; szovegek[0]=sv; init(); } Ezzel a függvénnyel lehet a képeket jobbra mozgatni.

function elore() { sv=kepek1[0]; for (l=0; l<9; l++) kepek1[l]=kepek1[l+1]; kepek1[9]=sv; sv=kepek[0]; for (l=0; l<9; l++) kepek[l]=kepek[l+1]; kepek[9]=sv; sv=szovegek[0]; for (l=0; l<9; l++) szovegek[l]=szovegek[l+1]; szovegek[9]=sv; init(); } Ez a függvény szolgál arra, hogy a kisképek behívódjanak az oldal betöltésekor.

function init() { for (l=0; l<9; l++) document.getElementById(kiskepek[l]).src=kepek1[l]; } Ennek a függvénynek a segítségével jelennik meg a nagy kép, ha rákattintunk a kicsire.

function mutat(x) { //alert(s); s=document.getElementById(x).src 6

myArray=s.split('/'); for (j=0; j<9; j++) if (kepek1[j]==(myArray[8]+'/'+myArray[9])) { n=j; } document.getElementById('kep').src=kepek[n]; document.getElementById('szoveg').value=szovegek[n]; } Ezzel lehet váltani a style1.css re function valt() { document.getElementById('stylesheet').href = 'style1.css'; } Ezzel lehet váltani a style.css re function valt2() { document.getElementById('stylesheet').href = 'style.css'; } Készítette: Hollósy György 2/14/Aw. Bármilyen probléma esetén jelezzen a [email protected] e-mail címen.

7