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

@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>

Новые блоги и статьи Все статьи Все блоги /
Автозаполнение реквизита при выборе элемента справочника Maks 27.03.2026 Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. При выборе "Спецтехники" (Тип Справочник. Спецтехника), заполняется. . .	Сумматор с применением элементов трёх состояний. Hrethgir 26.03.2026 Тут. https:/ / fips. ru/ EGD/ ab3c85c8-836d-4866-871b-c2f0c5d77fbc Первый документ красиво выглядит, но без схемы. Это конечно не даёт никаких плюсов автору, но тем не менее. . . всё может быть. . .	Автозаполнение реквизитов при создании документа Maks 26.03.2026 Программный код из решения ниже размещается в модуле объекта документа, в процедуре "ПриСозданииНаСервере". Алгоритм проверки заполнения реализован для исключения перезаписи значения реквизита,. . .	Команды формы и диалоговое окно Maks 26.03.2026 1. Команда формы "ЗаполнитьЗапчасти". Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. В качестве источника данных. . .
Кому нужен AOT? DevAlt 26.03.2026 Решил сделать простой ланчер Написал заготовку: dotnet new console --aot -o UrlHandler var items = args. Split(":"); var tag = items; var id = items; var executable = args;. . .	Отправка уведомления на почту при создании или изменении элементов справочника Maks 24.03.2026 Программная отправка письма электронной почты на примере типового справочника "Склады" в конфигурации БП3. Перед реализацией необходимо выполнить настройку системной учетной записи электронной. . .	модель ЗдравоСохранения 5. Меньше увольнений- больше дохода! anaschu 24.03.2026 Теперь система здравосохранения уменьшает количество увольнений. 9TO2GP2bpX4 a42b81fb172ffc12ca589c7898261ccb/ https:/ / rutube. ru/ video/ a42b81fb172ffc12ca589c7898261ccb/ Слева синяя линия -. . .	Midnight Chicago Blues kumehtar 24.03.2026 Такой Midnight Chicago Blues, знаешь?. . Когда вечерние улицы становятся ночными, а ты не можешь уснуть. Ты идёшь в любимый старый бар, и бармен наливает тебе виски. Ты смотришь на пролетающие. . .

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

Решение