时间戳

首页 > 解决方案 > 图片库 - 单击按钮以显示图片

javascript - 图片库 - 单击按钮以显示图片

问题描述

我正在使用带有按钮的图像库来显示图像，右上角带有 [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 -->

标签： javascripthtmlcss

解决方案

推荐阅读