图片库——点击按钮显示图片

时间:2021-06-18 06:32:21

标签: javascript html css

我正在开发一个带有按钮的图片库,用于在右上角显示带有 [X] 的图像以关闭图像。显示图像时,屏幕不会变暗,但会因单击除 [X] 之外的任何内容而被冻结以关闭图像。在附加的代码中,有一个对 CustomFunction 的调用,这正是我真正需要帮助的地方。所有图像都将小于 500 x 500 像素,并显示在屏幕中央。我希望有一种方法可以在 CustomFunction 中使用 Width 和 Height 变量,所以只需要一个函数。 我很感激这个图片库的帮助,我希望完成的代码也能让其他人受益。谢谢!

<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>
<!-- Please note that spaces here are for visual only and are not the real code -->

0 个答案:

没有答案