谷歌翻译检测选择，因此可以交换图像

Question

我的网站上运行着谷歌翻译，效果很好。它的顶部有一个小下拉菜单，可以正确翻译整个网页。剩下的一件事是图像，谷歌翻译绝对不能做到这一点。

我想做的是检测谷歌翻译选择，然后将图像交换或重定向到正确的图像，例如：

<img src="logo.png">
<img src="logo_fr.png">
<img src="logo.se.png">
<img src="logo.it.png">
etc....

是否可以找出谷歌翻译下拉框的选择？另外，在加载时将 img src“切换”为正确语言的最佳方法是什么？也许是一个 div，然后填充了 img 数据？

Answer 1

如果正确设置了 HTML 元素的 lang 属性，则可以使用 :lang() CSS 选择器通过某些 CSS 类有条件地渲染图像；

.en, .fr, .se, .it {
  display: none;
}
.en:lang(en) {
  display: block;
}
.fr:lang(fr) {
  display: block;
}
.se:lang(se) {
  display: block;
}
.it:lang(it) {
  display: block;
}

您还需要将类添加到图像中：

<img src="logo.png" class="en">
<img src="logo_fr.png" class="fr">
<img src="logo.se.png" class="se">
<img src="logo.it.png" class="it">

您可能需要添加默认值，以防使用不受支持的语言，以便显示您的默认图像。下面的代码将默认为英文图像。

.en:not(:lang(fr)):not(:lang(se)):not(:lang(it)) {
  display: block;
}

这适用于除 Microsoft Edge 之外的所有机器翻译器，因为它们不会更新文档的

lang

属性。

如果您想知道如何在 JavaScript 中检测机器翻译，我刚刚发布了一篇关于此主题的博文：如何检测 Google 翻译和其他机器翻译。