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-кода)? |
var links = document.querySelectorAll('#menu .links[href]');
for (var i = 0, link; link = links[i]; i++){
link.onmouseover = replace;
link.onmouseout = replace2;
}
|
Спасибо.
Можно ли корректно реализовать этот код без подключения jquery-библиотеки? Сам сайт (пока главная страница): http://www.ilyanelin.ru Эффект необходим для меню. Оно и сейчас работает, но хочется кошерно сделать) |
Это не jQuery. querySelector не работает в IE7. Если нужна его поддержка, можно подцепить костыль.
|
.menu a{
background-position:0 0;
}
.menu a:hover{
background-position:-21px 0;
}
в конкретном случае JS не нужен :) |
constantant, тут меняется фон первой ссылки при наведении на последующие. Такого селектора в css нет пока.
|
Цитата:
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;
}
|
Что-то не так: код вставил — не работает.
|
Цитата:
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'
}
|
Про таких говорят «Смотрит в книгу — видит фигу»
link. Обработчик можно назначить один для обоих событий, и менять класс (или фон напряму) в зависимости от event.type |
| Часовой пояс GMT +3, время: 13:36. |