홈으로 | 무료회원가입 | 아이디/비번찾기
추천음악방송
구글 번역 API를 사용하여 홈피에 언어 번역기 달기
10년 전
구글 번역 API를 이용해서 간단한 샘플을 만들어 봤습니다.

<html>
  <head>
    <script type="text/javascript" src="http://www.google.com/jsapi">
    </script>
    <script type="text/javascript">

    google.load("language", "1");

    function google_language_for_div(detectID, transID, lang) {
      var text = document.getElementById(detectID).innerHTML;
      google.language.detect(text, function(result) {
        if (!result.error && result.language) {
          google.language.translate(text, result.language, lang,
                                    function(result) {
            var translated = document.getElementById(transID);
            if (result.translation) {
              translated.innerHTML = result.translation;
            }
          });
        }
      });
    }

    function google_language_for_input(detectID, transID, lang) {
      var text = document.getElementById(detectID).value;
      google.language.detect(text, function(result) {
        if (!result.error && result.language) {
          google.language.translate(text, result.language, lang,
                                    function(result) {
            var translated = document.getElementById(transID);
            if (result.translation) {
              translated.innerHTML = result.translation;
            }
          });
        }
      });
    }


    </script>
  </head>
  <body>
    <div id="text">안녕하세요. 만나서 반갑습니다. happycgi 입니다.</div>
    <div id="translation1"></div>
    <div id="translation2"></div>
    <div id="translation3"></div>
    <div id="translation4"></div>
    <div id="translation5"></div>

<input type='button' value="영어" onClick="google_language_for_div('text', 'translation1', 'en')">
<input type='button' value="일어" onClick="google_language_for_div('text', 'translation2', 'ja')">
<input type='button' value="중국어" onClick="google_language_for_div('text', 'translation3', 'zh')">
<input type='button' value="독일어" onClick="google_language_for_div('text', 'translation4', 'de')">
<input type='button' value="러시아" onClick="google_language_for_div('text', 'translation5', 'ru')">


<hr><hr>

<textarea name="inputText" id="inputText" cols="50" rows="5"></textarea>
<br>
<div id="translation6"></div>

<select name="selectLang" id="selectLang">
  <option value="en">영어</option>
  <option value="ja">일어</option>
  <option value="zh">중국어</option>
  <option value="de">독일어</option>
  <option value="ru">러시아</option>
</select>
<input type='button' value="번역" onClick="google_language_for_input('inputText', 'translation6', document.getElementById('selectLang').options[document.getElementById('selectLang').selectedIndex].value)">

  </body>
</html>

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

위 소스는 특정 div안에 있는 언어를 원하시는 언어로 번역하여 특정 div안으로 값을 넣어주는 함수와
특정 input 박스 또는 textarea에 있는 값을, 번역된 값을 div안으로 넣어주는 함수가 있습니다.

기본적인 javascript 기능은 구글 번역 api에 나와있는 샘플을 이용했으며,
사용이 쉽도록 함수화를 해두었다고 보시면 되겠습니다.

함수의 사용방법은 아래와 같습니다.

div 안의 언어를 div로 번역결과 보내기
google_language_for_div( 번역할 ID값 , 번역후 입력될 ID값, 번역할 언어 );

input박스또는 textarea안의 언어를 div로  번역결과 보내기 함수또한 사용방법은 동일합니다.


번역 가능한 언어는 아래와 같습니다.

  'AFRIKAANS' : 'af',  'ALBANIAN' : 'sq',  'AMHARIC' : 'am',  'ARABIC' : 'ar',  'ARMENIAN' : 'hy',  'AZERBAIJANI' : 'az',  'BASQUE' : 'eu',  'BELARUSIAN' : 'be',  'BENGALI' : 'bn',  'BIHARI' : 'bh',  'BRETON' : 'br',  'BULGARIAN' : 'bg',  'BURMESE' : 'my',  'CATALAN' : 'ca',  'CHINESE' : 'zh',  'CHINESE_SIMPLIFIED' : 'zh-CN',  'CHINESE_TRADITIONAL' : 'zh-TW',  'CORSICAN' : 'co',  'CROATIAN' : 'hr',  'CZECH' : 'cs',  'DANISH' : 'da',  'DHIVEHI' : 'dv',  'DUTCH': 'nl',    'ENGLISH' : 'en',  'ESPERANTO' : 'eo',  'ESTONIAN' : 'et',  'FAROESE' : 'fo',  'FILIPINO' : 'tl',  'FINNISH' : 'fi',  'FRENCH' : 'fr',  'FRISIAN' : 'fy',  'GALICIAN' : 'gl',  'GEORGIAN' : 'ka',  'GERMAN' : 'de',  'GUJARATI' : 'gu',  'HAITIAN_CREOLE' : 'ht',  'HEBREW' : 'iw',  'HINDI' : 'hi',  'HUNGARIAN' : 'hu',  'ICELANDIC' : 'is',  'INDONESIAN' : 'id',  'INUKTITUT' : 'iu',  'IRISH' : 'ga',  'ITALIAN' : 'it',  'JAPANESE' : 'ja',  'JAVANESE' : 'jw',  'KANNADA' : 'kn',  'KAZAKH' : 'kk',  'KHMER' : 'km',  'KOREAN' : 'ko',  'KURDISH': 'ku',  'KYRGYZ': 'ky',  'LAO' : 'lo',  'LATIN' : 'la',  'LATVIAN' : 'lv',  'LITHUANIAN' : 'lt',  'LUXEMBOURGISH' : 'lb',  'MACEDONIAN' : 'mk',  'MALAY' : 'ms',  'MALAYALAM' : 'ml',  'MALTESE' : 'mt',  'MAORI' : 'mi',  'MARATHI' : 'mr',  'MONGOLIAN' : 'mn',  'NEPALI' : 'ne',  'NORWEGIAN' : 'no',  'OCCITAN' : 'oc',  'ORIYA' : 'or',  'PASHTO' : 'ps',  'PERSIAN' : 'fa',  'POLISH' : 'pl',  'PORTUGUESE' : 'pt',  'PORTUGUESE_PORTUGAL' : 'pt-PT',  'PUNJABI' : 'pa',  'QUECHUA' : 'qu',  'ROMANIAN' : 'ro',  'RUSSIAN' : 'ru',  'SANSKRIT' : 'sa',  'SCOTS_GAELIC' : 'gd',  'SERBIAN' : 'sr',  'SINDHI' : 'sd',  'SINHALESE' : 'si',  'SLOVAK' : 'sk',  'SLOVENIAN' : 'sl',  'SPANISH' : 'es',  'SUNDANESE' : 'su',  'SWAHILI' : 'sw',  'SWEDISH' : 'sv',  'SYRIAC' : 'syr',  'TAJIK' : 'tg',  'TAMIL' : 'ta',  'TATAR' : 'tt',  'TELUGU' : 'te',  'THAI' : 'th',  'TIBETAN' : 'bo',  'TONGA' : 'to',  'TURKISH' : 'tr',  'UKRAINIAN' : 'uk',  'URDU' : 'ur',  'UZBEK' : 'uz',  'UIGHUR' : 'ug',  'VIETNAMESE' : 'vi',  'WELSH' : 'cy',  'YIDDISH' : 'yi',  'YORUBA' : 'yo'

예를들어 YORUBA 언어로 변경을 하고 싶으시다면 'YORUBA' : 'yo' 를 참조하셔서 'yo'로 지정을 하시면 됩니다.
추천추천 : 472 추천 목록
번호 제목
3,025
 윈도우10 시스템파일 손상 (초간단 오류 복구방법!!)
3,024
 PHP 파일 존재 여부 파악하기(로컬 파일 존재 및 원격지 파일 존재)
3,023
 [CSS] 박스 세로 가운데 중앙 정렬 6가지
3,022
 CSS Layout 수평 & 수직 정렬
3,021
 여러 도메인들 간 쿠키 공유하기
3,020
 태그 사이에 있는 텍스트를 추출
3,019
 [JQuery] textbox focus on off일때 숫자 콤마 보여주기
3,018
 쿠키 생성,가져오기,삭제
3,017
 사용자 함수 모음
3,016
 마우스,키보드 제한 ( 오른쪽클릭,드래그,영역선택등..)
3,015
 [HTML5] <video> - DOM으로 제어하기
3,014
 HTML5 video 태그에서 영상 좌우반전
3,013
 PHP - 특정 태그 및 문자열 추출, 제거
3,012
 [PHP] define과 defined의 차이
3,011
 우클릭 완벽차단 스크립트
3,010
 iframe 높이 100% 맞추기
3,009
 curl 함수를 이용한 HTTP REFERER 변경
3,008
 윈도우10 시스템 파일 및 Dism 검사
3,007
 텍스트 줄바꿈, 글자자르기 CSS
3,006
 jQuery Mobile에서 유용한 코드 10가지.
3,005
 [PHP] dirname()함수와 $_SERVER 관련 상수들
3,004
 [PHP] 파일 크기, 사이즈 불러오는 함수, filesize()
3,003
 [jQuery] jQuery Quick API
3,002
 [ transition ] 링크 hover 색상 변화 속도 조절
3,001
 PHP 5.3.0 에서 사라진 함수들 대체
목록
뮤직트로트 부산광역시 부산진구 가야동 ㅣ 개인정보취급방침
Copyright (C) musictrot All rights reserved.