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

**Rolly** · 14 мая, 2004

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

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

**anion** · 14 мая, 2004

попробуй поглядеть как это в MySQL реализовано :)

**man2D** · 14 мая, 2004

Rolly

На JS, думаю, можно. Поищи скрипты разные :).

anion

Не в MySQL, а в phpmyadmin...

**demer** · 14 мая, 2004

это на 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>

Изменено 14 мая, 2004 пользователем demer

**z-vet** · 14 мая, 2004

demer

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

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

**demer** · 14 мая, 2004

z-vet

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

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

Гы.

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

**z-vet** · 15 мая, 2004

demer

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

Rolly

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

**dmc** · 17 мая, 2004

Согласен на все сто =) Только ты ей код дай =)
Она просила скрипт я ей дал скрипт =)

Гы.

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

**demer** · 17 мая, 2004

dmc

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

**Rolly** · 18 мая, 2004

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

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

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

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

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

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

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

**Premium** · 19 мая, 2004

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 работает, других браузеров у меня сейчас не стоит, не проверял.

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

Изменено 19 мая, 2004 пользователем Premium

**Premium** · 19 мая, 2004

Тюю-ю блин ... :) Я не с того конца взялся, со скрипта. :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>

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

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

Ссылка на комментарий

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

Ссылка на комментарий

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

Ссылка на комментарий

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

Ссылка на комментарий

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

Ссылка на комментарий

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

Ссылка на комментарий

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

Ссылка на комментарий

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

Ссылка на комментарий

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

Ссылка на комментарий

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

Ссылка на комментарий

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

Ссылка на комментарий

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

Ссылка на комментарий

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

Для публикации сообщений создайте учётную запись или авторизуйтесь

Создать учетную запись

Войти

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