Выделение элемента при наведении
Задача такая: нужно при наведении на любой элемент страницы выделить его, но, выделить именно 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;
|
<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>
|
спасибо, а как можно использовать без "<body onmouseover", а прямо в js? и исключить тег body из выделения
|
window.onload = function() {
document.body.onmouseover = over;
}
elem.tagName - имя тега текущего элемента |
спасибо большое.
последний вопрос. не знаете случайно, как найти позицию (номер символа) того самого элемента в исходном коде по клику? |
1. Что значит
Цитата:
2. По клику - это уже другое событие, тут уже надо еще и onclick вешать на документ. |
walik,
e.fromElement и e.relatedTarget могут быть null, например, если курсор наведен из-за пределов окна. А это грозит ошибкой "не могу присвоить свойство null/undefined".Если же курсор уводится за окно, событие mouseover, емнимс, не вызовется. |
1.
Цитата:
2. Цитата:
Если сделать так, то первая проблема сразу решается. В любом случае не собирался писать идеальный код, просто хотел показать более компактный (и по моему более правильный) вариант чем предложенный setter :thanks: :) |
Цитата:
<html> <body> <h1>text</h1> </body> </html> и при нажатии на text нужно узнать его позицию (в коде) например в этом коде позиция будет 22 думаю конечно что это не реально, но все же может есть какой-либо способ? |
Что то я не вникаю))) откуда взята цифра (позиция) 22 ?
Если взять с корня то он идет 3-й по счету: html -> body -> h1 |
| Часовой пояс GMT +3, время: 09:12. |