При клике на DIV меняется картинка другого DIV

@hehe-montana · Регистрация: 02.12.2013

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

Подскажите как это реализовать?

Добавлено через 21 минуту
Можно-ли решить этот вопрос при помощи лишь HTML и CSS? Или нужно использовать java или php?

@BaNdErOzZzZz · 03.12.2013, 02:42

Попробуй:

HTML5
1
2
  <div class="first_div"></div>
  <div class="second_div"></div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
div{
  width: 100px;
  height: 100px;
}
div.first_div{
  background: red;
}
div.second_div{
  background: blue;
}
div.first_div:active + div.second_div{
  background: #000;
}

и вот для дочернего:

HTML5
1
2
3
  <div class="first_div">
     <div class="second_div"></div>
  </div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
div{
  width: 100px;
  height: 100px;
}
div.first_div{
  background: red;
}
div.second_div{
  background: blue;
}
div.first_div:active div.second_div{
  background: #000;
}

Вот только будет возвращаться первоначальное состояние после прекращения действия.

@hehe-montana · 03.12.2013, 12:47 **[ТС]**

BaNdErOzZzZz спасибо, но все-таки нужно чтобы картинка не возвращалась после окончания события.

Господа, подскажите почему не работает данный код:

HTML5
1
2
3
4
<html>
<div id="first_div" onclick="change()"></div>
  <div id="second_div"></div>
 </html>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
<style type="text/css">
div{
  width: 100px;
  height: 100px;
}
#first_div{
  background: red;
}
#second_div{
  background: blue;
}
</style>

Java
1
2
3
4
5
<script type="text/javascript">
function change() {
document.getElementById('second_div').style.color = 'red';
}
</script>

Добавлено через 1 час 1 минуту
Вот такой, более правильный вариант тоже не работает:

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
<html>
        <head>
        <script type="text/javascript">
        function change() {
        document.getElementById('second_div').style.color = 'red';
        }
        </script>
    </head>
 
<body>
<div id="first_div" onclick="change()"></div>
<div id="second_div"></div>
</body>
 
<style type="text/css">
div{
  width: 100px;
  height: 100px;
}
#first_div{
  background: red;
}
#second_div{
  background: blue;
}
</style>
 
</html>

Пробовал на Opera 18 и IE (вроде 9)

Добавлено через 8 минут
Понял почему, в строчке:

JavaScript
1
document.getElementById('second_div').style.color = 'red';

нужно было использовать не ".color", а ".background"

А так-же получилось следующее:

JavaScript
1
document.getElementById('second_div').style.backgroundImage = "url('image.jpg')";

Вопрос решен.

Добавлено через 9 минут
Но возник другой - как правильно реализовать данную идею:

JavaScript
1
2
3
4
5
6
<script type="text/javascript">
        function change() {
        var i = document.getElementById('first_div').style.backgroundImage;
        document.getElementById('second_div').style.backgroundImage = "url('i')";
        }
</script>

Т.е. адрес картинки берется из first_div и применяется к second_div.

Новые блоги и статьи Все статьи Все блоги /
Хочу заставить корпорации вкладываться в здоровье сотрудников: делаю мат модель здравосохранения anaschu 22.03.2026 e7EYtONaj8Y Z4Tv2zpXVVo https:/ / github. com/ shumilovas/ med2. git	1С: Программный отбор элементов справочника по группе Maks 22.03.2026 Установка программного отбора элементов справочника "Номенклатура" из модуля формы документа. В качестве фильтра для отбора справочника служит группа номенклатуры. Отбор по наименованию группы. . .	Как я обхитрил таблицу Word Alexander-7 21.03.2026 Когда мигает курсор у внешнего края таблицы, и нам надо перейти на новую строку, а при нажатии Enter создается новый ряд таблицы с ячейками, то мы вместо нервных нажатий Энтеров мы пишем любые буквы. . .	Krabik - рыболовный бот для WoW 3.3.5a AmbA 21.03.2026 без регистрации и смс. Это не торговля, приложение не содержит рекламы. Выполняет свою непосредственную задачу - автоматизацию рыбалки в WoW - и ничего более. Однако если админы будут против -. . .
1С: Программный отбор элементов справочника по значению перечисления Maks 21.03.2026 Установка программного отбора элементов справочника "Сотрудники" из модуля формы документа. В качестве фильтра для отбора служит значение перечислений. / / Событие "НачалоВыбора" реквизита на форме. . .	Переходник USB-CAN-GPIO Eddy_Em 20.03.2026 Достаточно давно на работе возникла необходимость в переходнике CAN-USB с гальваноразвязкой, оный и был разработан. Однако, все меня терзала совесть, что аж 48-ногий МК используется так тупо: просто. . .	Оттенки серого Argus19 18.03.2026 Оттенки серого Нашёл в интернете 3 прекрасных модуля: Модуль класса открытия диалога открытия/ сохранения файла на Win32 API; Модуль класса быстрого перекодирования цветного изображения в оттенки. . .	SDL3 для Desktop (MinGW): Рисуем цветные прямоугольники с помощью рисовальщика SDL3 на Си и C++ 8Observer8 17.03.2026 Содержание блога Финальные проекты на Си и на C++: finish-rectangles-sdl3-c. zip finish-rectangles-sdl3-cpp. zip

@hehe-montana 2 / 2 / 1 Регистрация: 02.12.2013 Сообщений: 32

	При клике на DIV меняется картинка другого DIV 02.12.2013, 22:02. Показов 6057. Ответов 2 Метки нет (Все метки) Подскажите как это реализовать? Добавлено через 21 минуту Можно-ли решить этот вопрос при помощи лишь HTML и CSS? Или нужно использовать java или php? 0

При клике на DIV меняется картинка другого DIV

Решение