I’m working on an Image Gallery with buttons to show images with an [X] in the upper right corner to close the image. While the image is displayed the screen will not be darkened, but will be frozen from clicking anything except for the [X] to close the image. In the attached code there’s a call to a CustomFunction, which is where I really need help. All of the images will be smaller that 500 x 500 pixels and will be displayed in the center of the screen. I’m hoping there’s a way to use Width and Height variables within the CustomFunction, so there’s only one function needed. I appreciate help with this Image Gallery, and I hope the finished code will benefit others as well. Thanks! <html> <head> <title>Image Gallery</title> </head> <body topmargin="0" leftmargin="0" background="Background-Image.jpg" bgcolor="#FFFFFF"> <div align="center"> <center> <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#FFFFFF" width="1000"> <tr><td width="1000" height="60" align="center" colspan="2"> </td></tr> <tr> <td width="1000" align="center" colspan="3"> <font face="Arial" color="#000000" size="7">Image Gallery</font> </td> </tr> <tr><td width="1000" height="60" align="center" colspan="3"> </td></tr> <tr><!-- Image 1 --> <td width=100 height=50 align="center"> <button onclick="CustomFunction()">Image 1</button> </td> <td width=900 height=50 align="left"> <font face="Arial" color="#000000" style="font-size: 14pt"> Image1_450Wx305H.jpg size in pixels is 450 Width x 305 Height. Click button to show image centered on the screen, then click X on image to close. </font> </td> </tr> <!-- Area to show information about Image 1 --> <tr><td width="1000" height="330" align="center" colspan="3"> </td></tr> <tr><!-- Image 2 --> <td width=100 height=50 align="center"> <button onclick="CustomFunction()">Image 2</button> </td> <td width=900 height=50 align="left"> <font face="Arial" color="#000000" style="font-size: 14pt"> Image2_295Wx400H.png size in pixels is 295 Width x 400 Height. Click button to show image centered on the screen, then click X on image to close. </font> </td> </tr> <!-- Area to show information about Image 2 --> <tr><td width="1000" height="330" align="center" colspan="3"> </td></tr> <tr><!-- Image 3 --> <td width=100 height=50 align="center"> <button onclick="CustomFunction()">Image 3</button> </td> <td width=900 height=50 align="left"> <font face="Arial" color="#000000" style="font-size: 14pt"> Image3_355Wx350H.gif size in pixels is 355 Width x 350 Height. Click button to show image centered on the screen, then click X on image to close. </font> </td> </tr> <!-- Area to show information about Image 3 --> <tr><td width="1000" height="330" align="center" colspan="3"> </td></tr> </table> </center> </div> </body> </html> HTML:
A good start would be to extract your code's cranium from 1997's rectum. Unless this is for a HTML e-mail (where JavaScript is unavailable) you have NO business using the 23 year out of date CENTER and FONT tags, much less abusing TABLE for layout. Probably also shouldn't be trying to declare font-sizes in the print media "point" (aka 1/72th of an inch) metric. The lack of a doctype not doing you any favors either. Same for what's clearly a fixed-width layout. And even if you want the bleeding edge of 1997 coding practices in there, you're using TD to do caption's job, TD to do TH's job, etc, etc. Even the tables for layout code is broken gibberish. Most importantly though, where are your URI or values for what should probably be anchor's with href? I'm not 100% sure what you're trying to accomplish, but I'm also 100% sure this isn't how you start going about it.
I am working from a HTML layout that a friend helped me with a while back. It’s out of date, but I was just hoping to figure out how to create a Javascript button function that will show an image and then close it. Thanks for your understanding.