04.05.2011, 16:24
|
|
Интересующийся
|
|
Регистрация: 04.05.2011
Сообщений: 19
|
|
|
Выделение элемента при наведении
Задача такая: нужно при наведении на любой элемент страницы выделить его, но, выделить именно 1 элемент.
Моя реализация чуть ниже. Проблема в том, что при наведении он выделяет и родителей элемента. 
function MouseOver()
{
this.style.background="#FFFF00";
this.style.color="#000";
this.style.cursor="pointer";
this.style.border="1px solid #FF0000";
}
function MouseOut()
{
this.style.background="";
this.style.color="";
this.style.border="";
}
function start() {
var elements = document.getElementsByTagName("*");
for(i=0; i<elements.length; i++)
{
if(elements[i].tagName!="BODY" && elements[i].tagName!="HTML")
{
elements[i].onmouseover = MouseOver;
elements[i].onmouseout = MouseOut;
}
}
}
window.onload = start;
Последний раз редактировалось setter, 04.05.2011 в 16:31.
|
|
04.05.2011, 16:37
|
 |
Профессор
|
|
Регистрация: 09.11.2009
Сообщений: 1,101
|
|
<html>
<head>
<script type="text/javascript" language="javascript">
function over(e) {
var e = e || window.event;
var elem = e.srcElement || e.target;
var relatedTarget = e.relatedTarget || e.fromElement
relatedTarget.style.background="";
relatedTarget.style.color="";
relatedTarget.style.border="";
if (elem.tagName == 'BODY')
return;
elem.style.background="#FFFF00";
elem.style.color="#000";
elem.style.cursor="pointer";
elem.style.border="1px solid #FF0000";
}
</script>
</head>
<body onmouseover="over(event);">
<div>
<img src="http://javascript.ru/forum/images/smilies/smile.gif" /><br />
<span>text text text text</span><br />
<div>other text other text other text</div>
</div>
<img src="http://javascript.ru/forum/images/smilies/tongue.gif" />
<span>bla bla bla bla</span>
</body>
</html>
__________________
"Всегда пишите код так, будто сопровождать его будет склонный к насилию психопат, который знает, где вы живете." 
Мой сертификат :-D клацай
Последний раз редактировалось walik, 04.05.2011 в 16:46.
|
|
04.05.2011, 16:51
|
|
Интересующийся
|
|
Регистрация: 04.05.2011
Сообщений: 19
|
|
|
спасибо, а как можно использовать без "<body onmouseover", а прямо в js? и исключить тег body из выделения
|
|
04.05.2011, 16:54
|
|
Профессор
|
|
Регистрация: 09.11.2009
Сообщений: 1,101
|
|
window.onload = function() {
document.body.onmouseover = over;
}
elem.tagName - имя тега текущего элемента
__________________
"Всегда пишите код так, будто сопровождать его будет склонный к насилию психопат, который знает, где вы живете."
Мой сертификат :-D клацай
|
|
04.05.2011, 17:12
|
|
Интересующийся
|
|
Регистрация: 04.05.2011
Сообщений: 19
|
|
|
спасибо большое.
последний вопрос. не знаете случайно, как найти позицию (номер символа) того самого элемента в исходном коде по клику?
|
|
04.05.2011, 17:15
|
|
Профессор
|
|
Регистрация: 09.11.2009
Сообщений: 1,101
|
|
1. Что значит
|
Сообщение от setter
|
|
позицию (номер символа)
|
?
2. По клику - это уже другое событие, тут уже надо еще и onclick вешать на документ.
__________________
"Всегда пишите код так, будто сопровождать его будет склонный к насилию психопат, который знает, где вы живете."
Мой сертификат :-D клацай
|
|
04.05.2011, 17:48
|
 |
Пионэр
|
|
Регистрация: 16.11.2009
Сообщений: 1,322
|
|
|
walik,
e.fromElement и e.relatedTarget могут быть null, например, если курсор наведен из-за пределов окна. А это грозит ошибкой "не могу присвоить свойство null/undefined".
Если же курсор уводится за окно, событие mouseover, емнимс, не вызовется.
|
|
04.05.2011, 17:56
|
|
Профессор
|
|
Регистрация: 09.11.2009
Сообщений: 1,101
|
|
1.
|
Сообщение от subzey
|
|
e.fromElement и e.relatedTarget могут быть null, например, если курсор наведен из-за пределов окна.
|
Об этом не подумал))
2.
|
Сообщение от subzey
|
|
Если же курсор уводится за окно, событие mouseover, емнимс, не вызовется.
|
Для этого уже можно разбить на 2 функции (mouseover и mouseout)
Если сделать так, то первая проблема сразу решается.
В любом случае не собирался писать идеальный код, просто хотел показать более компактный (и по моему более правильный) вариант чем предложенный setter
 
__________________
"Всегда пишите код так, будто сопровождать его будет склонный к насилию психопат, который знает, где вы живете."
Мой сертификат :-D клацай
Последний раз редактировалось walik, 04.05.2011 в 17:59.
|
|
04.05.2011, 19:06
|
|
Интересующийся
|
|
Регистрация: 04.05.2011
Сообщений: 19
|
|
Сообщение от walik
|
1. Что значит
?
|
ну например есть следующий код
<html>
<body>
<h1>text</h1>
</body>
</html>
и при нажатии на text нужно узнать его позицию (в коде)
например в этом коде позиция будет 22
думаю конечно что это не реально, но все же может есть какой-либо способ? |
|
04.05.2011, 19:09
|
|
Профессор
|
|
Регистрация: 09.11.2009
Сообщений: 1,101
|
|
|
Что то я не вникаю))) откуда взята цифра (позиция) 22 ?
Если взять с корня то он идет 3-й по счету: html -> body -> h1
__________________
"Всегда пишите код так, будто сопровождать его будет склонный к насилию психопат, который знает, где вы живете."
Мой сертификат :-D клацай
|
|
|
|
