- 12, May 2024
- #1
Я работаю над галереей изображений с кнопками для отображения изображений с значком [X] в правом верхнем углу, чтобы закрыть изображение.
Пока изображение отображается, экран не будет затемнен, но будет остановлен при нажатии чего-либо, кроме кнопки [X], чтобы закрыть изображение.
В приложенном коде есть вызов CustomFunction, и здесь мне действительно нужна помощь.
Все изображения будут меньше 500 x 500 пикселей и будут отображаться в центре экрана.
Я надеюсь, что есть способ использовать переменные Width и Height в CustomFunction, поэтому нужна только одна функция. Я ценю помощь с этой галереей изображений и надеюсь, что готовый код принесет пользу и другим.
Спасибо!
Пока изображение отображается, экран не будет затемнен, но будет остановлен при нажатии чего-либо, кроме кнопки [X], чтобы закрыть изображение.
В приложенном коде есть вызов CustomFunction, и здесь мне действительно нужна помощь.
Все изображения будут меньше 500 x 500 пикселей и будут отображаться в центре экрана.
Я надеюсь, что есть способ использовать переменные Width и Height в CustomFunction, поэтому нужна только одна функция. Я ценю помощь с этой галереей изображений и надеюсь, что готовый код принесет пользу и другим.
Спасибо!
<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: