Выделение элемента при наведении
Задача такая: нужно при наведении на любой элемент страницы выделить его, но, выделить именно 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 |
да нет :)
это как indexOf получить, только со всего документа |
walik,
Я ни в коем случае не придираюсь. Просто я с подобной задачей сталкивался и хотел поделиться нюансами. :) |
subzey,
Я ничего против не имею) setter, ээээ примерно это что ли ?
document.getElementsByTagName('HTML')[0].innerHTML.indexOf(this.innerHTML)
this.innerHTML - содержимое объекта по которому кликнули. Бред какой то по моему))) |
Цитата:
если их будет два одинаковых, он будет показывать позицию первого. <html> <head> <title>It works!</title> </head> <body> <h1>It works!</h1> </body> </html> |
По моему никак нельзя.
А зачем вам вообще такое надо то ? |
Хотел написать ручной парсинг, чтобы человек нажал на элемент нужный, например "У вас <b>1</b> новое сообщение", нажимает на 1 и сохраняет, и эту единичку он может использовать куда хочет, т.е. скрипт должен сам определять, что человеку нужно пропарсить.
Для наглядности, после сохранения 1, записываются допустим <b> и </b> и парсится между этими двумя тегами при последующей загрузке этого сохранения, допустим уже 2 сообщения и в результате должно получиться чистое 2, без тегов и прочего мусора. |
так что, совсем никак?
|
Цитата:
|
| Часовой пояс GMT +3, время: 05:00. |