Форум программистов, компьютерный форум, киберфорум
JavaScript для начинающих
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.67/6: Рейтинг темы: голосов - 6, средняя оценка - 4.67
0 / 0 / 0
Регистрация: 02.06.2019
Сообщений: 30
1

Сначала на странице две картинки в рамках и две кнопки с надписью «спрячь меня»

11.06.2019, 23:17. Показов 1171. Ответов 1
Метки нет (Все метки)

Помогите пожалуйста сделать задание.

ËÀÁÎÐÀÒÎÐÍÀß ÐÀÁÎ.pdf. При нажатии на кнопку картинка прячется, и надпись на кнопке меняется на «покажи меня». Если еще раз нажать на кнопку, картинка появляется и меняется надпись на кнопке. Картинки (свеча1.gif и свеча2.jpg) скопировать из сетевой папки. Параметры форматирования страницы:  Цвет фона темно-синий.  Картинки размером 200 на 200.  Рамка вокруг первой картинки: цвет #ffA089, тип outset, толщина 50, отступы по 5.  Рамка вокруг второй картинки: цвет # 89ffA0, тип outset, толщина 50, отступы по 5.  Рекомендуется: картинки и кнопки поместить в таблицу, функцию сделать с параметром. Параметр – номер картинки.
0

Помощь в написании контрольных, курсовых и дипломных работ здесь.

Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
11.06.2019, 23:17
Ответы с готовыми решениями:

Цикл, две картинки и две кнопки. JQuery
Как создать файл 3.html и добавить два рисунка, невидимые при загрузке страницы, и две кнопки. При...

Два состояния у кнопки - две картинки
Доброго времени суток. Простенький вопрос. Хочу вывести на кнопку две картинки: когда она...

Один ПК, две сетевухи, две сетки, две папки для общего доступа
Здравствуйте! В одном здании имеем две разделенные физически локальные сети. Есть возможность...

Две zadaчи легкие, но не для меня.
1 Если данное число x меньше нуля,то z присвоить значение большего из двух чисел x и y ,иначе z...

1
54 / 37 / 16
Регистрация: 09.02.2019
Сообщений: 134
13.06.2019, 13:14 2
HTML5
1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="../css/reset.css">
    <link rel="stylesheet" type="text/css" href="../css/style_type.css">
    <title></title>
</head>
<body>
<div class="one_image"> </div>
 
<div class="bott"> <span>Спрячь меня </span> </div>
</body>

CSS
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
body{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #1D1790;
    flex-direction: column;
    .one_image{
        height: 200px;
        width: 200px;
        border:50px outset #ffA089;
        padding: 5px;
        background-color:#DBBDBD;
        opacity: 1;
        transition: all 400ms ease-in-out;
 
    }
    .bott{
        
        width: 170px;
        height: 50px;
        background-color:#E3A90D;
        border-radius: 20px;
        margin-top: 50px;
 
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: 0 0 5px #F3E9E9;
        cursor: pointer;
 
        span{
            font-size: 17px;
            text-transform: uppercase;
            font-weight: 600;
            letter-spacing: 0.05;
 
        }
 
    }
}
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var obj = document.querySelector('.bott');
 
        obj.onclick = function(){
            let obj_img = document.querySelector('.one_image');
            let style_img =  getComputedStyle(obj_img); 
            
            if(Number.parseInt(style_img.height) > 0) {
                obj_img.style.height = 0;
                obj_img.style.opacity = 0;
                this.childNodes[1].innerText = "Покажи  меня";
            }else{  obj_img.style.height = 200+'px';
                    obj_img.style.opacity=1;
                    this.childNodes[1].innerText = "Спрячь";
                    }           
        }
сделано для 1-й картинки для второй я думаю копипастом справишься.
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
13.06.2019, 13:14

Две таблицы на странице
существует совершенно идиотское желание разместить два &lt;table&gt; в строку а не одну под...

две совершенно непонятных для меня программы
Люди добрые, кому не сложно, можете помочь разобратьтся с програмами: 3. Напишите программу...

Съехали две строки в странице
Здравствуйте. Сделал себе шаблон для написания отчетов (по геологии),- сегодня сел писать отчет и...

Две формы на одной странице
Пытаюсь зделать форму для асинхроного запроса . На странице должно быть 2 формы и отправлятса они...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
2
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.