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.

Méret: px

Mutatás kezdődik a ... oldaltól:

Download "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."

Benjámin Hajdu
8 évvel ezelőtt
Látták:

1 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 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ó: A két design: Ezzel a két gombbal változtathatunk a design-ok között 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 hollosygyorgy@gmail.com címen. 1

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.

2 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 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 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

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ó.

3 -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"></script> <link rel="stylesheet" type="text/css" href="style.css" id="stylesheet"> <body onload="init();"> <input type="button" value="style1" onclick="valt2();"> <input type="button" value="style2" onclick="valt();"> <center> <div id="bg"> <br> <table cellspacing="0" cellpadding="0" border="0"> <tr> <td colspan="3"> <img src="kep/elso.jpg" id="kep" > </td> <tr> <td> </td> <td align="center" height="25"><input type="text" id="szoveg"></td> <td align="right"> </td> <tr> <td colspan="3" align="center" valign="top"> <img src="kep/bal.png" width="40" height="100" id="semmi" onclick="hatra();"> <img src="" name="k1" width="120" height="90" id="k1" onclick="mutat('k1');"> <img id="k2" src="" onclick="mutat('k2');" width="120" height="90"> <img src="" name="k3" width="120" height="90" id="k3" onclick="mutat('k3');"> 3

js"></script> <link rel="stylesheet" type="text/css" href="style.

4 <img id="k4" src="" onclick="mutat('k4');" width="120" height="90"> <img src="" name="k5" width="120" height="90" id="k5" onclick="mutat('k5');"> <img src="kep/jobb.png" width="40" height="100" id="semmi" onclick="elore();"></td> </table> </div> </center> </body> -style.css body img input background: url('kep/bg.jpg'); border: 1px solid black; background: none; border: 0; color: #666666; text-align: center; #btn font-size: 20px; #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'); 4

jpg'); border: 1px solid black; background: none; border: 0; color: #666666; text-align: center; #btn font-size: 20px; #szoveg background:url("kep/kep.

5 img input border: 1px solid #FFF; background: none; border: 0; color: #FFF; text-align: center; #btn font-size: 20px; #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

5;*/ background-repeat: no-repeat; background-position: center; width: 760px; height: 700px; #semmi border: 0px; -kepnez.

6 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]; kepek1[l]=kepek1[l+1]; kepek1[9]=sv; sv=kepek[0]; kepek[l]=kepek[l+1]; kepek[9]=sv; sv=szovegek[0]; 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() 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

szovegek[l]=szovegek[l-1]; szovegek[0]=sv; init(); Ezzel a függvénnyel lehet a képeket jobbra mozgatni.

7 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 hollosygyorgy@gmail.com címen. 7

getelementbyid('stylesheet').href = 'style1.css'; Ezzel lehet váltani a style.css re function valt2() document.

Hasonló dokumentumok

Kő, Papír, Olló. Felhasználói dokumentáció

Kő, Papír, Olló. Felhasználói dokumentáció Kő, Papír, Olló Felhasználói dokumentáció Feladat: JavaScript és CSS segítségével Kő, Papír, Olló feladat készítése. Futtatási környezet: A http://10.0.0.101/~szabby/ linkre kattintva megjelenik az oldal.