Одновременное выделение цветом отдельных слов в таблице при наведении курсора на одно из них

@scivola · Регистрация: 22.05.2018

Author24 — интернет-сервис помощи студентам

Здравствуйте!
Прошу помочь в одном вопросе. Сразу скажу, что html и css изучаю, как три дня, поэтому тапками не кидать.
Дано:
Имеется таблица из двух столбцов и n строк. В левом столбце текст на иностранном языке. В правом - его перевод на русский. Текст разбит на смысловые блоки (например: абзац, но не факт), каждый из которых помещён в отдельную строку таблицы.
Задача:
Необходимо, чтобы при наведении курсора на слово в любом из столбцов, происходило выделение слова (группы слов, если это выражение), как в столбце, где находиться само слов, так и в другом столбце, где находится перевод.
Смотрите прикреплённый файл.
Спасибо!

@scivola · 22.05.2018, 07:00 **[ТС]**

Вот так выглядит код, который нужно подправить. Обратите внимание на строки 16 и 17 - тут я что-то начал

HTML5

<!DOCTYPE html>
 
<html>
 
    <head>
 
        <meta charset="windows-1251">
 
        <title>DER RATTENFÄNGER VON HAMELN</title>
                <link rel="stylesheet" href="stylebook.css">
                <style>
                 /* #A1,#A4  {color: red}
                  #A2 {color: yellow;}
                  #A3 {color: green;}*/
 
tr span.A1:hover{background: yellow; /* Цвет фона */  color: black; /* Цвет текста */}
tr span.A2:hover{background: yellow; /* Цвет фона */  color: black; /* Цвет текста */}
 
            p {                      /*Параметры абзаца в CSS.*/
                       color: black;         /*Цвет шрифта в CSS.*/
                           font-family: Georgia, Times New Roman, Arial;   /*Тип шрифта в CSS.*/
                       font-size: 14px;      /*Размер шрифта в CSS.*/
                         /*font-style: italic;     Курсив шрифта в CSS.(italic, normal)*/
                         /*font-weight: bold;      Жирность шрифта в CSS.(bold, normal)*/
                           text-align: justify;  /*Выравнивание шрифта в CSS. (left, center, right, justify)*/ 
                           line-height: 20px;    /*Межстрочный интервал в CSS.*/
                         /*font: normal 14px/20px Georgia, sans-serif;Свойство-сокращение(порядок обязателен) в CSS.*/
                           text-indent: 25px;    /*Отступ (красная строка) абзаца в CSS.*/
                         /*vertical-align: top;    Выравнивание по вертикали текста абзаца в CSS.(top, middle, bottom)*/
                           width: 600px;         /*Ширина абзаца в CSS.*/
                     /* height: 80px;          Высота абзаца в CSS.*/
                     /*border: 1px solid black;Цвет границы абзаца в CSS.*/
                           
                          }
 
                    table {                           /*Параметры таблицы в CSS.*/
                           /*width: 300px;               Ширина таблицы */
                           /*border: 1px solid green;    Рамка вокруг таблицы */
                           margin: auto;              /* Выравниваем таблицу по центру окна  */
                          }
 
                    /* td {                           /*Параметры ячейки в CSS.*/
                           text-align: center;        /* Выравниваем текст по центру ячейки */
                          }*/                    
        </style>
 
    </head>
 
    <body>
<table border="1" cellspacing="0" cellpadding="0" width="1250" height="0">
    <!--Название и автор-->
    <tr>
        <th><span class="A1">DER RATTENFÄNGER</span> <span class="A2">VON HAMELN</span>
 
<br>(Eine Sage1 aus2 dem XIII.( dreizehnten3) Jahrhundert4)</th>
        <th><span class="A1">КРЫСОЛОВ</span> <span class="A2">ИЗ ГАМЕЛЬНА</span>
 
<br>(Сказание1 из2 XIII (тринадцатого3) столетия4)</th>   
    </tr>
    <!--1 строка-->
    <tr>
        <td><p>Im (= <span class="A1">in1</span> dem) Jahre2 1284 (zwölfhundertvierundachtzig) kam3 ein4 seltsamer5 Mann6 nach Hameln7. Er8 hatte einen bunten10 Rock11 an9. In12 Hameln13 gab es14 damals15 viele16 Ratten17 und18 Mäuse19. Der Fremde20 versprach21, für22 eine bestimmte23 Geldsumme24 die Stadt25 von26 allen27 Ratten28 und29 Mäusen30 zu befreien31. Er31 nannte32 diese33 Summe34 und35 die Bürger36 der Stadt37 waren38 einverstanden39.</p>
 
 
 
<p>Nun40 zog41 der Rattenfänger42 ein Pfeifchen43 aus44 der Tasche45 und46 begann47 zu pfeifen48. Da49 liefen die Ratten50 und51 die Mäuse52 aus53 den Häusern54 heraus55 und56 sammelten sich57 um ihn58 herum59. Als60 keine61 mehr62 zurückgeblieben63 war64, ging der Mann66 zur (= zu67 der) Stadt68 hinaus65, und69 die Tiere70 folgten71 ihm72.</p></td>
        <td><p><span class="A1">В1</span> 1284 (двенадцать сотен четыре и восемьдесят) году2 в Гамельн7 прибыл3 один4 странный5 человек6. Он8 был одет в9 пёстрый10 сюртук11. В12 Гамельне13 имелось14 в то время15 много16 крыс17 и18 мышей19. Чужак20 обязался21 за22 определённую23 денежную сумму24 избавить31 город25 от26 всех27 крыс28 и29 мышей30. Он31 назвал32 эту33 сумму34, и35 граждане36 города37 согласились (были38согласные39).</p>
 
 
 
<p>И вот40 ловец крыс42 достал41 дудочку43 из44 сумки45 и46 начал47 свистеть48. Тут49 крысы50 и51 мыши52 выбежали55 из53 домов54 и56 собрались57 вокруг59 него58. Когда60 больше62 ни одной не61 осталось (было64 оставшейся63), человек66 вышел наружу65 к67 городу68, и69 животные70 последовали за71 ним72.</p></td>      
    </tr>       
 
    </body>
 
</html>

@scivola · 22.05.2018, 07:19 **[ТС]**

Вот ещё дополнение, чтобы было понятно что мне надо.
Здесь я навёл мышь на слово HAMELN и слово выделилось жёлтым цветом, как и слово VON, которое входит во фразу VON HAMELN. По идее в соседней ячейке этой же строки таблицы по-русски должно было выделиться ИЗ ГАМЕЛЬНА. И наоборот, нажимая на русское слов, должно выделяться слово (или выражение, если он в него входит) на иностранном языке.

@visitante2016 · 22.05.2018, 08:52

Типа как в переводчике гугл. Там тоже подсвечиваются слова

@scivola · 22.05.2018, 08:58 **[ТС]**

Так точно. Только подсветка должна быть, если нажать на слово в левом, так и, если нажать на слово в правом столбцах.

@scivola · 22.05.2018, 12:43 **[ТС]**

Здравствуйте!
Нужен встроенный в html скрипт, выделяющий цветом все слова одного класса в таблице.
Имеется таблица с двумя столбцами и несколькими строками. В левой ячейке - иностранный текст, в правой - перевод на русски. При наведении курсора на, допустим, незнакомое слово (единичное или находящееся в словосочетании), то это слово (или словосочетание), а также его перевод (перевод словосочетания) в соседнем столбце должны подсветиться (выделиться) цветом. После отведение курсора, цвет меняется на изначальный.
Спасибо!

@atanov · 23.05.2018, 08:04

scivola, а что означает

Сообщение от scivola

все слова одного класса

Как определить

Сообщение от scivola

незнакомое слово

Кому незнакомое?

@scivola · 23.05.2018, 11:42 **[ТС]**

Здравствуйте, atanov !
Слова одного класса - слова, заключённые в html в такую конструкцию незнакомое слово.
Незнакомое слово - слово, которое незнакомо пользователю, который на данный момент читает параллельный текст на странице сайта.
Таким образом, при наведении курсора (или при клике, не знаю, что лучше) на слово, которое находится в , должны выделяться цветом или подсвечиваться фоном все слова в таблице (тексте), которые тоже заключены в  и входящие в одинаковый класс (здесь условно class="A1").

Добавлено через 7 минут
Ещё дополнение к вышесказанному - слова (выражения) уже разбиты в html по классам (то есть заключены в тэги span).

@atanov · 23.05.2018, 11:55

scivola, ну самое простое вот так, хотя нужно думать, как реализовывать логику, если классов будет -> infinity:

HTML5

<meta http-equiv = "Content-Type" content = "text/html" charset = "utf-8">
<html>
<p><span class = "A1">Тынц</span><p>
<p><span class = "A1">I dodn't know what it means</span><p>
</html>
<script src = "61.js"></script>

Javascript

document.getElementsByClassName('A1')[0].addEventListener("mouseover", highLightIt);
document.getElementsByClassName('A1')[0].addEventListener("mouseout", trachHighLightIt);
function highLightIt(){
document.getElementsByClassName('A1')[0].style.backgroundColor = 'yellow';
document.getElementsByClassName('A1')[1].style.backgroundColor = 'yellow';
}
function trachHighLightIt(){
document.getElementsByClassName('A1')[0].style.backgroundColor = '';
document.getElementsByClassName('A1')[1].style.backgroundColor = '';
}

@scivola · 23.05.2018, 13:40 **[ТС]**

atanov, спасибо за ответ. Думаю, что алгоритм должен быть следующий.
1 - навели курсор на слово, тогда возникло событие onmouseover;
2 - получаем данные о слове - принадлежность к классу. Если нет класса, то выход;
3 - если есть класс, каждое слово-одноклассник подсвечиваем, перечисляя через for;
4 - убрали курсор со слова, тогда возникло событие onmouseout->убираем подсветку.

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

Надо будет подумать. Приступаю к изучению javascript

@scivola 81 / 49 / 34 Регистрация: 22.05.2018 Сообщений: 192
	22.05.2018, 07:19 [ТС]	3
	Вот ещё дополнение, чтобы было понятно что мне надо. Здесь я навёл мышь на слово HAMELN и слово выделилось жёлтым цветом, как и слово VON, которое входит во фразу VON HAMELN. По идее в соседней ячейке этой же строки таблицы по-русски должно было выделиться ИЗ ГАМЕЛЬНА. И наоборот, нажимая на русское слов, должно выделяться слово (или выражение, если он в него входит) на иностранном языке. Миниатюры 0

@visitante2016 5 / 5 / 0 Регистрация: 03.08.2016 Сообщений: 141
	22.05.2018, 08:52	4
	Типа как в переводчике гугл. Там тоже подсвечиваются слова 0

@scivola 81 / 49 / 34 Регистрация: 22.05.2018 Сообщений: 192
	22.05.2018, 08:58 [ТС]	5
	Так точно. Только подсветка должна быть, если нажать на слово в левом, так и, если нажать на слово в правом столбцах. 0

@scivola 81 / 49 / 34 Регистрация: 22.05.2018 Сообщений: 192
	22.05.2018, 12:43 [ТС]	6
	Здравствуйте! Нужен встроенный в html скрипт, выделяющий цветом все слова одного класса в таблице. Имеется таблица с двумя столбцами и несколькими строками. В левой ячейке - иностранный текст, в правой - перевод на русски. При наведении курсора на, допустим, незнакомое слово (единичное или находящееся в словосочетании), то это слово (или словосочетание), а также его перевод (перевод словосочетания) в соседнем столбце должны подсветиться (выделиться) цветом. После отведение курсора, цвет меняется на изначальный. Спасибо! 0

@atanov 634 / 476 / 170 Регистрация: 26.05.2016 Сообщений: 2,638
	23.05.2018, 08:04	7
	scivola, а что означает Сообщение от scivola все слова одного класса Как определить Сообщение от scivola незнакомое слово Кому незнакомое? 0

@scivola 81 / 49 / 34 Регистрация: 22.05.2018 Сообщений: 192
	23.05.2018, 11:42 [ТС]	8
	Здравствуйте, atanov ! Слова одного класса - слова, заключённые в html в такую конструкцию <span class="A1">незнакомое слово</span>. Незнакомое слово - слово, которое незнакомо пользователю, который на данный момент читает параллельный текст на странице сайта. Таким образом, при наведении курсора (или при клике, не знаю, что лучше) на слово, которое находится в <span class="A1"><span/>, должны выделяться цветом или подсвечиваться фоном все слова в таблице (тексте), которые тоже заключены в <span class="A1"><span/> и входящие в одинаковый класс (здесь условно class="A1"). Добавлено через 7 минут Ещё дополнение к вышесказанному - слова (выражения) уже разбиты в html по классам (то есть заключены в тэги span). 0

@scivola 81 / 49 / 34 Регистрация: 22.05.2018 Сообщений: 192
	23.05.2018, 13:40 [ТС]	10
	atanov, спасибо за ответ. Думаю, что алгоритм должен быть следующий. 1 - навели курсор на слово, тогда возникло событие onmouseover; 2 - получаем данные о слове - принадлежность к классу. Если нет класса, то выход; 3 - если есть класс, каждое слово-одноклассник подсвечиваем, перечисляя через for; 4 - убрали курсор со слова, тогда возникло событие onmouseout->убираем подсветку. Так как текст разбивается на смысловые блоки, которые располагаются каждый в отдельной строке таблицы, то поиск слов целесообразно производить только в пределах строки, что избавит от 100500 классов. Надо будет подумать. Приступаю к изучению javascript 0