| |
|
<![CDATA[
<HTML>
<TITLE>Lucio Tavernini - Animating JPEG Using JavaScript - Version 2</TITLE>
<BODY BGCOLOR=000000 onLoad="runShow(); setButton(8)" onUnload="stopAnimation=false">
<SCRIPT language=javaScript1.2 type=text/javascript>
var TimeDelayInMilliseconds = 2000
var NumberOfFrames = 6
var NumberOfButtons = 8
// There are NumberOfFrames frames, NumberOfButtons dark buttons, NumberOfButtons light buttons.
var NumberOfPics = NumberOfFrames + 2*NumberOfButtons
pic = new Array()
for (i = 1; i <= NumberOfPics; i++) {
pic[i] = new Image
pic[i].src = eval("'./animation/picture" + i + ".jpg'")
}
var frameNumber = NumberOfFrames - 1
var ButtonIndexOffset = 2*NumberOfButtons - 2
var stopAnimation = false
var lastSelection = 0
function runShow() {
if (stopAnimation) return
frameNumber = (++frameNumber > NumberOfFrames ? 1 : frameNumber)
document.images["picture"].src = pic[frameNumber].src
setTimeout("runShow()",TimeDelayInMilliseconds)
}
function setButton(k) {
if (lastSelection == k) return
document.images[eval("'button" + k + "'")].src = pic[k + ButtonIndexOffset].src
if (lastSelection != 0) document.images[eval("'button" + lastSelection + "'")].src = pic[lastSelection + NumberOfFrames].src
lastSelection = k
}
function stop(k) {
stopAnimation = true
document.images["picture"].src = pic[k].src
setButton(k)
}
function pause() {
stopAnimation = true
setButton(7)
}
function start() {
if (!stopAnimation) return
setButton(8)
stopAnimation = false
runShow()
}
</SCRIPT>
<SCRIPT SRC="table_opener.js"></SCRIPT>
<CENTER>
<P> </P>
<!-- Animation -->
<P><IMG NAME="picture" SRC="./animation/picture1.jpg" BORDER=0 WIDTH=432 HEIGHT=432></P>
<!-- Buttons -->
<A HREF="javascript://" onClick="return false" onMouseOver="stop(1)">
<IMG SRC="./animation/picture7.jpg" WIDTH=25 HEIGHT=25 NAME="button1" BORDER=0></A>
<A HREF="javascript://" onClick="return false" onMouseOver="stop(2)">
<IMG SRC="./animation/picture8.jpg" WIDTH=25 HEIGHT=25 NAME="button2" BORDER=0></A>
<A HREF="javascript://" onClick="return false" onMouseOver="stop(3)">
<IMG SRC="./animation/picture9.jpg" WIDTH=25 HEIGHT=25 NAME="button3" BORDER=0></A>
<A HREF="javascript://" onClick="return false" onMouseOver="stop(4)">
<IMG SRC="./animation/picture10.jpg" WIDTH=25 HEIGHT=25 NAME="button4" BORDER=0></A>
<A HREF="javascript://" onClick="return false" onMouseOver="stop(5)">
<IMG SRC="./animation/picture11.jpg" WIDTH=25 HEIGHT=25 NAME="button5" BORDER=0></A>
<A HREF="javascript://" onClick="return false" onMouseOver="stop(6)">
<IMG SRC="./animation/picture12.jpg" WIDTH=25 HEIGHT=25 NAME="button6" BORDER=0></A>
<A HREF="javascript://" onClick="return false" onMouseOver="pause()">
<IMG SRC="./animation/picture13.jpg" WIDTH=25 HEIGHT=25 NAME="button7" BORDER=0></A>
<A HREF="javascript://" onClick="return false" onMouseOver="start()">
<IMG SRC="./animation/picture14.jpg" WIDTH=25 HEIGHT=25 NAME="button8" BORDER=0></A>
<H1> </H1>
<P ALIGN=CENTER><A HREF="animation2_source.shtml" TARGET=_blank><FONT SIZE="-1" FACE="ARIAL,HELVETICA" COLOR=AAFF99><B>View Source</B></A></FONT></P>
</CENTER>
<SCRIPT SRC="footer.js"></SCRIPT>
</TD></TR></TABLE>
</BODY></HTML>
]]>
|
|