Форум

sunday24 · #1 (**permalink**) 15.08.2014, 17:54

Добрый день!

Подскажите пожалуйста, возможно ли сделать себе на сайт (joomla) для определенных статей всплывающие подсказки с переводом слова, на который наведен курсор? Уже давно ищу в интернете, но ничего подходящего не нашла...

Спасибо!

Safort · #2 (**permalink**) 15.08.2014, 18:53

Берёшь плагин со всплывающими подсказками и настраиваешь его на нужный класс(например, .my-toggle).
А в тексте статей нужное слово оборачиваешь в элемент с этим классом, например так:

текст текст <span class="my-toggle" title="текст подсказки">текст с подсказкой</span> текст текст.

Способ задания текста подсказки может различаться в зависимости от плагина.

sunday24 · #3 (**permalink**) 15.08.2014, 19:03

Обычные подсказки я сделала, а можно ли как-то настроить автоматический перевод этих слов на английский язык, например?

Safort · #4 (**permalink**) 15.08.2014, 19:16

Оу, извиняюсь, вопрос невнимательно прочитал.

Можно сделать используя API стороннего сервиса. Например, Яндекса http://api.yandex.ru/translate/doc/d.../translate.xml
только у нужных элементов надо повесить на событие mouseover функцию, которая будет делать запрос к API и получать перевод.
Или даже лучше сразу после загрузки страницы обойти все элементы, сделав запрос для каждого слова и в атрибут title (или куда там нужно для работы плагина) вставить перевод.

sunday24 · #5 (**permalink**) 15.08.2014, 19:28

Спасибо большое! Только вот я совсем новичок в этом, кое-что умею, но вот с таким первый раз работаю. Вы не могли бы немного помочь мне с кодом? Я была бы очень благодарна!

Safort · #6 (**permalink**) 15.08.2014, 20:33

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

sunday24 · #7 (**permalink**) 15.08.2014, 21:21

Оо, спасибо вам огромное!!

Форум

Справочник

Discord чат

Курсы javascript