Галерея изображений – нажмите кнопку, чтобы показать изображение

  • Автор темы GREKKING
  • 49
  • Обновлено
  • 12, May 2024
  • #1
Я работаю над галереей изображений с кнопками для отображения изображений с значком [X] в правом верхнем углу, чтобы закрыть изображение.

Пока изображение отображается, экран не будет затемнен, но будет остановлен при нажатии чего-либо, кроме кнопки [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">&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:









GREKKING


Рег
19 Jul, 2015

Тем
1

Постов
2

Баллов
12
  • 21, May 2024
  • #2
Хорошим началом было бы извлечь череп вашего кода из прямой кишки 1997 года.

Если это не электронное письмо в формате HTML (где JavaScript недоступен), вам НЕТ смысла использовать устаревшие 23 года назад теги CENTER и FONT, а тем более злоупотреблять TABLE для макета.

Вероятно, также не следует пытаться объявить размеры шрифтов в «точечной» метрике печатных СМИ (также известной как 1/72 дюйма). Отсутствие доктайпа тоже не идет вам на пользу.

То же самое и с макетом фиксированной ширины.

И даже если вы хотите использовать новейшие методы кодирования 1997 года, вы используете TD для выполнения работы над заголовками, TD для выполнения работы TH и т. д. и т. п. Даже таблицы для кода макета — это ломаная тарабарщина.

Но самое главное: где ваш URI или значения того, что, вероятно, должно быть привязкой к href?

Я не уверен на 100%, чего вы пытаетесь достичь, но я также на 100% уверен, что вы начинаете это делать не так.
 

installbundle.com


Рег
07 Nov, 2014

Тем
0

Постов
2

Баллов
2
  • 10, Jun 2024
  • #3
Я работаю над HTML-макетом, который некоторое время назад мне помог друг. Оно устарело, но я просто надеялся понять, как создать функцию кнопки Javascript, которая будет показывать изображение, а затем закрывать его. Спасибо за понимание.
 

spdating.ru


Рег
10 Mar, 2015

Тем
0

Постов
2

Баллов
2
Тем
49554
Комментарии
57426
Опыт
552966

Интересно