Я искал код, который выделял бы фрагмент текста, когда я наводил курсор (или щелкал) на другой текст.
Например, если у меня есть текст «Je suis ici. Я здесь», когда я наведу курсор на слово «здесь», у меня будет желтый фон для слова «здесь» и для слова «ici». Таким образом, я могу показать, что слово здесь является английским корреспондентом французского слова «ici».
Что-то вроде переводчика Google: http://translate.google.com/
Спасибо заранее за любые предложения! Дана.
То, как это делает Google Translate, состоит в том, чтобы разделить каждое слово в предложении на отдельные теги <span> с соответствующими классами. Затем к ним можно получить доступ через DOM в JavaScript — проще всего с помощью фреймворка, такого как JQuery.
Например, вы можете добавить функцию mouseover(), чтобы выделить слово, находящееся в данный момент под курсором.
Я не могу привести здесь полный пример — вам нужно придумать отправную точку и разработать свое решение оттуда.
В нем используется библиотека jquery, которая в значительной степени заимствована из этот ответ на SO на похожий вопрос.
Что он делает, так это разбивает каждое слово в теге абзаца (<p>) и оборачивает его тегом <span> с классом highlightable, а затем прикрепляет событие при наведении к тегам <span class='highlightable'>. Если вы хотите, чтобы использовался только один абзац, присвойте ему идентификатор и привяжите только те элементы, которые имеют этот идентификатор. Если несколько абзацев, используйте класс или несколько идентификаторов.
<p>Each word will be wrapped in a span.</p>
<p>A second paragraph here.</p>
<script type="text/javascript">
$(document).ready(function() {
// wrap words in spans
$("p").each(function() {
$(this).text().
replace(/\b(\w+)\b/g, "<span class='highlightable'>$1</span>");
});
// bind to each highlightable span
$('.highlightable').hover(
function() { $(this).css('background-color','#ffff66'); },
function() { $(this).css('background-color',''); }
);
});
</script>
