VPF::Подсвечивание элементов списка

Testernew

Дата 12.2.2012, 17:30 (ссылка)

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

Загрузка ...

Шустрый

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

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

Здравствуйте, есть список элементов, необходимо что бы при наведении курсора элемент подсвечивался а при отведении становился прежним(аналог свойству hover но необходимо сделать именно на js) цветом(белым) это делает функция user_list(id) она должна подсвечивать все элементы за исключением тех элементов которые выделены с помощью клика мышкой, функцией mark_user(id).
В данный момент при наведении и отводе мышки от эелемента списка цвет меняеться и все работает вроде... только вот вылетает ошибка...
" document.getElementById(user_hover) is null " но функция вроде работает... проблема в том что при выделении элемента все перестает работать.....
буду очень благодарен за любую помощь... переменные user_hover и user_background_color нужны так как с ними я потом работаю через ajax

Вот собственно и этот кусок:

Код


<style>
div.users {
           background-color: white;
           border-left:   none;
           border-right:  none;
           border-top:    none;
           border-bottom: none;
           font-family:Arial, Helvetica, sans-serif;
           font-size: 14px;
           color: black;
           text-align: left; 
           overflow-y: scroll;
           width: 15.3%;
           height: 93%;
           float: left;         
          }
</style>

<script Language='JavaScript'>
var user_hover, user_background_color;

function mark_user(id) {
  if(document.getElementById(id).style.backgroundColor == '#e8e8e8' ||document.getElementById(id).style.backgroundColor == 'rgb(232, 232, 232)') {
       document.getElementById(id).style.backgroundColor='white';
       document.chat.private.value=' ';
       user_background_color=' ';            
   }
   else {
         document.getElementById(id).style.backgroundColor='#e8e8e8';
         if (document.getElementById(id).innerText != undefined)  
            document.chat.private.value=document.getElementById(id).innerText;
          else 
            document.chat.private.value=document.getElementById(id).textContent; 

        if(document.getElementById(user_background_color)) { 
          if(document.getElementById(user_background_color).style.backgroundColor == '#e8e8e8' || document.getElementById(user_background_color).style.backgroundColor == 'rgb(232, 232, 232)') {    
             document.getElementById(user_background_color).style.backgroundColor='white';
             document.getElementById(user_background_color).style.fontWeight='500';
          }
        }
        user_background_color=id;
       }
}


function user_list(id) {
    if(window.user_background_color && user_background_color != id) 
      document.getElementById(id).style.backgroundColor='#f5f5f5';
         else {
          if(document.getElementById(id).style.backgroundColor == '#ffffff' || document.getElementById(id).style.backgroundColor == 'rgb(255, 255, 255)' || !document.getElementById(id).style.backgroundColor) {
          document.getElementById(id).style.backgroundColor='#f5f5f5';
              if(document.getElementById(user_hover).style.backgroundColor == '#f5f5f5' || document.getElementById(user_hover).style.backgroundColor == 'rgb(245, 245, 245)')
              document.getElementById(user_hover).style.backgroundColor='#ffffff';
               }   
        if(document.getElementById(id).style.backgroundColor == '#f5f5f5' || document.getElementById(id).style.backgroundColor == 'rgb(245, 245, 245)' || !document.getElementById(id).style.backgroundColor) {
           document.getElementById(id).style.backgroundColor='#ffffff';
              if(document.getElementById(user_hover).style.backgroundColor == '#ffffff' || document.getElementById(user_hover).style.backgroundColor == 'rgb(255, 255, 255)')
              document.getElementById(user_hover).style.backgroundColor='f5f5f5';
               }        
      }
}

</script>

<div class="users">
<div  id="0" onclick="mark_user(0);" onmouseover="user_list(0)" onmouseout="user_list(0)">user1</div>
<div  id="1" onclick="mark_user(1);" onmouseover="user_list(1)" onmouseout="user_list(1)">user2</div>
<div  id="2" onclick="mark_user(2);" onmouseover="user_list(2)" onmouseout="user_list(2)">user3</div>
</div>

ayax2005

Дата 12.2.2012, 20:40 (ссылка)

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

Загрузка ...

echo $smile

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

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

Я вам очень рекомендую познакомиться с jquery

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

все вопросы - из-за неверной формулировки задачи

Testernew

Дата 13.2.2012, 10:02 (ссылка)

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

Загрузка ...

Шустрый

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

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

обезательно.... но сначала мне необходимо решить эту задачку.

ayax2005

Дата 13.2.2012, 10:04 (ссылка)

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

Загрузка ...

echo $smile

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

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

Вот для решения этой задачки в самый раз. jquery.hover()

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

все вопросы - из-за неверной формулировки задачи

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