Скрипт переводчика текстов

Вот хочу поделиться. Пыталась добавить в какую-нить тему с подобными скриптами, но они все закрыты.

Итак, переводчик текста 6ти языковых пар: русский, английский, немецкий, французский, белорусский и украинский. Переводит прямо на странице, не пересылает за результатом на другой сайт. Цвета фона и шрифты легко настраиваются.

Код:

<table border="0" align="center" cellpadding="7" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td align="center" style="font:14px Verdana, Arial, Helvetica, sans-serif; color:#003366; line-height:20px; border:#000000 dashed 1px; background:#FFFFFF;"><a href="http://www.english-easy.info/translator/" target="_blank">Онлайн переводчик</a></td>
</tr>
<tr>
<td align="center" style="font:14px Verdana, Arial, Helvetica, sans-serif; color:#003366; line-height:20px; border:#000000 dashed 1px; background:#FFFFFF;">
<script src="https://www.google.com/jsapi" type="text/javascript"></script>
<script src="http://www.english-easy.info/translator/translator.js" type="text/javascript"></script>
  <form class="query-box" onSubmit="return submitChange();">
  <div align="center">Выберите направление перевода и языковую пару:<br>
  <select id="from">
  <option selected value="en">Английский язык</option>
  <option value="be">Белорусский язык</option>
  <option value="de">Немецкий язык</option>
  <option value="ru">Русский язык</option>
  <option value="uk">Украинский язык</option>
  <option value="fr">Французский язык</option>
  </select>
  <button type="button" onClick="SwapPairs()"><-></button><select id="to">
  <option value="en">Английский язык</option>
  <option value="be">Белорусский язык</option>
  <option value="de">Немецкий язык</option>
  <option selected value="ru">Русский язык</option>
  <option value="uk">Украинский язык</option>
  <option value="fr">Французский язык</option>
  </select>
  </div><table align="center">
  <tr><td><textarea rows="7" id="source" cols="50"; class="query-input"></textarea></td></tr>
  <tr><td><textarea rows="7" cols="50" id="results_body" class="query-input"></textarea><br>
  <div align="center"><input class="button" type="submit" value="Перевести" /></div></td></tr>
  </table></form></td></tr>
  </table>
<div id="branding"></div>

В разультате выглядит вот так:

moresol пишет:

Спойлер:

Довольно таки удобно. Благодарю

Дмитрий Оболенский пишет:

Довольно таки удобно. Благодарю

пожалуйста вам.

Можно вот так сделать





ПРИМЕР

ой, именно то, шо надо...
Домовой, расскажите плиз, как ТАК сделать... потому что размер сего дела слегка портит мне страницу...

Для BB3
ПА - Модули - HTML & JAVASCRIPT - Управление кодами Javascript
Создать новый Javascript
Название * : Переводчик
Расположение : На всех страницах
Код Javascript * :

Код:

jQuery(document).ready(function(){
  jQuery('.translatorbutton').click(function(){
      jQuery(this).parent().children('div.translatorCont').slideToggle('slow');
      return false;
    });
  });

Сохранить.
Далее создаёте виджет на главной странице.
Имя виджета : Переводчик
Использовать стандартный шаблон : Нет
Название виджета : (Оставляете пустым)
Содержание виджета * :

Код:

<div style="position:fixed; left:1%; top: 30%;"><div class="translator"><div class="translatorbutton"><img src="http://cdn.wibiya.com/Apps/0045_iTranslation/Front/Icons/colorglobe.png" title="Переводчик" alt="Переводчик"></div><div style="display: none; position: absolute;" class="translatorCont">

<table border="0" align="center" cellpadding="7" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td align="center" style="font:14px Verdana, Arial, Helvetica, sans-serif; color:#003366; line-height:20px; border:#000000 dashed 1px; background:#FFFFFF;"><a href="http://www.english-easy.info/translator/" target="_blank">Онлайн переводчик</a></td>
</tr>
<tr>
<td align="center" style="font:14px Verdana, Arial, Helvetica, sans-serif; color:#003366; line-height:20px; border:#000000 dashed 1px; background:#FFFFFF;">
<script src="https://www.google.com/jsapi" type="text/javascript"></script>
<script src="http://www.english-easy.info/translator/translator.js" type="text/javascript"></script>
  <form class="query-box" onSubmit="return submitChange();">
  <div align="center">Выберите направление перевода и языковую пару:<br>
  <select id="from">
  <option selected value="en">Английский язык</option>
  <option value="be">Белорусский язык</option>
  <option value="de">Немецкий язык</option>
  <option value="ru">Русский язык</option>
  <option value="uk">Украинский язык</option>
  <option value="fr">Французский язык</option>
  </select>
  <button type="button" onClick="SwapPairs()"><-></button><select id="to">
  <option value="en">Английский язык</option>
  <option value="be">Белорусский язык</option>
  <option value="de">Немецкий язык</option>
  <option selected value="ru">Русский язык</option>
  <option value="uk">Украинский язык</option>
  <option value="fr">Французский язык</option>
  </select>
  </div><table align="center">
  <tr><td><textarea rows="7" id="source" cols="50"; class="query-input"></textarea></td></tr>
  <tr><td><textarea rows="7" cols="50" id="results_body" class="query-input"></textarea><br>
  <div align="center"><input class="button" type="submit" value="Перевести" /></div></td></tr>
  </table></form></td></tr>
  </table><div id="branding"></div>

</div></div></div>

Сохранить.
Добавляете этот виджет в колонку
Далее в CSS ставите код

Код:

/*Переводчик*/
.translator {
position:relative;
width:19px; /*ширина кнопки*/
height:19px; /*высота кнопки*/
}

.translator div.translatorCont {
position:absolute;
width: 450px;
height:auto;
background-color:#fff !important; /*фон окна*/
z-index: 999;
margin-top:3px; /*отступ окна от кнопки*/
margin-left:5px;
border:1px solid #1E90FF; /*стиль рамки окна*/
-moz-border-radius:8px;
-khtml-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
padding:5px;
}

Обалденно хорошо получилось
Большое спасибо вам, Домовой.
Похвалюсь даже:



вот ток в ИЭ не так красиво... рамка там почему-то больше и кнопка ПЕРЕВЕСТИ не помещается на экране...

Ну вообще на BB3 выглядит не совсем так как надо даже в опере.
Вот на PunBB и phpBB2 отлично. Только там вместо виджета надо использовать шаблон overall_footer

есть одна неприятность, Домовой
если зайти в подкатегорию форума и дальше - переводчик не открывается вообще. и эффект сей одинаков для обоих моих форумов...

Домовой пишет:Для BB3
ПА - Модули - HTML & JAVASCRIPT - Управление кодами Javascript
Создать новый Javascript
Название * : Переводчик
Расположение : На всех страницах

Вы именно так сделали?

каюсь. прошу прощения за невнимательность. исправлюсь.

Дамовой, можете ли помочь?
Переводчик красиво стоит, но слегка одиноко.
Хотелось бы туда же, на поле фона загнать еще пару полезных кнопок.
Как их там прописать, растолкуйте пожалуйста.
Спасибо.

да прописать не проблема, так же с помощью дива.

Код:

<div style="position:fixed; left:1%; top: 30%;">
содержимое
</div>

top: 30%; это отступ кнопки от верха.
Задайте отступ так что бы они не лезли друг на друга.
но это просто своего рода контейнер.
Но для чего он я пока не знаю.
Возможно надо будет ещё задавать класс, для того что бы настраивать в CSS
Ставить можно в тот же виджет

замечательно )) работает.
пасиб вам ))