1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Image Gallery – Click Button to Show Image

Discussion in 'HTML & Website Design' started by Cody_Dacoder, Jun 19, 2021.

0
  1. #1
    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">&nbsp;</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">&nbsp;</td></tr>
    <tr><!-- Image 1 -->
      <td width=100 height=50 align="center">&nbsp;
        <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">&nbsp;</td></tr>
    <tr><!-- Image 2 -->
      <td width=100 height=50 align="center">&nbsp;
        <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">&nbsp;</td></tr>
    <tr><!-- Image 3 -->
      <td width=100 height=50 align="center">&nbsp;
        <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">&nbsp;</td></tr>
  </table>
  </center>
</div>
</body>
</html>
    HTML:
    Background-Image.jpg Image1_450Wx305H.jpg Image2_295Wx400H.png Image3_355Wx350H.gif
     
    Cody_Dacoder, Jun 19, 2021 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #2
    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.
     
    deathshadow, Jun 19, 2021 IP
  3. Cody_Dacoder

    Cody_Dacoder Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #3
    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.
     
    Cody_Dacoder, Jun 23, 2021 IP