Перейти из форума на сайт.

НовостиФайловые архивы
ПоискАктивные темыТоп лист
ПравилаКто в on-line?
Вход Забыли пароль? Первый раз на этом сайте? Регистрация
Компьютерный форум Ru.Board » Интернет » Web-программирование » JavaScript: смена стиля ячейки при наведении мыши

Модерирует : Cheery

 Версия для печати • ПодписатьсяДобавить в закладки

Открыть новую тему     Написать ответ в эту тему

Church



Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Код:
<td onMouseOver="this.bgColor='#D7C399'" onMouseOut="this.bgColor=''">- <a href="chat.php">Чат</a></td>

 
Меняет фон при наведении...
НО!
 
а) Как сделать так, чтобы не только менялся фон, но и становилась рамочка )border:1px solid)... То есть как всунуть туда смену CSS. Нашёл какой-то решение, жаль, что не могу его привести... Но... При этом даже обычная смена фона - тормозила очень сильно...
б) Если я использую много ссылок - вышенаписанный метод - становится довольно-такие громоздким... Как его сделать в JS?
Ну, типа
<script>
function bg_smena(){
//Ля-ля-фа.... Мучился - не получилось никак (
}
</srcipt>
 
Кто может что знает - подскажите, пожалуйста...




п. 0011.1 Правил:
Цитата:
Если тема касается JavaScript, то в заголовке необходимо упоминать именно JavaScript, а не Java (это абсолютно разные языки!) и не что-либо другое
Исправил JS на JavaScript. — Svarga.

Всего записей: 1199 | Зарегистр. 05-09-2003 | Отправлено: 23:05 29-02-2004 | Исправлено: Svarga, 21:59 01-03-2004
Liksu



Member
Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору
Попробуй так:
 
<style>
.a1 {
background-color: Aqua;
}
.a2 {
border-left-color: #2F4F4F;
border-left-style: dotted;
background: lightyellow;
border: 2px dashed #FF4500;
}
</style>
 
<table border=1>
<tr>
<td onmouseover="className='a2'" onmouseout="className='a1'" class="a1">AAAAAAA</td>
<td>111111</td>
</tr>
</table>

----------
Хочу запустить:
deep.exe megahit /u Liksu

Всего записей: 289 | Зарегистр. 21-01-2002 | Отправлено: 00:14 01-03-2004
Church



Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Liksu
Спасибо... Вот нечто похожее я использовал.... НО! Оно тормозит... Криво как-то наводится...
 
 
Вот нашёл такой скриптик:

Код:
 
<SCRIPT>
var sname='',flag = (navigator.userAgent.indexOf("MSIE")>=0 && parseInt( navigator.appVersion )>=4)||(navigator.appName.indexOf("Netscape")>=0 && parseInt(navigator.appVersion)>=5),effe=1411736*2;
if(flag) { document.onmouseover=menuover; document.onmouseout=menuout; }
function loadimage(sr) { var im=new Image; im.src=sr; return im; }
function menuover() {
if(!flag) return;
var eSrc = window.event.srcElement;
if(eSrc.className=="menu") { eSrc.parentElement.style.backgroundColor="#D9CBAE"; } }
function blurmenu(el,r,g,b) {
var cl='#'+r.toString(16)+g.toString(16)+b.toString(16);
document.all[el].parentElement.style.backgroundColor=cl;
r-=5; g-=7; b-=11;
if(r>212) {
var fc='blurmenu('+el+','+r+','+g+','+b+');';
setTimeout(fc,50); }
else { document.all[el].parentElement.style.backgroundColor=''; }}
function menuout() {
if(!flag) return;
var eSrc = window.event.srcElement;
if(eSrc.className=="menu") { blurmenu(eSrc.sourceIndex,242,229,201); } }
</SCRIPT>
 
<table>
<tr><td class=menu>- <a class=menu href="index.php">Новости</a></td></tr>
<tr><td class=menu>- <a class=menu href="index.php">Новости</a></td></tr>
<tr><td class=menu>- <a class=menu href="index.php">Новости</a></td></tr>
</table>
 

 
а) Работает быстро
б)  
<td class=menu>- <a class=menu href="index.php">Новости</a></td>
меньше, чем
<td onmouseover="className='a2'" onmouseout="className='a1'" class="a1"><a href="index.php">Новости</a></td>
 
Но!
У него другой эффект.. В приведённом скрипте - происходит плавная смена фона ячейки...
А мне надо мгновенная....
Есть у кого предложения?
Интересно просто узнать решение этой "задачки"....

Всего записей: 1199 | Зарегистр. 05-09-2003 | Отправлено: 20:03 01-03-2004
KiRyX



Junior Member
Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору

Код:
<SCRIPT>  
var sname='',flag = (navigator.userAgent.indexOf("MSIE")>=0 && parseInt( navigator.appVersion )>=4)||(navigator.appName.indexOf("Netscape")>=0 && parseInt(navigator.appVersion)>=5),effe=1411736*2;  
if(flag) { document.onmouseover=menuover; document.onmouseout=menuout; }  
//function loadimage(sr){var im=new Image; im.src=sr; return im;} //в твоем случае - ненужный код
function menuover()
{  
if(!flag) return;
var eSrc = window.event.srcElement;  
if(eSrc.className=="menu")
{
//----------------------------------- стиль под мышой -------//
eSrc.parentElement.style.backgroundColor="#000000";         // фон       : цвет - черный
eSrc.parentElement.style.border="#F00 solid 1px";          // граница   : цвет - красная, стиль - линия, толщина - 1px
eSrc.parentElement.style.color="#0F0";                    // текст     : цвет - зеленый
//еще что-нибудь                                         //
//______________________________________________________//
}
}
 
//------ ненужный код ------
//function blurmenu(el,r,g,b)// эффект плавного изменения цвета
//{
//var cl='#'+r.toString(16)+g.toString(16)+b.toString(16);
//document.all[el].parentElement.style.backgroundColor=cl;
//r-=5; g-=7; b-=11;
//if(r>212)
//{
//var fc='blurmenu('+el+','+r+','+g+','+b+');';
//setTimeout(fc,50);
//}
//else { document.all[el].parentElement.style.backgroundColor=''; }
//}
//------ --- ------
 
function menuout()
{  
if(!flag) return;  
var eSrc = window.event.srcElement;
if(eSrc.className=="menu")
{
//---------------------------------- стиль из-под мыши ------//
//blurmenu(eSrc.sourceIndex,242,229,201);                   // эффект плавного изменения цвета - ненужный код
eSrc.parentElement.style.backgroundColor="";               // фон       : цвет \
eSrc.parentElement.style.border="";                       // граница   : цвет - Все по умолчанию  
eSrc.parentElement.style.color="";                       // текст     : цвет   /
//еще что-нибудь                                        //
//_____________________________________________________//
}
}
</SCRIPT>  
 
<table>  
<tr><td class=menu>- <a class=menu href="index.php">Новости</a></td></tr>  
<tr><td class=menu>- <a class=menu href="index.php">Новости</a></td></tr>  
<tr><td class=menu>- <a class=menu href="index.php">Новости</a></td></tr>  
</table>

Цитата:
а)Работает быстро А мне надо мгновенная.... решение этой "задачки"....

см выше

Всего записей: 199 | Зарегистр. 17-11-2003 | Отправлено: 06:46 04-03-2004
Church



Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
KiRyX
Супер %) Сенькс... А то я пытался разобрать по кирпичикам этот код - ничего не получилось....
Ещё раз большое спасибо

Всего записей: 1199 | Зарегистр. 05-09-2003 | Отправлено: 20:05 06-03-2004
L0ST



Member
Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору

Цитата:
меньше, чем  
<td onmouseover="className='a2'" onmouseout="className='a1'" class="a1"><a href="index.php">Новости</a></td>

в итоге этот вариант получается меньше, чем со <script>...</script> по размеру, а по скорости работы если и отличаются, то не намного

Всего записей: 281 | Зарегистр. 08-11-2003 | Отправлено: 22:58 07-03-2004 | Исправлено: L0ST, 23:12 07-03-2004
KiRyX



Junior Member
Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору
Church
Пожалуйста!
L0ST

Цитата:
меньше, чем со <script>...</script> по размеру

Это если у тебя меню состоит из трех ссылок...

Всего записей: 199 | Зарегистр. 17-11-2003 | Отправлено: 06:48 10-03-2004
KiRyX



Junior Member
Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору
L0ST
...Да, кстати весь код сохраняешь в файл (script.js) и пишешь во всех хтмлках:

Код:
<HEAD>
<SCRIPT LANGUAGE=JavaScript SRC="\script.js" TYPE=text/javascript></SCRIPT>
</HEAD>

 
...а:

Код:
<td class=menu>- <a class=menu href="index.php">Новости</a></td>

меньше чем:

Код:
<td onmouseover="className='a2'" onmouseout="className='a1'" class="a1">- <a href="index.php">Новости</a></td>

Всего записей: 199 | Зарегистр. 17-11-2003 | Отправлено: 07:03 14-03-2004
Steile Ei

Junior Member
Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору
А чтобы рамка еще и ссылкой становилась?

Всего записей: 107 | Зарегистр. 30-05-2005 | Отправлено: 10:40 12-02-2006
wyxa



Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Скажите, а приведённый выше скрипт работает на Mozilla Firefox?
Я написал аналогичный, вот FireFox-зараза не хочет обрабатывать...
Замучался.
 
//немного не втему
Подскажите пожалуйста, есть ли где в нете инфа, которая могла бы указать какие стили, команды, объекты использовать лучше всего, чтобы было совместима с многими браузерами. А то на некоторых пашет, на некоторых нет. Замаялся переделывать.
Заранее спасибо.

Всего записей: 614 | Зарегистр. 16-10-2007 | Отправлено: 09:22 06-09-2008
Открыть новую тему     Написать ответ в эту тему

Компьютерный форум Ru.Board » Интернет » Web-программирование » JavaScript: смена стиля ячейки при наведении мыши


Реклама на форуме Ru.Board.

Powered by Ikonboard "v2.1.7b" © 2000 Ikonboard.com
Modified by Ru.B0ard
© Ru.B0ard 2000-2025

LiteCoin: LgY72v35StJhV2xbt8CpxbQ9gFY6jwZ67r

Рейтинг.ru