Перейти к содержанию
СофтФорум - всё о компьютерах и не только

Выделение ячейки таблицы при наведении


Рекомендуемые сообщения

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

Если нельзя, то порекомендуйте скрипты которые делают это и желательно по проще :unsure:

Ссылка на комментарий
Поделиться на другие сайты

это на java замечательно реализуеться, вот:

Это в <HEAD></HEAD>:

<script type="text/javascript">

var highlightbehavior="TD"

var ns6=document.getElementById&&!document.all

var ie=document.all

function changeto(e,highlightcolor){

source=ie? event.srcElement : e.target

if (source.tagName=="TABLE")

return

while(source.tagName!=highlightbehavior && source.tagName!="HTML")

source=ns6? source.parentNode : source.parentElement

if (source.style.backgroundColor!=highlightcolor&&source.id!="ignore")

source.style.backgroundColor=highlightcolor

}

function contains_ns6(master, slave) { //check if slave is contained by master

while (slave.parentNode)

if ((slave = slave.parentNode) == master)

return true;

return false;

}

function changeback(e,originalcolor){

if (ie&&(event.fromElement.contains(event.toElement)||source.contains(event.toElement)||source.id=="ignore")||source.tagName=="TABLE")

return

else if (ns6&&(contains_ns6(source, e.relatedTarget)||source.id=="ignore"))

return

if (ie&&event.toElement!=source||ns6&&e.relatedTarget!=source)

source.style.backgroundColor=originalcolor

}

</script>

Пример таблички:

<table border="1" width="80%" cellspacing="0" cellpadding="0"

        onMouseover="changeto(event, 'lightgreen')" onMouseout="changeback(event, 'white')">

          <tr>

            <td width="100%"><a href="http://demer.net.ru">Demer's warezz</a></td>

          </tr>

          <tr>

            <td><a href="http://www.fadar.com.ru">FaDaR Design Studio</a></td>

          </tr>

         

    

        </table>

Изменено пользователем demer
Ссылка на комментарий
Поделиться на другие сайты

demer

И сколько такой скрипт будет рендериться? На каком-нибудь народ_точка_ру? :P

Проще всего написать стиль страницы в CSS,задать каждой ячейке свой идентификатор и через функцию hover делать с ней,что угодно.А ещё лучше отказаться от табличного представления и юзать DIV и span,свойства которых будут прописаны в таблице стилей.Тот же hover,и вообще безграничные возможности отображения.Javascript нервно курит с его скоростями.

Ссылка на комментарий
Поделиться на другие сайты

z-vet

Согласен на все сто =) Только ты ей код дай =)

Она просила скрипт я ей дал скрипт =)

Гы.

Кстати мне твоя идея сразу в голову не пришла =) Молодец!

Ссылка на комментарий
Поделиться на другие сайты

demer

Код надо под конкретную ситуацию писать,это же CSS... Copy-paste в данном случае не прокатит.

Rolly

Дай код твоей страницы.Если тебе интересно,конечно...

Ссылка на комментарий
Поделиться на другие сайты

Согласен на все сто =) Только ты ей код дай =)

Она просила скрипт я ей дал скрипт =)

Гы.

Всю жизни думал что Rolly парень, а Сергей мужское имя :angry: Сорри за оффтопик.

Ссылка на комментарий
Поделиться на другие сайты

Спасибо всем, за помощь :unsure:

Вот, только никто так и не скинул код как правильно прописать все это дело через CSS.

Скрипты не охота использовать... громоздко слишком...

Rolly

Дай код твоей страницы.Если тебе интересно,конечно...

Пока нет еще кода, это в проекте, я хочу сделать... поэтому заранее узнаю... как что и почем... D

dmc

хе.. какой-то ник...извините =)

Извиняю... :) не ты первый, не ты последний приписываешь меня к прекрасной половине человечества :)

Ссылка на комментарий
Поделиться на другие сайты

Rolly

Ну как z-vet и советовал

написать стиль страницы в CSS,задать каждой ячейке свой идентификатор

У меня получилось вот так:

Между <head> </head> вставил:

<style>.body_1{background-color:"#FFFFFF"}.body_2{background-color:"#F5F5DC"}</style>

В <body> вставил такую маленькую "процедурку", по идее на скорость работы страницы она влиять сильно не должна:

<script language="vbscript">Sub change_bg(my_thname, my_th_style)document.all(my_thname).className=my_th_styleend Sub</script>

и потом:

<table border=1 cellpadding=20 cellspacing=0><tr><th class="body_1" id="myth_1"><a href="#" onmouseover="change_bg 'myth_1' ,'body_2'" onmouseout="change_bg 'myth_1' ,'body_1'">Первая ссылка</a></th><th class="body_1" id="myth_2"><a href="#" onmouseover="change_bg 'myth_2' ,'body_2'" onmouseout="change_bg 'myth_2' ,'body_1'">Вторая ссылка</a></th></tr></table>

В общем приблизительно в этом направлении рыть надо.

В Internet Explorer работает, других браузеров у меня сейчас не стоит, не проверял.

А тебе это случаем не для маленьких ячеек меню надо? А то тогда это можно будет реализовать просто тегами, двумя строчками, только цвет ячейки будет изменяться не при наведении на ссылку, а при наведении на ячейку.

Изменено пользователем Premium
Ссылка на комментарий
Поделиться на другие сайты

Тюю-ю блин ... :) Я не с того конца взялся, со скрипта. :D

Вот как будет правильней, копипастьте на здоровье:

<html><head><style>.body_1{background-color:"#FFFFFF"}.body_2{background-color:"#F5F5DC"}</style></head><body><table border=1 cellpadding=20 cellspacing=0><tr><th class="body_1" name="myth1" id="myth1"><a href="#" onmouseover="myth1.className='body_2'" onmouseout="myth1.className='body_1'">Первая ссылка</a></th><th class="body_1" name="myth2" id="myth2"><a href="#" onmouseover="myth2.className='body_2'" onmouseout="myth2.className='body_1'">Вторая ссылка</a></th></tr></table><body></html>
Ссылка на комментарий
Поделиться на другие сайты

Присоединяйтесь к обсуждению

Вы можете написать сейчас и зарегистрироваться позже. Если у вас есть аккаунт, авторизуйтесь, чтобы опубликовать от имени своего аккаунта.

Гость
Ответить в этой теме...

×   Вставлено с форматированием.   Вставить как обычный текст

  Разрешено использовать не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отображать как обычную ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставлять изображения напрямую. Загружайте или вставляйте изображения по ссылке.

  • Последние посетители   0 пользователей онлайн

    • Ни одного зарегистрированного пользователя не просматривает данную страницу
×
×
  • Создать...