I am trying to make an HTML document, where there is an image, and a button below it. If you click the button, a new window will pop up and will display the image, along with descriptive text below the image. I want to do this using JavaScript since it would be too hard to do this in plain HTML since I would have too many HTML documents.
Here is the code for the thing:
Code:
<HTML>
<HEAD>
<TITLE>R32 Pictures</TITLE>
<SCRIPT language="JavaScript" src="poppic.js">
</SCRIPT>
</HEAD>
<BODY>
<LINK rel="stylesheet" href="http://error46146.awardspace.com/style.css">
<PTITLE>R32 Pictures:</PTITLE><BR>
Below are some of my best R32 pictures. To view a picture, please click on the button under the thumbnail.<BR>
<TABLE border="0">
<TR>
<TD><IMG src="r32-1.jpeg" width="200" height="150.5"><BR>R32 3754 E train at Roosevelt Avenue</TD>
<TD><IMG src="r32-2.jpeg" width="200" height="150.5"><BR>R32 3807 E train at West 4th Street</TD>
<TD><IMG src="r32-3.jpeg" width="200" height="150.5"><BR>R32 E train leaving 14th Street</TD>
</TR>
<TR>
<TD><INPUT type="button" value="View Picture" onClick="popapic(32,1,'R32 3754 E train at Roosevelt Avenue')"></TD>
<TD><INPUT type="button" value="View Picture" onClick="popapic(32,2,'R32 3807 at West 4th Street')"></TD>
<TD><INPUT type="button" value="View Picture" onClick="popapic(32,3,'R32 E train leaving 14th Street')"></TD>
</TR>
<TR>
<TD><IMG src="r32-4.jpeg" width="200" height="150.5"><BR>R32 3498 E train at West 4th Street</TD>
<TD><IMG src="r32-5.jpeg" width="200" height="150.5"><BR>R32 3745 E train at Roosevelt Avenue</TD>
<TD><IMG src="r32-6.jpeg" width="200" height="150.5"><BR>R32 3913 A train entering Rockaway Blvd</TD>
</TR>
<TR>
<TD><INPUT type="button" value="View Picture" onClick="popapic(32,4,'R32 3498 E train at West 4th Street')"></TD>
<TD><INPUT type="button" value="View Picture" onClick="popapic(32,5,'R32 3475 E train at Roosevelt Avenue')"></TD>
<TD><INPUT type="button" value="View Picture" onClick="popapic(32,6,'R32 3913 A train entering Rockaway Blvd')"></TD>
</TR>
<TR>
<TD><IMG src="r32-7.jpeg" width="200" height="150.5"><BR>R32 3373 E train at Sutphin Blvd</TD>
<TD><IMG src="r32-8.jpeg" width="200" height="150.5"><BR>R32 3800 E train at 75th Avenue</TD>
</TR>
<TR>
<TD><INPUT type="button" value="View Picture" onClick="popapic(32,7,'R32 3373 at Sutphin Blvd')"></TD>
<TD><INPUT type="button" value="View Picture" onClick="popapic(32,8,'R32 3800 at 75th Avenue')"></TD>
</TR>
</TABLE><BR>
<A HREF="r32-i1.jpeg">R32 Interior pic-click here</A><BR><BR>
</BODY>
</HTML>
and here is the code in the poppic.
js file:
Code:
function popapic(car,locy,descrip) {
window.open("r"+car+"-"+locy+".jpeg",picwin,"height=700,width=900,resize=yes);
picwin.document.write(descrip);
}
I keep getting an error when i click one of the buttons that says function popapic is not defined on Firefox. I have not tested it in IE yet.
I don't know why i get this error since clearly popapic is defined in the
JS file.
Does anyone know what is wrong?
image popper-need help
