Download presentation
Presentation is loading. Please wait.
1
JavaScript.4 2012
2
Отношения между фреймами
Родительский – дочерний [window.]frames[n].ObjFuncVarName [window.]frameName.ObjFuncVarName Дочерний – родительский parent.ObjFuncVarName top.ObjFuncVarName Дочерний – дочерний parent.frames[n].ObjFuncVarName parent.frameName.ObjFuncVarName
3
Изображения Объект Image document.images[n]
document.images[“imageName”] document.imageName
![Изображения Объект Image document.images[n]](http://slideplayer.com./slide/16626030/96/images/3/%D0%98%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D1%8F+%D0%9E%D0%B1%D1%8A%D0%B5%D0%BA%D1%82+Image+document.images%5Bn%5D.jpg "document.images[ imageName ] document.imageName.")
4
Предварительное кэширование изображений
var myImage = new Image(width, height) myImage.src = “someArt.gif” document.images[0].src = myImage.src
5
Пример кэширования (1) <HTML><HEAD><TITLE>Image Object</TITLE> <SCRIPT LANGUAGE=”JavaScript1.1”> // pre-cache four images image1 = new Image(120,90) image1.src = “desk1.gif” image2 = new Image(120,90) image2.src = “desk2.gif” image3 = new Image(120,90) image3.src = “desk3.gif” image4 = new Image(120,90) image4.src = “desk4.gif” // load an image chosen from select list function loadCached(list) { var img = list.options[list.selectedIndex].value document.thumbnail.src = eval(img + “.src”) } </SCRIPT></HEAD>
6
Пример кэширования (2) <BODY > <H2>Image Object</H2>
<IMG SRC=”desk1.gif” NAME=”thumbnail” HEIGHT=90 WIDTH=120> <FORM> <SELECT NAME=”cached” onChange=”loadCached(this)”> <OPTION VALUE=”image1”>Bands <OPTION VALUE=”image2”>Clips <OPTION VALUE=”image3”>Lamp <OPTION VALUE=”image4”>Erasers </SELECT> </FORM> </BODY> </HTML>
7
Ролловер (1) <HTML> <HEAD>
<TITLE>Jukebox/Image Rollovers</TITLE> <SCRIPT LANGUAGE=”JavaScript”> if (document.images) { // precache all ‘off’ button images var offImgArray = new Array() offImgArray[“play”] = new Image(75,33) offImgArray[“stop”] = new Image(75,33) offImgArray[“pause”] = new Image(75,33) offImgArray[“rewind”] = new Image(86,33) // off image array -- set ‘off’ image path for each button
8
Ролловер (2) offImgArray[“stop”].src = “images/stopoff.jpg”
offImgArray[“pause”].src = “images/pauseoff.jpg” offImgArray[“rewind”].src = “images/rewindoff.jpg” // precache all ‘on’ button images var onImgArray = new Array() onImgArray[“play”] = new Image(75,33) onImgArray[“stop”] = new Image(75,33) onImgArray[“pause”] = new Image(75,33) onImgArray[“rewind”] = new Image(86,33) // on image array -- set ‘on’ image path for each button onImgArray[“play”].src = “images/playon.jpg” onImgArray[“stop”].src = “images/stopon.jpg” onImgArray[“pause”].src = “images/pauseon.jpg” onImgArray[“rewind”].src = “images/rewindon.jpg” }
![Ролловер (2) offImgArray[ stop ].src = images/stopoff.jpg](http://slideplayer.com./slide/16626030/96/images/8/%D0%A0%D0%BE%D0%BB%D0%BB%D0%BE%D0%B2%D0%B5%D1%80+%282%29+offImgArray%5B+stop+%5D.src+%3D+images%2Fstopoff.jpg.jpg "offImgArray[ pause ].src = images/pauseoff.jpg offImgArray[ rewind ].src = images/rewindoff.jpg // precache all ‘on’ button images. var onImgArray = new Array() onImgArray[ play ] = new Image(75,33) onImgArray[ stop ] = new Image(75,33) onImgArray[ pause ] = new Image(75,33) onImgArray[ rewind ] = new Image(86,33) // on image array -- set ‘on’ image path for each button. onImgArray[ play ].src = images/playon.jpg onImgArray[ stop ].src = images/stopon.jpg onImgArray[ pause ].src = images/pauseon.jpg onImgArray[ rewind ].src = images/rewindon.jpg }")
9
Ролловер (3) // functions that swap images & status bar
function imageOn(imgName) { if (document.images) { document.images[imgName].src = onImgArray[imgName].src } function imageOff(imgName) { document.images[imgName].src = offImgArray[imgName].src function setMsg(msg) { window.status = msg return true
10
Ролловер (4) // controller functions (disabled) function playIt() { }
function stopIt() { function pauseIt(){ function rewindIt() { </SCRIPT> </HEAD> <BODY> <CENTER> <FORM> Jukebox Controls<BR>
11
Ролловер (5) <A HREF=”javascript:playIt()”
onMouseOver=”imageOn(‘play’); return setMsg(‘Play the selected tune’)” onMouseOut=”imageOff(‘play’); return setMsg(‘’)”> <IMG SRC=”images/playoff.jpg” NAME=”play” HEIGHT=33 WIDTH=75 BORDER=0></A> <A HREF=”javascript:stopIt()” onMouseOver=”imageOn(‘stop’); return setMsg(‘Stop the playing tune’)” onMouseOut=”imageOff(‘stop’); return setMsg(‘’)”> <IMG SRC=”images/stopoff.jpg” NAME=”stop” HEIGHT=33 WIDTH=75 BORDER=0></A> <A HREF=”javascript:pauseIt()” onMouseOver=”imageOn(‘pause’); return setMsg(‘Pause the playing tune’)” onMouseOut=”imageOff(‘pause’); return setMsg(‘’)”> <IMG SRC=”images/pauseoff.jpg” NAME=”pause” HEIGHT=33 WIDTH=75 BORDER=0></A> <A HREF=”javascript:rewindIt()” onMouseOver=”imageOn(‘rewind’); return setMsg(‘Rewind tune’)” onMouseOut=”imageOff(‘rewind’); return setMsg(‘’)”> <IMG SRC=”images/rewindoff.jpg” NAME=”rewind” HEIGHT=33 WIDTH=86 BORDER=0></A> </FORM></CENTER></BODY></HTML>
Similar presentations
