при наведении на один текст, выделяется другой - JavaScript, Ajax

bogachev · 12.04.2009, 23:15

а подскажите пожалуйста,как сделать на js (или другим инструментом) следующее: есть два столбца с текстом. Надо сделать так чтоб при наведении на текст в строчке одно столбца подсвечивались (выделялись жирным) необходимые строки в другом столбце
Пример (только на флеше) здесь: http://www.margecasey.com/

RJ Presto · 17.04.2009, 16:48

лови пример

форматирование простенькое, но механизм понятен

Код HTML:

<html>
<head>
  <title></title>
</head>
<body>
<script>
highlights={}
// индексы подсвечиваемых надписей при наведении на левый столбец
highlights.left={_0:[1,3],_1:[2,4],_2:[0,4],_3:[3],_4:[1,2,3]};
// индексы подсвечиваемых надписей при наведении на правый столбец
highlights.right={_0:[1,3],_1:[2,4],_2:[0,4],_3:[3],_4:[1,2,3]};
function MouseRollOverCell( cell_id ) {
	var side=cell_id.substr( 0, cell_id.indexOf( '_' ) );
	var h_side;
	if ( side == 'left' ) {
		h_side = 'right';
	} else {
		h_side = 'left';
	}
	var cell_num=cell_id.substr( cell_id.indexOf( '_' ) );
    for ( i = 0; i < highlights[side][cell_num].length; i++ ) {
        var h_cell=document.getElementById( h_side + '_' + String( highlights[side][cell_num][i] ) );
        // подсвечиваем
        h_cell.innerHTML = '<b><i>' + h_cell.innerText + '</i></b>';
    }
}

function MouseRollOutCell( cell_id ) {
	var side=cell_id.substr( 0, cell_id.indexOf( '_' ) );
	var h_side;
	if ( side == 'left' ) {
		h_side = 'right';
	} else {
		h_side = 'left';
	}
	var cell_num=cell_id.substr( cell_id.indexOf( '_' ) );
    for ( i = 0; i < highlights[side][cell_num].length; i++ ) {
        var h_cell=document.getElementById( h_side + '_' + String( highlights[side][cell_num][i] ) );
        // убираем подсветку
        h_cell.innerHTML = h_cell.innerText;
    }
}
</script>

<table border=1 width=200>
<tr height=25>
<td align=right id='left_0' onMouseOver='javascript: MouseRollOverCell("left_0")' onMouseOut='javascript: MouseRollOutCell("left_0")'>
слово 0 0
</td>
<td align=left id='right_0' onMouseOver='javascript: MouseRollOverCell("right_0")' onMouseOut='javascript: MouseRollOutCell("right_0")'>
слово 0 1
</td>
</tr>
<tr height=25>
<td align=right id='left_1' onMouseOver='javascript: MouseRollOverCell("left_1")' onMouseOut='javascript: MouseRollOutCell("left_1")'>
слово 1 0
</td>
<td align=left id='right_1' onMouseOver='javascript: MouseRollOverCell("right_1")' onMouseOut='javascript: MouseRollOutCell("right_1")'>
слово 1 1
</td>
</tr>
<tr height=25>
<td align=right id='left_2' onMouseOver='javascript: MouseRollOverCell("left_2")' onMouseOut='javascript: MouseRollOutCell("left_2")'>
слово 2 0
</td>
<td align=left id='right_2' onMouseOver='javascript: MouseRollOverCell("right_2")' onMouseOut='javascript: MouseRollOutCell("right_2")'>
слово 2 1
</td>
</tr>
<tr height=25>
<td align=right id='left_3' onMouseOver='javascript: MouseRollOverCell("left_3")' onMouseOut='javascript: MouseRollOutCell("left_3")'>
слово 3 0
</td>
<td align=left id='right_3' onMouseOver='javascript: MouseRollOverCell("right_3")' onMouseOut='javascript: MouseRollOutCell("right_3")'>
слово 3 1
</td>
</tr>
<tr height=25>
<td align=right id='left_4' onMouseOver='javascript: MouseRollOverCell("left_4")' onMouseOut='javascript: MouseRollOutCell("left_4")'>
слово 4 0
</td>
<td align=left id='right_4' onMouseOver='javascript: MouseRollOverCell("right_4")' onMouseOut='javascript: MouseRollOutCell("right_4")'>
слово 4 1
</td>
</tr>
</table>

</body>

</html>

12.04.2009, 23:15	#1
bogachev Новичок Джуниор Регистрация: 12.04.2009 Сообщений: 1	при наведении на один текст, выделяется другой а подскажите пожалуйста,как сделать на js (или другим инструментом) следующее: есть два столбца с текстом. Надо сделать так чтоб при наведении на текст в строчке одно столбца подсвечивались (выделялись жирным) необходимые строки в другом столбце Пример (только на флеше) здесь: http://www.margecasey.com/

Опции темы	Поиск в этой теме
Версия для печати Отправить по электронной почте	Поиск в этой теме: Расширенный поиск

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Изменение изображения при наведении мышки?	lionman	Общие вопросы Delphi	24	12.06.2010 13:03
получить значение ID при наведении мышкой	badfilin	JavaScript, Ajax	9	25.04.2009 19:35
увеличение излбражения при наведении курсора	SKS	HTML и CSS	4	08.03.2009 13:39
Звук при наведении мышки на ссылку	BangBangFM	HTML и CSS	5	07.09.2008 15:14
Выдвижение формы при наведении	Stanislav	Общие вопросы Delphi	11	24.08.2008 00:24