| |
|
<![CDATA[
<HTML>
<TITLE>Lucio Tavernini - Animating JPEG Using JavaScript</TITLE>
<BODY BGCOLOR=000000 onLoad="runShow(); setButton(8)" onUnload="stopAnimation=false">
<SCRIPT>
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() {
//setButton(8)
if (stopAnimation) return
frameNumber = (++frameNumber > NumberOfFrames ? 1 : frameNumber)
//setButton(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>
<!-- Show -->
<P><IMG NAME="picture" SRC="./animation/picture1.jpg" BORDER=0 WIDTH=432 HEIGHT=432></P>
<!-- Buttons -->
<!-- There is a much less roundabout way to accomplish what you see below. -->
<MAP NAME="button1_map">
<AREA SHAPE="RECT" COORDS="1,1 50,50" HREF="javascript:stop(1)" onMouseOver="stop(1)">
</MAP>
<MAP NAME="button2_map">
<AREA SHAPE="RECT" COORDS="1,1 50,50" HREF="javascript:stop(2)" onMouseOver="stop(2)">
</MAP>
<MAP NAME="button3_map">
<AREA SHAPE="RECT" COORDS="1,1 50,50" HREF="javascript:stop(3)" onMouseOver="stop(3)">
</MAP>
<MAP NAME="button4_map">
<AREA SHAPE="RECT" COORDS="1,1 50,50" HREF="javascript:stop(4)" onMouseOver="stop(4)">
</MAP>
<MAP NAME="button5_map">
<AREA SHAPE="RECT" COORDS="1,1 50,50" HREF="javascript:stop(5)" onMouseOver="stop(5)">
</MAP>
<MAP NAME="button6_map">
<AREA SHAPE="RECT" COORDS="1,1 50,50" HREF="javascript:stop(6)" onMouseOver="stop(6)">
</MAP>
<MAP NAME="button7_map">
<AREA SHAPE="RECT" COORDS="1,1 50,50" HREF="javascript:pause()" onMouseOver="pause()">
</MAP>
<MAP NAME="button8_map">
<AREA SHAPE="RECT" COORDS="1,1 50,50" HREF="javascript:start()" onMouseOver="start()">
</MAP>
<IMG SRC="./animation/picture7.jpg" WIDTH=25 HEIGHT=25 NAME="button1" USEMAP="#button1_map" BORDER=0>
<IMG SRC="./animation/picture8.jpg" WIDTH=25 HEIGHT=25 NAME="button2" USEMAP="#button2_map" BORDER=0>
<IMG SRC="./animation/picture9.jpg" WIDTH=25 HEIGHT=25 NAME="button3" USEMAP="#button3_map" BORDER=0>
<IMG SRC="./animation/picture10.jpg" WIDTH=25 HEIGHT=25 NAME="button4" USEMAP="#button4_map" BORDER=0>
<IMG SRC="./animation/picture11.jpg" WIDTH=25 HEIGHT=25 NAME="button5" USEMAP="#button5_map" BORDER=0>
<IMG SRC="./animation/picture12.jpg" WIDTH=25 HEIGHT=25 NAME="button6" USEMAP="#button6_map" BORDER=0>
<IMG SRC="./animation/picture13.jpg" WIDTH=25 HEIGHT=25 NAME="button7" USEMAP="#button7_map" BORDER=0>
<IMG SRC="./animation/picture14.jpg" WIDTH=25 HEIGHT=25 NAME="button8" USEMAP="#button8_map" BORDER=0>
<P> </P>
</CENTER>
<SCRIPT SRC="footer.js"></SCRIPT>
</TD></TR></TABLE>
</BODY></HTML>
]]>
|
|