| Continuing from Page 1 of the Interactive
Puzzle
Now we are going to code this puzzle so we can play with it.
This should be where your body tags are.
You can copy and paste these codes if you like.
<BODY background="nameofyoubackgroundimage.jpg"><onLoad="checkit()">
<SCRIPT LANGUAGE="JavaScript">
<!--
var temp = new Image()
var loc
var gotit
function checkit()
{
if ((navigator.appName=="Microsoft Internet Explorer")
&& (parseInt(navigator.appVersion) >= 4))
return
else
alert("To play, you need MSIE 4 or greater")
}
function exch()
{
if ((event.button == 1) && (event.srcElement.className == "drag"))
{
if (gotit == 1)
{
gotit = 0
document.images[loc].src = document.images[event.srcElement.name].src
document.images[event.srcElement.name].src = temp.src
}
else
{
gotit = 1
loc = event.srcElement.name
temp.src = document.images[loc].src
}
}
}
document.onmousedown=exch
// -->
</SCRIPT>
<NOSCRIPT>
To play this game, you need IE 4 or greater
</NOSCRIPT>
<TABLE bgcolor="Black" CELLPADDING="0" CELLSPACING="0" BORDER="0"
STYLE="border:15px bright gold">
<TR>
<TD><IMG SRC="13.jpg" WIDTH="136" HEIGHT="104" NAME="pic13" CLASS="drag"
ALT=""></TD>
<TD><IMG SRC="16.jpg" WIDTH="136" HEIGHT="104" NAME="pic16" CLASS="drag"
ALT=""></TD>
<TD><IMG SRC="15.jpg" WIDTH="136" HEIGHT="104" NAME="pic15" CLASS="drag"
ALT=""></TD>
<TD><IMG SRC="22.jpg" WIDTH="136" HEIGHT="104" NAME="pic22" CLASS="drag"
ALT=""></TD>
<TD><IMG SRC="1.jpg" WIDTH="136" HEIGHT="104" NAME="pic1" CLASS="drag"
ALT=""></TD>
</TR>
<TR>
<TD><IMG SRC="2.jpg" WIDTH="136" HEIGHT="104" NAME="pic2" CLASS="drag"
ALT=""></TD>
<TD><IMG SRC="9.jpg" WIDTH="136" HEIGHT="104" NAME="pic9" CLASS="drag"
ALT=""></TD>
<TD><IMG SRC="25.jpg" WIDTH="136" HEIGHT="104" NAME="pic25" CLASS="drag"
ALT=""></TD>
<TD><IMG SRC="20.jpg" WIDTH="136" HEIGHT="104" NAME="pic20" CLASS="drag"
ALT=""></TD>
<TD><IMG SRC="4.jpg" WIDTH="136" HEIGHT="104" NAME="pic4" CLASS="drag"
ALT=""></TD>
</TR>
<TR>
<TD><IMG SRC="5.jpg" WIDTH="136" HEIGHT="104" NAME="pic5" CLASS="drag"
ALT=""></TD>
<TD><IMG SRC="21.jpg" WIDTH="136" HEIGHT="104" NAME="pic21" CLASS="drag"
ALT=""></TD>
<TD><IMG SRC="8.jpg" WIDTH="136" HEIGHT="104" NAME="pic8" CLASS="drag"
ALT=""></TD>
<TD><IMG SRC="6.jpg" WIDTH="136" HEIGHT="104" NAME="pic6" CLASS="drag"
ALT=""></TD>
<TD><IMG SRC="11.jpg" WIDTH="136" HEIGHT="104" NAME="pic11" CLASS="drag"
ALT=""></TD>
</TR>
<TR>
<TD><IMG SRC="12.jpg" WIDTH="136" HEIGHT="104" NAME="pic12" CLASS="drag"
ALT=""></TD>
<TD><IMG SRC="14.jpg" WIDTH="136" HEIGHT="104" NAME="pic14" CLASS="drag"
ALT=""></TD>
<TD><IMG SRC="18.jpg" WIDTH="136" HEIGHT="104" NAME="pic18" CLASS="drag"
ALT=""></TD>
<TD><IMG SRC="23.jpg" WIDTH="136" HEIGHT="104" NAME="pic23" CLASS="drag"
ALT=""></TD>
<TD><IMG SRC="3.jpg" WIDTH="136" HEIGHT="104" NAME="pic3" CLASS="drag"
ALT=""></TD>
</TR>
<TR>
<TD><IMG SRC="24.jpg" WIDTH="136" HEIGHT="104" NAME="pic24" CLASS="drag"
ALT=""></TD>
<TD><IMG SRC="19.jpg" WIDTH="136" HEIGHT="104" NAME="pic19" CLASS="drag"
ALT=""></TD>
<TD><IMG SRC="7.jpg" WIDTH="136" HEIGHT="104" NAME="pic7" CLASS="drag"
ALT=""></TD>
<TD><IMG SRC="17.jpg" WIDTH="136" HEIGHT="104" NAME="pic17" CLASS="drag"
ALT=""></TD>
<TD><IMG SRC="10.jpg" WIDTH="136" HEIGHT="104" NAME="pic10" CLASS="drag"
ALT=""></TD>
</TR>
</TABLE>
Now you see where the NAME="pic#" is at within your codes?
Make sure those numbers match with the name of the image for that piece
of the puzzle.
Now you are finished with the coding. You can go and play with this
and test it out.
Here is my puzzle all coded.
My Finished Puzzle |
