При нажатии на кнопку параметры изображения должны менятся на введенные пользователем

@IgorAvas · Регистрация: 12.10.2016

Студворк — интернет-сервис помощи студентам

Нужно добавить кнопку к ниже указанному коду , помогите .

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<html>
  <body>
    <img href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRjOqKI0kZG7nIV2w7AFRWfPUGiqeM0J26TbCp8irR1jZiNG556">
    <form>
      <label for="width">Ширина</label>
      <input name='width' id='width'>
      <label for="height" >Высота</label>
      <input name='height' id='height'>
      <label for="border">Границы</label>
      <input name='border' id='border'>
      <label for="alt">Альтернативный текст</label>
      <input name='alt' id='alt'>
    </form>
  </body>
  <script type="text/javascript">
var img = document.getElementByTagName('img');
 
var width = document.querySelector('input[name="width"]').value;
var height = document.querySelector('input[name="height"]').value;
var border = document.querySelector('input[name="border"]').value;
var alt = document.querySelector('input[name="alt"]').value;
 
img.onclick = function() {
  img.width = width;
  img.height = height;
  img.style.border = border + 'px;';
  img.alt = alt;
}
  </script>
</html>

@fixeri · 01.05.2017, 13:37

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    label, input {
      display: block;
    }
  </style>
</head>
<body>
    <img class="image-1" src="background.jpeg" />
    <form id="form">
      <label>Ширина
        <input name='width'>
      </label>
      <label>Высота
        <input name='height'>
      </label>
      <label>Границы
        <input name='border'>
      </label>
      <label>Альтернативный текст
        <input name='alt'>
      </label>
      <input name="btn" type="submit" value="Изменить">
    </form>
 
    <script>
      var img = document.querySelector('.image-1');
 
      var form = document.getElementById('form'),
          btn = form.btn;
 
      form.onsubmit = function() { return false; }
 
      btn.addEventListener('click', function() 
      {
        img.style.width = form.width.value + "px";
        img.style.height = form.height.value + "px";
        img.style.border = form.border.value + 'px solid red';
        img.setAttribute('alt', form.alt.value);
      });
  
    </script>
</body>
</html>

Добавлено через 12 минут
change color

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    label, input {
      display: block;
    }
  </style>
</head>
<body>
    <img class="image-1" src="background.jpeg" />
    <form id="form">
      <label>Ширина
        <input name='width'>
      </label>
      <label>Высота
        <input name='height'>
      </label>
      <label>Границы
        <input name='border'>
 
        <select name="brdcolor">
          <option value="red">red</option>
          <option value="green">green</option>
          <option value="purple">purple</option>
          <option value="black">black</option>
        </select>
      </label>
      <label>Альтернативный текст
        <input name='alt'>
      </label>
      <input name="btn" type="submit" value="Изменить">
    </form>
 
    <script>
      // alert(form.brdcolor)
      var img = document.querySelector('.image-1');
      var brdColor = document.querySelector('#form select[name=brdcolor]');
      
      var form = document.getElementById('form'),
          btn = form.btn;
 
      form.onsubmit = function() { return false; }
 
      btn.addEventListener('click', function() 
      {
        img.style.width = form.width.value + "px";
        img.style.height = form.height.value + "px";
        img.style.border = form.border.value + 'px solid ' + brdColor.value;
        img.setAttribute('alt', form.alt.value);
      });
  
    </script>
</body>
</html>

Новые блоги и статьи Все статьи Все блоги /
Установка Qt Creator для C и C++: ставим среду, CMake и MinGW без фреймворка Qt 8Observer8 05.04.2026 Среду разработки Qt Creator можно установить без фреймворка Qt. Есть отдельный репозиторий для этой среды: https:/ / github. com/ qt-creator/ qt-creator, где можно скачать установщик, на вкладке Releases:. . .	AkelPad-скрипты, структуры, и немного лирики.. testuser2 05.04.2026 Такая программа, как AkelPad существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .	Отображение реквизитов в документе по условию и контроль их заполнения Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеСпецтехники", разработанного в конфигурации КА2. Данный документ берёт данные из другого нетипового документа. . .	Фото всей Земли с борта корабля Orion миссии Artemis II kumehtar 04.04.2026 Это первое подобное фото сделанное человеком за 50 лет. Снимок называют новым вариантом легендарной фотографии «The Blue Marble» 1972 года, сделанной с борта корабля «Аполлон-17». Новое фото. . .
Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .	Программный контроль заполнения реквизитов табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: 1. Реализовать контроль заполнения реквизита. . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/	Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .

При нажатии на кнопку параметры изображения должны менятся на введенные пользователем

Решение