| 구글 번역 API를 사용하여 홈피에 언어 번역기 달기 |
|
|
  |
13년 전
|
구글 번역 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'로 지정을 하시면 됩니다. |
|
 추천 : 606 |
추천
목록
|
|
