Форум

espltd · #1 (**permalink**) 21.10.2014, 09:24

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

У меня при наведении на опр. div меняется картинка. Это работает. Мне нужно сделать, чтобы помимо смены картинки вылетел еще и доп. div с ссылками. Не могу раскурить как это сделать. Одно действие работает, а как 2 привязать не пойму. onmouseover не может же сразу 2 функции вызывать? Жаль...

Вот кусок кода

Сама функция для смены картинки

function changeDiv(){
document.getElementById("item_1").style.background Image="url('../images/reel_home_bg_1_1.jpg')";
document.getElementById("item_1").style.background Size = "100% 580px";
document.getElementById("item_1").style.background Repeat="no-repeat";
}

Вот нарыл в инете. А как объеденить не пойму

function openBlock(el) {
var kids = el.parentNode.childNodes;
for (var k = 0; k < kids.length; k++) {
var child = kids[k];
if (child && child.className == "this_block_is_hidden") {
if (child.style.display != 'block') {
child.style.display = 'block';
} else {
child.style.display = 'none';
}
}
}
}

Всем спасибо за советы, критику и т.д)

рони · #2 (**permalink**) 21.10.2014, 09:35

espltd,
html и Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[js]
... ваш код...
[/js]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

espltd · #3 (**permalink**) 21.10.2014, 09:51

<div class="slider1">

<div class="sliderContent">
<div class="item">
<img src="<?php echo Yii::app()->request->baseUrl; ?>/images/reel_home_bg_0_1.jpg" width="100%" height="580px" />

<div id="item_1" class="ekran"></div>

<div id="real_car">

<div id="real_car_1" class="real_car_1" onmouseover="changeDiv()" onmouseout="defaultDiv()"></div>

</div>

</div>
</div>

espltd · #4 (**permalink**) 21.10.2014, 09:53

function changeDiv(){
  document.getElementById("item_1").style.backgroundImage="url('../images/reel_home_bg_1_1.jpg')"; 
  document.getElementById("item_1").style.backgroundSize = "100% 580px";
  document.getElementById("item_1").style.backgroundRepeat="no-repeat"; 
}

function openBlock(el) {
	var kids = el.parentNode.childNodes;
	for (var k = 0; k < kids.length; k++) {
		var child = kids[k];
		if (child && child.className == "this_block_is_hidden") {
			if (child.style.display != 'block') {
				child.style.display = 'block';
			} else {
				child.style.display = 'none';
			}
		}
	}
}

Вот как мне сделать, чтобы при наведении на опр. div, вызывалось либо сразу 2 функции либо как то объединить. Есть в html 5 картинок, над каждой в position: absolute висит див, т.е. 5 дивов горизонтально. При наведении на любой див, картинка меняется. Это я сделал. работает. А как добавить, чтобы при смене картинки ещё и div дополнительный с ссылками выезжал. Спасибо.

hfts_rider · #5 (**permalink**) 21.10.2014, 10:21

Зачем тебе это?
Просто повесь событие на блок и в этом событии пропиши все что тебе нужно.
Пример

рони · #6 (**permalink**) 21.10.2014, 10:29

espltd,
может без скриптов ...

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .slider .item{
     width: 100px;
     height: 100px;
      background: url(http://javascript.ru/forum/images/smilies/write.gif)
  }
  .slider:hover .item{
     background: url(http://javascript.ru/forum/images/smilies/victory.gif)
  }
 .slider .real_car{
    width: 100px;
    height: 0px;
    background: rgba(0, 255, 0, 1);
    transition: all 1s ease-in-out;
  }
 .slider:hover .real_car{
    height: 100px;
  }
  </style>
</head>

<body>
<div class="slider">
 <div class="sliderContent">
 <div class="item"></div>
 <div class="real_car"></div>
 </div>
 </div>

</body>
</html>

espltd · #7 (**permalink**) 21.10.2014, 10:35

Ребят, спасибо всем. Сейчас попробую и тот и тот метод, посмотрю какой лучше подойдет.

Форум

Справочник

Discord чат

Курсы javascript