OnMouseOver смена стиля на другой

Flo · November 30, 2007

в stylesheet.css описаны, допустим, два стиля для DIV

#lefttextdiv {
...
}

#lefttextdiv_ {
...
}

как при наведении на div поменять текущий стиль "lefttextdiv" на "lefttextdiv_"

yopopt · November 30, 2007

document.getElementById('lefttextdiv').id = 'lefttextdiv_';

Flo · November 30, 2007

о, работает, только меняется стиль не текущего дива, а первого попавшегося на странице, самого верхнего (на странице несколько слоев такого стиля)

как сделать, чтоьы менялся стиль только того дива на который наводят мышь?

Петр · November 30, 2007

о, работает, только меняется стиль не текущего дива, а первого попавшегося на странице, самого верхнего (на странице несколько слоев такого стиля)
как сделать, чтоьы менялся стиль только того дива на который наводят мышь?

скорее всего из-за того что у вас одинаковые ID для нескольких дивов, чего быть не должно, другое дело классы...

Flo · November 30, 2007

так и есть

а как решить проблему, используя классы?

картина такая, есть несколько боксов описаных стилем lefttextdiv стоящих подряд... и при наведении мне надо менять на другой...

Петр · November 30, 2007

так и есть
а как решить проблему, используя классы?
картина такая, есть несколько боксов описаных стилем lefttextdiv стоящих подряд... и при наведении мне надо менять на другой...

вместо ID прописывайте class, т.е. у дивов должен быть одинаковый класс, а ID указывайте тому диву, который необходим.

изменить можно:

document.getElementById('имя_id').className = 'lefttextdiv_';

Flo · November 30, 2007

спасибо, ребята! разобрался

Flo · November 30, 2007

хм... не работает в файрфоксе и навигаторе, в опере и ИЕ работает

yopopt · November 30, 2007

хм... не работает в файрфоксе и навигаторе, в опере и ИЕ работает

Вс? работает. Вот набросал примерчик:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Title</title>
<style type="text/css">
	#main, #second {
		margin-right:50px;
		float:left;
	}
	#main div, #second div {
		height:100px;
		width:200px;
		border: 1px solid black;
	}
	.test {
		background-color:blue;
	}
	.red {
		background-color:red;
	}
</style>
<script type="text/javascript">
<!--
changeclass = function(oldclass, newclass, id) {
	var node = ((id === undefined) ? document.getElementsByTagName('body')[0] : document.getElementById(id)).getElementsByTagName('*');
	for(var i=0; i<node.length; i++) {
		if(node[i].className != '') node[i].className = node[i].className.replace(oldclass, newclass);
	}
	return false;
}
// -->
</script>
</head>
<body>
<div id="main">
	<a href="#" onclick="return changeclass('test', 'red', 'main');">Сменить класс в блоке #main</a>
	<div class="test">test</div>
	<div class="q">q</div>
	<div class="test">test</div>
	<div class="qq">qq</div>
	<div class="test">test</div>
</div>
<div id="second">
	<a href="#" onclick="return changeclass('test', 'red');">Сменить класс во вс?м документе</a>
	<div class="test">test</div>
	<div class="q">q</div>
	<div class="test">test</div>
	<div class="qq">qq</div>
	<div class="test">test</div>
</div>
</body>
</html>

Функции changeclass() передются аргументы: искомый класс(старый); новый класс; id элемента в котором искать. Первые два являются обязательными, последний нет. Если он не задан, то поиск производится в теге body. Надеюсь Вы разбер?тесь как он работает.

Думаю скрипт далеко не идеален(сделан на коленке за 15 минут), так что есть простор для творчества.

Upd: Нда, в который раз убедился что стоит подумать, а потом лишь писать... Упростил скрипт.

Flo · November 30, 2007

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Title</title>
<style type="text/css">

.lefttextdiv {
}

#out1, #out2, #out3, #out4, #out5, #out6, #out7, #out8, #out9, #out10 
{
color: green;
}

#hover1, #hover2, #hover3, #hover4, #hover5, #hover6, #hover7, #hover8, #hover9, #hover10
{
 color: white;
 cursor: pointer;
}

</style>
</head>
<body>

 <div class=lefttextdiv id="out1" onmouseover="this.document.getElementById('out1').id = 'hover1';" onmouseout="document.getElementById('hover1').id = 'out1';">
 <p id=textmenu>text1</p>
</div>
 <div id=leftsubdiv_1></div>
 <div id=leftfreediv></div>
 <div class=lefttextdiv id="out2" onmouseover="this.document.getElementById('out2').id = 'hover2';" onmouseout="document.getElementById('hover2').id = 'out2';">
 <p id=textmenu>text2</p>
</div>
 <div id=leftsubdiv_2></div>
 <div id=leftfreediv ></div>
 <div class=lefttextdiv id="out3" onmouseover="this.document.getElementById('out3').id = 'hover3';" onmouseout="document.getElementById('hover3').id = 'out3';">
 <p id=textmenu>text3</p>
</div>
 <div id=leftsubdiv_3></div>
 <div id=leftfreediv></div>
 <div class=lefttextdiv id="out4" onmouseover="this.document.getElementById('out4').id = 'hover4';" onmouseout="document.getElementById('hover4').id = 'out4';">
 <p id=textmenu>text4</p>
</div>
 <div id=leftsubdiv_4></div>
 <div id=leftfreediv></div>
 <div class=lefttextdiv id="out5" onmouseover="this.document.getElementById('out5').id = 'hover5';" onmouseout="document.getElementById('hover5').id = 'out5';">
 <p id=textmenu>text5</p>
</div>
 </body>
</html>

в файрфоксе не работает такой код, а в опере и ИЕ работает

почему?

yopopt · November 30, 2007

Пишите либо так:

onmouseover="document.getElementById('out5').id = 'hover5';"

либо так:

onmouseover="this.id = 'hover5';"

А то глупость получается.

Петр · November 30, 2007

почему?

Отвечая на вопрос почему:

this - указатель на объект.

через точку "." мы обращаемся к свойству или методу объекта.

Вы пишите this.getElementByID()... т.е. др. словами объект.объект.свойство/метод, что есть не верно.

AKS · December 1, 2007

...объект.объект.свойство/метод, что есть не верно.

Что же в этом неверного?

Петр · December 1, 2007

Что же в этом неверного?

Вот что бы тебя "сделать" нуно было два человека...

папа и мама.

т.е.

папа.тр-ать()

мама.рожать()

а там было написано:

папа.папа.тр-ать()

или

мама.мама.рожать()

AKS · December 1, 2007

Вот что бы тебя "сделать" нуно было два человека...
папа и мама.
т.е.
папа.тр-ать()
мама.рожать()

Неудачный пример.

а там было написано:
папа.папа.тр-ать()
или
мама.мама.рожать()

Тривиальный код (вызвать в любом месте документа), который будет выполнен верно во всех отношениях:

if (typeof this == 'object' && typeof this.document == 'object') {
 alert(this.document.getElementById);
};

Dimitry Wolotko · December 1, 2007

Петр, следи за языком. Слишком уж живые примеры и сравнения.

Петр · December 1, 2007

Петр, следи за языком. Слишком уж живые примеры и сравнения.

прошу прощение

Петр · December 1, 2007

Тривиальный код (вызвать в любом месте документа), который будет выполнен верно во всех отношениях:
if (typeof this == 'object' && typeof this.document == 'object') {
 alert(this.document.getElementById);
};

Я прошу прощение за свою писнину.

Но привидите мне пример кода, работающего кода, где this.document.getElementById будит работать.

AKS · December 1, 2007

...привидите мне пример кода, работающего кода, где this.document.getElementById будит работать.

С удовольствием (упрощенно, без лишних проверок):

<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN' 'http://www.w3.org/TR/html4/strict.dtd'>
<html>
<head>
<title>test</title>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251'>
</head>
<body>
 <div>
 <a href='#' onclick='(this.document || this.ownerDocument)
 .getElementById("test")
 .style.display = "block";'
 title=''>
 Click me, Peter!
 </a>
 </div> 
 <div id='test' style='display:none'>
 Look, ma! It works!
 </div>
</body>
</html>

Петр · December 1, 2007

С удовольствием (упрощенно, без лишних проверок):

Аааа не честно

Использовать свойство ownerDocument мы так не договаривались.

Изначально стоял вопрос, почему this.document.getElementById не работает под FF.

Да и не кажется ли вам, что:

<a href='#' onclick='(this.document || this.ownerDocument)
 .getElementById("test")
 .style.display = "block";'
 title=''>

слишком неудобно писать для кросбраузерности, куда проще

document.getElementById("test").style.display = "block";

AKS · December 2, 2007

Использовать свойство ownerDocument мы так не договаривались.

Справедливости ради добавлю, что мы с Вами вообще ни о чем не договаривались.

Изначально стоял вопрос, почему this.document.getElementById не работает под FF.

Совершенно верно! И, как ни странно, я своим примером косвенно ответил на этот вопрос. А ведь я преследовал другую цель.

Возвращаясь к вашей сентенции "объект.объект.свойство/метод, что есть не верно", теперь можно сказать, что она даже рядом не лежит с той плоскостью, в которой находится правильный ответ. Более того - она вообще не имеет ничего общего с реальным положением дел.

...((this.document || this.ownerDocument).getElementById("test").style.display = "block") слишком неудобно писать для кросбраузерности, куда проще
document.getElementById("test").style.display = "block";

Очевидный и неоспоримый факт. Только Вы напрасно обращаете на это мое внимание, поскольку этот демонстарционный пример был написан мной, как я упомянул чуть выше, совершенно в других целях. Для того, чтобы это понять, достаточно будет взглянуть на то, с чего я начал в этой теме...

Петр · December 2, 2007

Совершенно верно! И, как ни странно, я своим примером косвенно ответил на этот вопрос. А ведь я преследовал другую цель.

Вы молодец, все таки да... молодец. Ответили верно, хоть и косвенно.

объект.объект.свойство/метод а вот это было написано для примера выше.

т. е.

указатель на объект(this) он же объект.getElementById("") сново наш объект.а далее меняем стиль - и где же здесь я ошибся? напишите правильный ответ.

AKS · December 2, 2007

..и где же здесь я ошибся?

Сколько можно писать одно и тоже? Попробую последний раз (надежда умирает последней).

Итак, было:

this.document.getElementById('out1').id = 'hover1';

Затем последовал комментарий:

объект.объект.свойство/метод, что есть не верно.

Для полной картины (вроде так тоже не бывает) было добавлено еще:

мама.мама.рожать()

Ну и наконец:

указатель на объект(this) он же объект.getElementById("") сново наш объект

А теперь возьмите мои примеры и выясните, наконец, что есть результат вычисления выражений:

1. this

2. this.document

3. this.document.getElementById(/*any id that you want*/)

Петр · December 2, 2007

Попробую последний раз (надежда умирает последней).

Надежда умерла, я не понимаю что вы хотите мне тут доказать.

что запись this.document.getElementById(/*any id that you want*/) для данного примера

<div class=lefttextdiv id="out1" onmouseover="this.document.getElementById('out1').id = 'hover1';" onmouseout="document.getElementById('hover1').id = 'out1';">

куда лучше чем this.id='' или что?

А может я тупой?... хм...

тогда вы мы покажите на "пальцах" вот как-то так объект.объект.свойство/метод или вот так мама.мама.рожать()

А этот пример this.document.getElementById(/*any id that you want*/) ничего в себе не нес?т для данного примера (пример см. выше в теге CODE).

AKS · December 2, 2007

...я не понимаю что вы хотите мне тут доказать.

Я не хочу доказать, я уже доказал, что:

объект.объект.свойство/метод, что есть не верно.

а также:

мама.мама.рожать()

- это вздор.

А может я тупой?... хм...

Создайте в отдельной теме опрос участников форума.

D.S.Denton · December 2, 2007

2Петр

объект.объект.свойство/метод - некорректная аналогия, т.к. по ДОМу имеем [окно.]объект.свойство.метод

this = текущее окно, в принципе это можн опускать, но при использовании ничего страшного не происходит, наоборот, помогает избежать ошибок по невнимательности

Sign In

OnMouseOver смена стиля на другой

Question

Link to comment

Share on other sites

26 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Обсуждения

Important Information