javascriptでテキストを変更してsrcを保存してください

Question

申し訳ありませんが、それはあなたの質問です！

<script> 
     var translations= { 'en' : 
           {'title' : 'Title', 'textimg' : 'English text'}, 
          'fr' : 
           {'title' : 'Titre', 'textimg' : 'Texte français'} 
          }; 
     function doTranslate(language) { 
      for(id in translations[language]) { 
       document.getElementById(id).innerHTML = translations[language][id]; 
      } 
     } 
</script> 

そしてこのHTML：：

<a href="javascript:doTranslate('fr')"><img src="img/Fr-Flag.png"></a> 
<a href="javascript:doTranslate('en')"><img src="img/UK-Flag.png"></a> 
<h2 id="title">Title</h2> 

私は画像（小さなアイコン）を使用するときに問題が来る：

私はこのコードで自分のページを翻訳するためのスクリプトを使用していますテキストの変更が、srcはdisapearように見えるので、ときにテキストの変更、画像は表示されません。

<img id="textimg" src="img/fav-rond.png">English text</img> 

これを解決するには？

Answer 1

imgタグ内のコンテンツについては、この答えをご覧ください。Div tag within img tag

しかし、可能な解決策は、imgからidを削除し、そのIDを使用してテキストの周りに新しい要素を作成することです。たとえば、次のように

<img src="img/fav-rond.png" /> 
<span id="textimg">English text</span> 

とデモ：https://jsfiddle.net/7j2ckw0r/1/

Answer 2

これは問題を解決するはずです。

document.getElementById(id).setAttribute("id", translations[language][id]) 

この問題を解決するには、innerHTMLを使用しないでください。

Answer 3

<img>タグは、内の任意の情報を許可していない、それは"Empty element"

あなたが内部の任意のテキストを追加する場合、それは無効なHTMLテキストになっています。

何がalt属性を追加して行うことができます。

<img id="textimg" src="img/fav-rond.png" alt="English text"/> 

Answer 4

は、私は強くあなたがこのリンクを訪問することをお勧めします、あなたは純粋なJavaScriptコードでHTMLページを翻訳するための最適な方法を見つけるだろう。

JQuery search dom elements just after rendering and replace keys by its corresponding values

Answer 5

代わりにその代わりに、画像やアクセスした後、直接スパン要素を配置、画像タグにテキストを追加することはできません。

<img src="img/fav-rond.png" /><span id="textimg">English text</span>