Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 17.03.2013, 01:22
Интересующийся
Отправить личное сообщение для latter-day Посмотреть профиль Найти все сообщения от latter-day
 
Регистрация: 22.10.2010
Сообщений: 15

onMouseOver и onMouseOut
<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-кода)?
Ответить с цитированием
  #2 (permalink)  
Старый 17.03.2013, 09:32
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

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

for (var i = 0, link; link = links[i]; i++){
    link.onmouseover = replace;
    link.onmouseout = replace2;
}
Ответить с цитированием
  #3 (permalink)  
Старый 18.03.2013, 00:33
Интересующийся
Отправить личное сообщение для latter-day Посмотреть профиль Найти все сообщения от latter-day
 
Регистрация: 22.10.2010
Сообщений: 15

Спасибо.

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

Сам сайт (пока главная страница): http://www.ilyanelin.ru
Эффект необходим для меню. Оно и сейчас работает, но хочется кошерно сделать)
Ответить с цитированием
  #4 (permalink)  
Старый 18.03.2013, 05:00
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Это не jQuery. querySelector не работает в IE7. Если нужна его поддержка, можно подцепить костыль.
Ответить с цитированием
  #5 (permalink)  
Старый 18.03.2013, 09:57
Аспирант
Отправить личное сообщение для constantant Посмотреть профиль Найти все сообщения от constantant
 
Регистрация: 30.07.2008
Сообщений: 87

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

в конкретном случае JS не нужен
Ответить с цитированием
  #6 (permalink)  
Старый 18.03.2013, 11:55
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

constantant, тут меняется фон первой ссылки при наведении на последующие. Такого селектора в css нет пока.
Ответить с цитированием
  #7 (permalink)  
Старый 19.03.2013, 16:43
Аспирант
Отправить личное сообщение для constantant Посмотреть профиль Найти все сообщения от constantant
 
Регистрация: 30.07.2008
Сообщений: 87

Сообщение от 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;
}
Ответить с цитированием
  #8 (permalink)  
Старый 20.03.2013, 09:47
Интересующийся
Отправить личное сообщение для latter-day Посмотреть профиль Найти все сообщения от latter-day
 
Регистрация: 22.10.2010
Сообщений: 15

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

Последний раз редактировалось latter-day, 28.03.2013 в 11:29.
Ответить с цитированием
  #9 (permalink)  
Старый 20.03.2013, 10:07
Интересующийся
Отправить личное сообщение для latter-day Посмотреть профиль Найти все сообщения от latter-day
 
Регистрация: 22.10.2010
Сообщений: 15

Сообщение от 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'
	}
Ответить с цитированием
  #10 (permalink)  
Старый 20.03.2013, 11:18
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

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

Последний раз редактировалось danik.js, 20.03.2013 в 11:22.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
проблема с событиями onMouseOut и onMouseOver zaman Общие вопросы Javascript 1 15.11.2012 15:22
проблема с событиями onMouseOut и onMouseOver IIIgun Общие вопросы Javascript 16 13.05.2011 21:55
onmouseover + onmouseout m0nya Events/DOM/Window 6 12.07.2010 13:36
Как совместить работу onmouseover, onmouseout и onclick Sed0Y Общие вопросы Javascript 11 11.08.2009 15:59
Не может сработать onclick из-за приоритета onmouseover и onmouseout Rodion Events/DOM/Window 7 28.05.2009 22:58