Googleのウェブサイト翻訳ツールで画像の対応

ウェブサイト翻訳ツール
https://translate.google.com/manager/website/?hl=ja

自サイトに設置した翻訳ツールで画像の切り替えにも対応できないかと試行錯誤しております。
javascriptで言語切替のイベントを取得できれば、
予め用意した英語版画像などに差し替える処理を実行するなどして対応できそうだと思ったのですが
言語切替のイベントを取得する方法やコードをご存知の方がいらっしゃいましたらご教示頂きたいです。

よろしくお願い致します。

m.ts10806

2018/07/03 04:34

URLはリンクにできるので、調整してもらえますか？

行動規範の内容に同意します

回答2件

自身の環境に簡易に設置した上で調べてみました。

言語を切り替えると下記の場所が変わるようですね。

ヘルプ探ってみましたが、イベント処理はなさそう。
装飾はできるようですね。

Google翻訳ツールでサイトを多言語対応にする

htmlタグの変更監視なので、changeイベントではとれません。
下記のようにすれば一応、現在選択されている言語がとれることはとれました。

js
1var Lang = "";
2$(function(){
3  var getLang = function() {
4        Lang = $("#google_translate_element div div span a.goog-te-menu-value span:first-child").text();
5        console.log(Lang );
6    };
7    setInterval(getLang, 300);
8});
9

※設定などで途中の階層やクラス名がかわるかもしれませんのでそこは自身の環境にあわせて調整してください。

動かしてみれば分かるとは思いますが、「言語を選択」からコンソールに出力されます。
実際に言語を選択すればその言語がコンソールに出力されます。

ひとまず「[言語を選択]以外のときに言語が切り替わった」ようなやり方はできるように思います。

参考まで。

投稿2018/07/03 05:08

m.ts10806

総合スコア80854

自己解決

mts10806 様ありがとうございます

頂いた回答をヒントに下記コードでなんとかなりそうです。
※表示モード「インライン + 縦or横」で設置した状態で。

Javascript
1$(function () {
2  var getLang = function(){
3    var selector = $('#google_translate_element .goog-te-combo').html();
4    if(selector){
5      $('#google_translate_element .goog-te-combo').on('change', function(){
6        console.log('lang-change', $(this).val());
7      });
8      clearInterval(getLangTimer);
9    }
10  };
11  var getLangTimer = setInterval(getLang, 300);
12});