VPF::Поменять сlass динамически - Форум программистов

flashaa

Дата 7.3.2006, 15:39 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 796
Регистрация: 7.3.2006

Репутация: нет
Всего: 25

Хочу, чтобы при наведении на ячейку таблицы у нее поменялся класс(для анимации).
Такое видел уже, но у меня почему-то не работает smile

Вот страница(фрагмент):

Код


<table align="center" width="100%" border="0">
<tr>
    <td colspan="3">&nbsp;</td>
   </tr>
  <tr>
    <td class="menu1" onMouseOver="m_over();" width="30%" id="sdsd">События</td>

Вот код обработки события наведения мыши:

Код


function m_over()
{ 
window.event.srcElement.classname="menu2";
};

ничего не меняется, ячейка так и остается класса меню1.
Хотя когда беру id у srcElement'a , то id="sdsd" как у ячейки.
smile

Это сообщение отредактировал(а) flashaa - 7.3.2006, 15:42

Burrr

Дата 7.3.2006, 15:42 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 459
Регистрация: 4.9.2005

Репутация: 10
Всего: 20

className надо )

--------------------

JavaScript на fastcoder, sqlinfo.ru

flashaa

Дата 7.3.2006, 15:44 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 796
Регистрация: 7.3.2006

Репутация: нет
Всего: 25

Цитата(Burrr @ 7.3.2006, 15:42)

className надо )

где? В функции как раз и есть classname.

Zaman

Дата 7.3.2006, 15:53 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 219
Регистрация: 28.6.2004

Репутация: 1
Всего: 2

в JS есть привязка к верхнему и нижниму регистру букв, поэтому надо писать className(!!!!!!)
Так же чтобы не писать

Код


window.event.srcElement.classname="menu2";

можно сделать - так как то симпатичнее будет

Код


<table align="center" width="100%" border="0">
<tr>
    <td colspan="3">&nbsp;</td>
   </tr>
  <tr>
    <td class="menu1" onMouseOver="m_over(this);" width="30%" id="sdsd">События</td>

Код


function m_over(elem)
{ 
 if (elem)
    elem.className="menu2";
};

flashaa

Дата 7.3.2006, 16:02 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 796
Регистрация: 7.3.2006

Репутация: нет
Всего: 25

Cпасибо, в регистре букв было все дело!!
Мой вариант в правильном написании тоже работает!

12345c

Дата 9.3.2006, 18:14 (ссылка)

(нет голосов)

Загрузка ...

Круглый

Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 57
Всего: 101

flashaa, Ваш вариант не будет работать, если в ячейке будет

Код


<td><b>text</b></td>

, тогда класс применится к <b>. Поэтому нужен цикл поднимания до тега <td>

И сделан только для IE.
Добавлено @ 18:15
(поднимания по дереву DOM по offsetParent)

dstorm81

Дата 9.3.2006, 22:01 (ссылка)

(нет голосов)

Загрузка ...

бездельник

Профиль
Группа: Завсегдатай
Сообщений: 1178
Регистрация: 18.1.2006
Где: (16RU)

Репутация: 20
Всего: 39

для мозилов всяких надо всемето srcElement указать target
а можно проще сделать на ксс
то есть делаешь для a:hover стиль
и в ячейках будут ссылки с пустыми линками #
и работает тоже везде

типа этого

Код


<HTML>
<HEAD>
<TITLE>выпадающее меню (DOM)</TITLE>
<STYLE>
html, body{background-color:#eee;margin:0px;padding:0px}
#contForTbl{border-width:0px;background-color:lightgreen}
#menu div{width:150px;background-color:lightgreen;color:white;position:absolute;top:0;left:0;display:none;z-index:10;}
#menu a:link, #menu a:visited, #menu a:active{padding:3px 10px 3px 10px;display:block;background-color:transparent;color:royalblue;font-size:12px;font-weight:bold;text-align:left;font-family:Arial,sans-serif;text-decoration:none;width:*}
#menu a:hover{background-color:royalblue;color:white;text-decoration:none}
#contentForA td{border-width:0px;padding:0px}
#contentForA a:link, #contentForA a:visited, #contentForA a:active{vertical-align:sub;padding:3px 10px 3px 10px;display:block;background-color:transparent;color:white;font-size:12px;font-weight:bold;text-align:center;font-family:Arial,sans-serif;text-decoration:none}
#contentForA a:hover{background-color:royalblue;color:white;text-decoration:none;display:block;}
</STYLE>
<META http-equiv=Content-Type content="text/html; charset=windows-1251">
</HEAD>
<BODY>
<BR><BR><BR><BR><BR><BR><BR>
<CENTER>
<DIV id="contForTbl">
<TABLE cellspacing="0" cellpadding="0" border="0">
<TR id="contentForA" width="100%">
<TD><A onMouseOver="showMenu(this,'el1')" href="#" alt=''>первое меню</A></TD>
<TD><A onMouseOver="showMenu(this,'el2')" href="#" alt=''>второе меню</A></TD>
<TD><A onMouseOver="showMenu(this,'el1')" href="#" alt=''>третье меню</A>    </TD>
<TD><A onMouseOver="showMenu(this,'el2')" href="#" alt=''>четветое меню</A></TD>
</TR>
</TABLE>
</DIV>
</CENTER>
<DIV id="menu">
    <DIV id="el1">
<A href="#">первая подгруппа</A>
<A href="#">первая подгруппа</A>
<A href="#">первая подгруппа</A>
<A href="#">первая подгруппа</A>
<A href="#">первая подгруппа</A>
<A href="#">первая подгруппа</A>
<A href="#">первая подгруппа</A>
<A href="#">первая подгруппа</A>
    </DIV>
    <DIV id="el2">
<A href="#">вторая подгруппа</A>
<A href="#">вторая подгруппа</A>
<A href="#">вторая подгруппа</A>
<A href="#">вторая подгруппа</A>
<A href="#">вторая подгруппа</A>
    </DIV>
</DIV>
<script>
function showMenu(event,whoIs)
{
hideMenu();
var elem = document.getElementById(whoIs);
var pos = getPos(event);
elem.style.left=pos.x;
elem.style.top=pos.y+event.offsetHeight;
elem.style.display='block';
}
function getPos(event)
{
var pos ={x:0,y:0};
while(event)
{pos.x+=event.offsetLeft;pos.y+=event.offsetTop;event = event.offsetParent}
return pos
}

var handle2Menus=document.getElementById('menu').getElementsByTagName('DIV');
function hideMenu(){for(i=0;i<handle2Menus.length;i++) handle2Menus[i].style.display='none'}
document.onclick=hideMenu;
</SCRIPT>
</BODY>
</HTML>

выдернешь все лишнее, там сдецел другое, ну надеюсь пример понятен, если что, интересуйся

--------------------

на форуме с 8.12.2002 (http://forum.vingrad.ru/index.php?act=ST&f=10&t=4874&st=0#)

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »