Всплывающая подсказка с переводом
Добрый день!
Подскажите пожалуйста, возможно ли сделать себе на сайт (joomla) для определенных статей всплывающие подсказки с переводом слова, на который наведен курсор? Уже давно ищу в интернете, но ничего подходящего не нашла... Спасибо! |
Берёшь плагин со всплывающими подсказками и настраиваешь его на нужный класс(например, .my-toggle).
А в тексте статей нужное слово оборачиваешь в элемент с этим классом, например так: текст текст <span class="my-toggle" title="текст подсказки">текст с подсказкой</span> текст текст. Способ задания текста подсказки может различаться в зависимости от плагина. |
Обычные подсказки я сделала, а можно ли как-то настроить автоматический перевод этих слов на английский язык, например?
|
Оу, извиняюсь, вопрос невнимательно прочитал.
Можно сделать используя API стороннего сервиса. Например, Яндекса http://api.yandex.ru/translate/doc/d.../translate.xml только у нужных элементов надо повесить на событие mouseover функцию, которая будет делать запрос к API и получать перевод. Или даже лучше сразу после загрузки страницы обойти все элементы, сделав запрос для каждого слова и в атрибут title (или куда там нужно для работы плагина) вставить перевод. |
Спасибо большое! Только вот я совсем новичок в этом, кое-что умею, но вот с таким первый раз работаю. Вы не могли бы немного помочь мне с кодом? Я была бы очень благодарна!
|
sunday24,
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type='text/javascript'>
$(document).ready(function() {
var words = document.querySelectorAll('span'); // тут нужный селектор для твоих элементов. В моём случае это сам элемент
for (var i = 0; i < words.length; i++) {
(function(word) {
$.ajax({
url: 'https://translate.yandex.net/api/v1.5/tr.json/translate',
data: {
key: 'ключ',
text: word.innerHTML,
lang: 'ru-en'
},
success: function(data) {
word.title = data.text[0];
}
});
})(words[i]);
}
});
</script>
<body>
всякий <span>разный</span> <span>текст</span>.
</body>
</html>
Тут получаем ключ http://api.yandex.ru/key/form.xml?service=trnsl |
Оо, спасибо вам огромное!!
|
| Часовой пояс GMT +3, время: 15:39. |