Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.70/30: Рейтинг темы: голосов - 30, средняя оценка - 4.70
2 / 2 / 1
Регистрация: 02.12.2013
Сообщений: 32

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

02.12.2013, 22:02. Показов 6057. Ответов 2
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Подскажите как это реализовать?

Добавлено через 21 минуту
Можно-ли решить этот вопрос при помощи лишь HTML и CSS? Или нужно использовать java или php?
0
Лучшие ответы (1)
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
02.12.2013, 22:02
Ответы с готовыми решениями:

Срабатывают две функции при клике (один div сверху другого)
var qwer = 0 $(click_pod_menu).click(function(e){ qwer = (qwer ==0) ? 1 : 0; if (qwer == 1) { var e =...

Скрыть <DIV> при клике на динамическом баннере, находящемся в данном <DIV>
Добрый день. Есть &lt;li&gt; , в нем находится динамический баннер . Необходимо, чтобы при клике по баннеру происходил переход по ссылке,...

ToggleCLASS - прятать один div при клике в область другого
Как сделать так, чтоб если тыкаю в место определённого дива (назовём его главным) убирался другой див (назовём его панелью). Просто...

2
7 / 7 / 3
Регистрация: 28.01.2013
Сообщений: 70
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;
}
Вот только будет возвращаться первоначальное состояние после прекращения действия.
1
2 / 2 / 1
Регистрация: 02.12.2013
Сообщений: 32
03.12.2013, 12:47  [ТС]
Лучший ответ Сообщение было отмечено hehe-montana как решение

Решение

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.
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
03.12.2013, 12:47
Помогаю со студенческими работами здесь

Как переместить один div внутрь другого div для каждого поста на сайте?
На сайте есть посты (div id=&quot;post-XXXX_XXXX&quot;) В каждом из постов есть див например такого вида - &lt;div class=&quot;source&quot;&gt; ...

Показать div поверх другого div при наведении
У меня есть таблица. В каждой ячейке есть div. Так вот надо чтобы при наведении на этот блок, появлялся overlay и поверх него div....

Размещение нескольких блоков div внутри другого блока div
Хочу сделать шапку веб-страницы. Прикреплю ниже небольшую схему того, как она будет выглядеть. Хочу текст разместить в левой части шапки с...

Можно ли задать один блок div относительно другого div-а?
Привет. Пытаюсь сделать слои, по этому примеру. Там они используют абсолютное позиционирование и пишут: &quot;Как видите, мы выбрали...

Как поставить div по середине вертикально внутри другого div?
Заранее спасибо!! &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Best Promocodes&lt;/title&gt; &lt;meta charset=&quot;utf-8&quot;&gt; &lt;link...


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

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
Новые блоги и статьи
Хочу заставить корпорации вкладываться в здоровье сотрудников: делаю мат модель здравосохранения
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
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru