Az image objektum. Az image eseménykezel i. Képek el zetes betöltése. Feladat. Váltóképek készítése

Méret: px

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

Download "Az image objektum. Az image eseménykezel i. Képek el zetes betöltése. Feladat. Váltóképek készítése"

Regina Fábián
8 évvel ezelőtt
Látták:

1 Az image objektum Multimédiás alkalmazások készítése JavaScript segítségével webprogramozó a document leszármazottja az images tömbön keresztül érhet el complete : teljesen letölt dött-e? height, width : magasság, szélesség hspace, vspace : függ leges és vízsszintes helykihagyás name : név src : a kép URL-je. Az image eseménykezel i onload : a kép teljesen betölt dött onabort : a felhasználó megszakítja a letöltést onerror : a képfájl nem található, vagy sérült Képek el zetes betöltése Ha önálló image objektumokat készítünk, azok akkor is betölt dnek a gyorstárba, ha kezdetben nem jelenítjük meg ket kep = new Image(); kep.src = "rajz.gif"; Váltóképek készítése Egérmutató hatására megváltozó képek Általában hivatkozások, amelyek megváltoznak, ha a látogató föléjük áll az egérrel onmouseover onmouseout Készítsünk két váltóképpárból álló menüt! 1

Az image eseménykezel i onload : a kép teljesen betölt dött onabort : a felhasználó megszakítja a letöltést onerror : a képfájl nem található, vagy sérült Képek el zetes betöltése Ha önálló image

2 <h1>menü</h1> <a href="ujkerdes.html" onmouseover="document.elsomenu.src='ujkerd2.jpg';" onmouseout="document.elsomenu.src='ujkerd1.jpg';"> <img border="0" src="ujkerd1.jpg" name="elsomenu"></a> <br> <a href="letoltes.html" onmouseover= "document.masodikmenu.src='letolt2.jpg';" onmouseout="document.masodikmenu.src='letolt1.jpg';"> <img border="0" src="letolt1.jpg" name="masodikmenu"></a> CSS váltóhivatkozások JavaScript nélkül a hover utasítással olyan szöveges utasításokat hozhatunk létre, amelynek megváltozik a színe, ha az egér föléjük ér. Készítsünk stílus segítségével két váltóhivatkozást tartalmazó weblapot! <style> #ujkerd, #letolt{ font-size: 30px; text-decoration: none; #ujkerd:hover, #letolt:hover{ background-color: yellow; color: red; </style> <h1>menü</h1> <a id="ujkerd" href="ujkerdes.html">új kérdés</a> <br> <a id="letolt" href="letoltes.html">letöltés</a> Módosítsuk az el programot úgy, hogy a váltóhivatkozások váltóképek legyenek! (el ny: a menük a stílus kikapcsolása után szövegesen is megjelennek.) 2

jpg" name="masodikmenu"></a> CSS váltóhivatkozások JavaScript nélkül a hover utasítással olyan szöveges utasításokat hozhatunk létre, amelynek megváltozik a színe, ha az egér föléjük ér.

3 <style> #ujkerd{ display: block; height: 25px; width: 100px; background-image: url("ujkerd1.jpg"); #ujkerd:hover{ background-image: url("ujkerd2.jpg"); #letolt{ display: block; height: 35px; width: 135px; background-image: url("letolt1.jpg"); #letolt:hover{ background-image: url("letolt2.jpg"); #ujkerd b, #letolt b{ display: none; </style> <h1>menü</h1> <a id="ujkerd" href="ujkerdes.html"><b>új kérdés</b></a> <br> <a id="letolt" href="letoltes.html"><b>letöltés</b></a> Készítsünk 5 diából álló bemutatót JavaScript segítségével! <script language="javascript" type="text/javascript" src="diasor.js"> <h1>diasorozat</h1> <img class="dia" src="prez1.jpg" width="400" height="300"> <img class="dia" src="prez2.jpg" width="400" height="300"> <img class="dia" src="prez3.jpg" width="400" height="300"> <img class="dia" src="prez4.jpg" width="400" height="300"> <img class="dia" src="prez5.jpg" width="400" height="300"> var diaszam=0; aktualis=0; var diak = new Array(); function diasortkeszit(){ kepek = document.getelementsbytagname("img"); for (i=0; i<kepek.length; i++){ if (kepek[i].classname!= "dia") continue; diak[diaszam] = kepek[i]; if (diaszam == 0) kepek[i].style.display = "block"; else kepek[i].style.display = "none"; kepek[i].onclick = KovDia; diaszam++; 3

jpg"); #ujkerd b, #letolt b{ display: none; </style> <h1>menü</h1> <a id="ujkerd" href="ujkerdes.html"><b>új kérdés</b></a> <br> <a id="letolt" href="letoltes.

4 function KovDia(){ diak[aktualis].style.display = "none"; aktualis++; if (aktualis >= diaszam) aktualis = 0; diak[aktualis].style.display = "block"; Módosítsuk az el programot úgy, hogy a diák váltása átt néssel történjen! window.onload = diasortkeszit; <script language="javascript" type="text/javascript" src="diasor.js"> <link rel="stylesheet" type="text/css" href="diasor.css"> <h1>diasorozat</h1> <div id="prezentacio"> <img class="dia" src="prez1.jpg" width="400" height="300"> <img class="dia" src="prez2.jpg" width="400" height="300"> <img class="dia" src="prez3.jpg" width="400" height="300"> <img class="dia" src="prez4.jpg" width="400" height="300"> <img class="dia" src="prez5.jpg" width="400" height="300"> </div> img.dia { position: absolute; left: 0; top: 0; CSS #prezentacio { position: relative; overflow: hidden; //a kép kilógó része nem fog látszani. width: 400; height: 300; var diaszam=0; aktualis=0; var elozo=4; mozogx = 0; var diak = new Array(); function diasortkeszit(){ kepek = document.getelementsbytagname("img"); for (i=0; i<kepek.length; i++){ if (kepek[i].classname!= "dia") continue; diak[diaszam] = kepek[i]; if (diaszam == 0) kepek[i].style.zindex = 10; //Egymásra helyezés, zindex a z-tengelyen vett pozíció else kepek[i].style.zindex = 0; kepek[i].onclick = KovDia; diaszam++; function KovDia(){ diak[aktualis].style.zindex = 9; diak[elozo].style.zindex = 0; elozo = aktualis; aktualis++; if (aktualis >= diaszam) aktualis = 0; diak[aktualis].style.left = 400; mozogx = 400; diak[aktualis].style.zindex = 10; animalas(); 4

css"> <h1>diasorozat</h1> <div id="prezentacio"> <img class="dia" src="prez1.jpg" width="400" height="300"> <img class="dia" src="prez2.jpg" width="400" height="300"> <img class="dia" src="prez3.

5 function animalas(){ mozogx = mozogx - 25; diak[aktualis].style.left = mozogx; diak[elozo].style.left = mozogx - 400; //El sor ki is iktatható, más effekt if (mozogx > 0) window.settimeout("animalas();",10); window.onload = diasortkeszit; vítmény (plug-in) Lehet vé teszi, hogy a böngész küls adattípust is megjelenítsen Flash PDF QuickTime RealPlayer stb embed Például egy hangfájl beágyazása: <embed src="hang.wav" autostart="false" loop="false"> autostart : betölt déskor azonnal lejátszódjon-e? loop : ismétl djön-e? object Például egy hangfájl beágyazása: <object type="audio/x-wav" data="hang.wav" width="100" height="50"> <param name="src" value="hang.wav"> <param name="autostart" value="false"> </object> MIME típusok HTML : text/html szöveg : text/plain GIF : image/gif JavaScript : text/javascript stb Ha a böngész ismeri a MIME típust, akkor megjeleníti a fájlt, ha nem, akkor megkérdezi a felhasználót, hogy mit tegyen vele. vítmények kezelése <object id="hang"... <embed id = "hang" obj = getelementbyid("hang"); obj.play(); //hang esetén A b vítmények tagfüggvényei nem részei a DOM-nak, ezért meg kell nézni a dokumentációba, hogy milyen függvény hívhatunk. 5

onload = diasortkeszit; vítmény (plug-in) Lehet vé teszi, hogy a böngész küls adattípust is megjelenítsen Flash PDF QuickTime RealPlayer stb embed Például egy hangfájl beágyazása: <embed src="hang.

6 Hangformátumok.au : A böngész k által legrégebben támogatott hangformátum.wav : A Windows szabványos hangformátuma.mp3 : Népszer tömörített hangformátum.mid : MIDI. Szintetizátor parancsokat tartalmazó formátum. Hangvezérlés JavaScripttel Play() vagy DoPlay() : Lejátszás Stop() : leállítás Rewind () : Újrajátszás Készítsünk programot, amely nyomógombra való kattintásra elkezdi egy hangfájl lejátszását! Csak IE <script language="javascript" type="text/javascript"> function lejatszas(){ var nota = document.getelementbyid("hang"); try{ nota.doplay(); catch (e){ try{ nota.play(); catch (e){ alert("nem tudom lejátszani."); <h1>hanglejátszó</h1> <embed id="hang" src="dont.wav" width="0" height="0" autostart="false" enablejavascript="true"> <input type="button" value="lejátszás" onclick="lejatszas();"> Firefox Vagy letöltjük a Windows Media Player plugint, vagy készítünk egy egyszer linket a fájlra! 6

Hangvezérlés JavaScripttel Play() vagy DoPlay() : Lejátszás Stop() : leállítás Rewind () : Újrajátszás Készítsünk programot, amely nyomógombra való kattintásra elkezdi egy hangfájl lejátszását!

7 <script language="javascript" type="text/javascript"> function lejatszas(){ location.href="dont.mp3"; <h1>hanglejátszó</h1> <input type="button" value="lejátszás" onclick="lejatszas();"> Flash Az Internet legnépszer bb mozgókép- és interaktív tartalomformátuma A Flash programozási nyelve (ActionScript) hasonlít a JavaScriptre Az alap szintén az ECMAScript! A JavaScript is képes együttm ködni a Flashsel. VÉGE 7

Internet legnépszer bb mozgókép- és interaktív tartalomformátuma A Flash programozási nyelve

Hasonló dokumentumok

5-ös lottó játék. Felhasználói dokumentáció

5-ös lottó játék. Felhasználói dokumentáció 5-ös lottó játék Felhasználói dokumentáció Feladat: JavaScript és CSS segítségével 5-ös lottó játék készítése. Futtatási környezet: A http://10.0.0.101/~szabby/ linkre kattintva megjelenik az oldal. Az