Az image objektum Multimédiás alkalmazások készítése JavaScript segítségével

• a document leszármazottja • az images tömbön keresztül érhet el

webprogramozó

– 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

Képek el zetes betöltése

• 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

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

• 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";

Feladat • Készítsünk két váltóképpárból álló menüt!

1

Menü

Feladat • Készítsünk stílus segítségével két váltóhivatkozást tartalmazó weblapot!

Menü

Új kérdés
Letöltés

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.

<style> #ujkerd, #letolt{ font-size: 30px; text-decoration: none; } #ujkerd:hover, #letolt:hover{ background-color: yellow; color: red; }

Feladat • 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

<style> #ujkerd{ display: block; height: 25px; width: 100px; background-image: url("ujkerd1.jpg"); } #ujkerd:hover{ background-image: url("ujkerd2.jpg"); }

Menü

Új kérdés
Letöltés

<script language="JavaScript" type="text/javascript" src="diasor.js">

Diasorozat

#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; }

Feladat • Készítsünk 5 diából álló bemutatót JavaScript segítségével!

var diaszam=0; aktualis=0; var diak = new Array(); function diasortKeszit(){ kepek = document.getElementsByTagName("img"); for (i=0; i
3

function KovDia(){ diak[aktualis].style.display = "none"; aktualis++; if (aktualis >= diaszam) aktualis = 0; diak[aktualis].style.display = "block"; }

Feladat • 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">

Diasorozat

src="prez1.jpg" src="prez2.jpg" src="prez3.jpg" src="prez4.jpg" src="prez5.jpg"

width="400" width="400" width="400" width="400" width="400"

height="300"> height="300"> height="300"> height="300"> 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
CSS img.dia { position: absolute; left: 0; top: 0; } #prezentacio { position: relative; overflow: hidden; //a kép kilógó része nem fog látszani. width: 400; height: 300; }

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

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); }

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

window.onload = diasortKeszit;

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: •

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