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

@littlefoxjoelle · Регистрация: 15.10.2019

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

Здравствуйте. Нужно сделать данное задание с использованием библиотеки jQuery.

Создать html-страницу. Поместить на страницу абзац, текстовое поле и изображение.
При нажатии на изображение, текст абзаца должен измениться на текст, который содержится в текстовом поле. При этом текст в текстовом поле должен исчезнуть и цвет текстового поля должен измениться на красный.
При наведении на абзац, размер изображения должен измениться в рандомном режиме (либо уменьшиться, либо увеличиться).

Из всего этого есть такой код:

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
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Лабораторная работа № 22 Задание 1</title>
    <script src ="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
   <p></p>
   <input type="text" value="Hello, World!"><br><br>
   <img src="christina-deravedisian-DCe_GY9vzXE-unsplash.jpg" alt="" width="750" height="500">
   <script>
    $( document ).ready(function(){
      $("img").click(function(){ 
       $("p").text('Hello, World!'); // задаем содержимое элементов <p>
        $("input").val(' '); 
        $("input").
      });
    });
        </script>
 
</body>
</html>

Осталось сделать так, чтобы изменялся цвет текстового поля и при наведении на абзац, размер изображения должен измениться в рандомном режиме (либо уменьшиться, либо увеличиться).

Заранее спасибо за помощь, кто откликнется

@Уф · 14.09.2020, 11:01

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
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Лабораторная работа № 22 Задание 1</title>
    <script src ="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
    <p id="p1"></p>
    <input id="i1" type="text" value="Hello, World!"><br><br>
    <img id="g1" src="christina-deravedisian-DCe_GY9vzXE-unsplash.jpg" alt="" width="750" height="500">
    <script>
    $( document ).ready(function(){
        $("#g1").click(function(){ 
            $("#p1").text($("#i1").val()); // задаем содержимое элементов <p>
            $("#i1").val('').css('background','#f00'); 
        });
        $('#p1').mouseover(function(){
            $('#g1').css({height: Math.random() * 500, width: Math.random() * 500});
        });
    });
    </script>
 
</body>
</html>

Новые блоги и статьи Все статьи Все блоги /
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .