На html языке отобразить картинку и кнопку

@powerking11 · Регистрация: 28.04.2016

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

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

@Freeze_Breeze · 09.12.2017, 21:44

powerking11, а это точно на одном HTML?

@AlexZaw · 09.12.2017, 21:53

Freeze_Breeze, можно на html+css такое сделать, а вообще в ветке по JS есть дублирующая тема

@Freeze_Breeze · 09.12.2017, 21:58

AlexZaw, точно на HTML и CSS такое можно сделать? А разве css или html отслеживают событие нажатие мышки по кнопке?

@AlexZaw · 09.12.2017, 22:02

Не отслеживают, но для двух картинок можно использовать checkbox и когда он отмечен показывать одну картинку,а когда не отмечен другую

@mrtoxas · 09.12.2017, 22:03

HTML5
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
<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .hidden,
    .img-wrapper img {
      display: none;
    }
    #inp:not(:checked) ~ .img-wrapper .one,
    #inp:checked ~ .img-wrapper .two {
      display: inline;
    }
  </style>
</head>
 
<body>
  <div class="wrapper">
    <input type="checkbox" id="inp" class="hidden">
    <label for="inp">Кнопка</label>
    <div class="img-wrapper">
      <img class="one" src="http://cyberstatic.net/images/statusicon/user_online.png" alt="">
      <img class="two" src="http://cyberstatic.net/images/statusicon/user_offline.png" alt="">
    </div>
  </div>
</body>
 
</html>

@aj17 · 09.12.2017, 22:25

Сообщение от powerking11

а 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
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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
 
        .box {
            max-width: 960px;
            margin: 0 auto;
            text-align: center;
        }
 
        .btn {
            font: 16px/24px Arial;
            padding: 10px;
            display: inline-block;
            vertical-align: top;
            color: #ccc;
            border: 1px solid #ccc;
            border-radius: 4px;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            -o-user-select: none;
            user-select: none;
            margin: 40px;
            cursor: pointer;
        }
 
        .check-hidden:checked~.btn {
            color: darkblue;
            border-color: darkblue;
        }
 
 
 
        .check-hidden:checked~.img-box .item:first-child {
            display: block;
        }
 
        .check-hidden:checked~.img-box .item:last-child,
        .item:not(:last-child) {
            display: none;
        }
 
    </style>
</head>
 
<body>
 
    <div class="box">
        <input hidden class="check-hidden" id="some-id" type="checkbox">
        <label for="some-id" class="btn">Кнопка</label>
        <div class="img-box">
            <div class="item">
                <h4>Картинка 1</h4>
                <img src="https://www.placehold.it/300" alt="">
            </div>
            <div class="item">
                <h4>Картинка 2</h4>
                <img src="https://www.placehold.it/200" alt="">
            </div>
        </div>
    </div>
 
 
</body>
 
</html>

@powerking11 · 09.12.2017, 23:05 **[ТС]**

не работают ваши коды(
https://www.radikal.kz/image/CCO
https://www.radikal.kz/image/CCO

Добавлено через 4 минуты
я думаю можно при нажатии на кнопку менять стиль. В стилях задать картинку.
Но как это реализовать?

@Fourd · 10.12.2017, 09:37

тык

HTML5
1
2
3
4
5
6
7
<div class="wrap">
  <img src="https://www.w3schools.com/w3css/img_lights.jpg" alt="testImg2" />
  <label>
    <input type="checkbox" name="checkbox" value="value" hidden>
    <img src="https://www.w3schools.com/w3css/img_fjords.jpg" alt="testImg" />
  </label>
</div>

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
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
 
.wrap {
  position: relative;
}
 
.wrap img {
  position: absolute;
}
 
.wrap label {
  display: inline-block;
  position: relative;
  width: 600px; /* установить свой размер изображения */
  height: 400px; /* установить свой размер изображения */
}
 
.wrap input[type=checkbox]:checked ~ img {
  z-index: -10;
}

@powerking11 · 10.12.2017, 14:51 **[ТС]**

открывает две картинки ,и при нажатии ничерта не происходит(
https://www.radikal.kz/image/Czn

@Fourd · 10.12.2017, 16:23

а вы стили добавили? подключили их?

@powerking11 · 10.12.2017, 17:34 **[ТС]**

JavaScript
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
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru">
 
<head>
 
    <title>Надя</title>
    
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    
</head>
<body>
 
<style>
    body {padding: 50px 0; margin: 0;}
    .img {display: block; width: 500px; margin: 0 auto 30px; padding: 2px; border: 1px solid #d8d8d8;}
    .btn {display: block; width: 300px; height: 50px; font-size: 18px; line-height: 50px; padding: 0; border: 0; margin: 0 auto; background: #ffb400; transition: all 0.3s ease 0s;}
    .btn:hover {background: #ff8d00; cursor: pointer;}
    .btn:focus {outline: 0;}
</style>
 
<img src="https://pp.userapi.com/c639429/v639429545/4f05f/CQeMjroeoAw.jpg" data-alt="https://pp.userapi.com/c841025/v841025993/1ff1c/-r-ICIz8v_c.jpg" class="img" id="img" alt="" />
 
<button class="btn" id="btn">Change image</button>
 
<script>
    $('#btn').click(function(){
        el = $('#img');
        newImg = el.attr('data-alt');
        oldImg = el.attr('src');
        el.attr('src', newImg);
        el.attr('data-alt', oldImg);
    });
</script>
 
</body>
</html>

Всем спасибо,получилось только на JS

@Freeze_Breeze · 10.12.2017, 17:52

powerking11, тогда зачем нужно было писать, что вам нужно только на HTML языке отобразить?

@powerking11 · 10.12.2017, 17:59 **[ТС]**

затем что препод мой туповат и не умеет давать точные задания)

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .

@powerking11 3 / 3 / 0 Регистрация: 28.04.2016 Сообщений: 110

	На html языке отобразить картинку и кнопку 09.12.2017, 21:23. Показов 521. Ответов 13 Метки нет (Все метки) На html языке отобразить картинку и кнопку.При нажатии на кнопку должна отображатся другая картинка ,при повторном нажатии снова первая картинка ,так каждое нажатие 0

@Freeze_Breeze 278 / 272 / 106 Регистрация: 12.01.2016 Сообщений: 1,666
	09.12.2017, 21:44
	powerking11, а это точно на одном HTML? 0

@AlexZaw Модератор 2379 / 1739 / 677 Регистрация: 07.08.2016 Сообщений: 4,094
	09.12.2017, 21:53
	Freeze_Breeze, можно на html+css такое сделать, а вообще в ветке по JS есть дублирующая тема 0

@Freeze_Breeze 278 / 272 / 106 Регистрация: 12.01.2016 Сообщений: 1,666
	09.12.2017, 21:58
	AlexZaw, точно на HTML и CSS такое можно сделать? А разве css или html отслеживают событие нажатие мышки по кнопке? 0

@AlexZaw Модератор 2379 / 1739 / 677 Регистрация: 07.08.2016 Сообщений: 4,094
	09.12.2017, 22:02
	Не отслеживают, но для двух картинок можно использовать checkbox и когда он отмечен показывать одну картинку,а когда не отмечен другую 0

@powerking11 3 / 3 / 0 Регистрация: 28.04.2016 Сообщений: 110
	09.12.2017, 23:05 [ТС]
	не работают ваши коды( https://www.radikal.kz/image/CCO https://www.radikal.kz/image/CCO Добавлено через 4 минуты я думаю можно при нажатии на кнопку менять стиль. В стилях задать картинку. Но как это реализовать? 0

@powerking11 3 / 3 / 0 Регистрация: 28.04.2016 Сообщений: 110
	10.12.2017, 14:51 [ТС]
	открывает две картинки ,и при нажатии ничерта не происходит( https://www.radikal.kz/image/Czn 0

@Fourd 98 / 98 / 46 Регистрация: 21.03.2012 Сообщений: 378
	10.12.2017, 16:23
	а вы стили добавили? подключили их? 0

@Freeze_Breeze 278 / 272 / 106 Регистрация: 12.01.2016 Сообщений: 1,666
	10.12.2017, 17:52
	powerking11, тогда зачем нужно было писать, что вам нужно только на HTML языке отобразить? 0

@powerking11 3 / 3 / 0 Регистрация: 28.04.2016 Сообщений: 110
	10.12.2017, 17:59 [ТС]
	затем что препод мой туповат и не умеет давать точные задания) 0