Форум

latter-day · #1 (**permalink**) 17.03.2013, 01:22

<html>
<head>
	<link type="text/css" rel="stylesheet" href="main.css">


[JS]<script type="text/javascript">
	function replace() {
	document.getElementById('first_active').style.backgroundPosition='-21px 0px'
	}
	function replace2() {
	document.getElementById('first_active').style.backgroundPosition='0px 0px'
	}
</script>[/JS]


</head>
<body>
<div id="slider">
	<div id="menu_block">
		<a id="logo" href="#"></a>
		<div id="menu">
		
			<a class="links" id="first_active"><span>01.</span> ФОТО<a>
			<a class="links" onMouseOver="replace()" onMouseOut="replace2()" href="#"><span>02.</span> ВИДЕО</a>
			<a class="links" onMouseOver="replace()" onMouseOut="replace2()" href="#"><span>03.</span> ЦЕНЫ</a>
			<a class="links" onMouseOver="replace()" onMouseOut="replace2()" href="#"><span>04.</span> ИНФО</a>
			<a class="links" onMouseOver="replace()" onMouseOut="replace2()" href="#"><span>05.</span> БЛОГ</a>
			
			<div id="lang"><strong>Ru</strong> / <a href="#">En</a></div>
		</div>
		<div id="slider_nav">
			<a id="left_button" title="Предыдущее фото" href="#"></a>
			<a id="right_button" title="Следующее фото" href="#"></a>
		</div>
		<div id="copyright">© 2007–2013</div>
	</div>
	<div id="box"></div>
</div>
</body>
</html>

Как правильно события onMouseOver и onMouseOut описать в скрипте (то есть исключить эти записи из html-кода)?

danik.js · #2 (**permalink**) 17.03.2013, 09:32

var links = document.querySelectorAll('#menu .links[href]');

for (var i = 0, link; link = links[i]; i++){
    link.onmouseover = replace;
    link.onmouseout = replace2;
}

latter-day · #3 (**permalink**) 18.03.2013, 00:33

Спасибо.

Можно ли корректно реализовать этот код без подключения jquery-библиотеки?

Сам сайт (пока главная страница): http://www.ilyanelin.ru
Эффект необходим для меню. Оно и сейчас работает, но хочется кошерно сделать)

danik.js · #4 (**permalink**) 18.03.2013, 05:00

Это не jQuery. querySelector не работает в IE7. Если нужна его поддержка, можно подцепить костыль.

constantant · #5 (**permalink**) 18.03.2013, 09:57

.menu a{
  background-position:0 0;
}
.menu a:hover{
  background-position:-21px 0;
}

в конкретном случае JS не нужен

danik.js · #6 (**permalink**) 18.03.2013, 11:55

constantant, тут меняется фон первой ссылки при наведении на последующие. Такого селектора в css нет пока.

constantant · #7 (**permalink**) 19.03.2013, 16:43

Сообщение от danik.js

тут меняется фон первой ссылки при наведении на последующие

ааа, ну тогда как-то так:

var menu = document.getElementById('menu');
menu.onmouseover = over;
menu.onmouseout = out;

function over(ev){
	var target = getTarget(ev);
	if(target.tagName == 'A'){
		toggleState(true);
	}
}
function out(ev){
	var target = getTarget(ev);
	if(target.tagName == 'A'){
		toggleState(false);
	}
}
function toggleState(state){
	menu.children[0].style.backgroundPosition = (state ? '-21px 0px' : '0 0');
}
function getTarget(ev){
	var event = ev || window.event;
	return event.target || event.srcElement;
}

latter-day · #8 (**permalink**) 20.03.2013, 09:47

Что-то не так: код вставил — не работает.

latter-day · #9 (**permalink**) 20.03.2013, 10:07

Сообщение от danik.js

Это не jQuery. querySelector не работает в IE7. Если нужна его поддержка, можно подцепить костыль.

Проблема в том что в таком виде не работает и в последнем хроме и иже с ним:

var links = document.querySelectorAll('#menu .links[href]');

for (var i = 0, link; link = links[i]; i++){
    link.onMouseOver = move;
    link.onMouseOut = move_;
	}
function move() {
	document.getElementById('active_1').style.backgroundPosition='0 -27px'
	}
function move_() {
	document.getElementById('active_1').style.backgroundPosition='0 0'
	}

danik.js · #10 (**permalink**) 20.03.2013, 11:18

Про таких говорят «Смотрит в книгу — видит фигу»
link.~~onMouseOver~~onmouseover
Обработчик можно назначить один для обоих событий, и менять класс (или фон напряму) в зависимости от event.type

Форум

Справочник

Discord чат

Курсы javascript