• 締切
  • 困ってます

マウスオーバーするボタンの画像を英語に切り替え

  • 質問No.7851760
  • 閲覧数180
  • ありがとう数1
  • 気になる数0
  • 回答数1
  • コメント数0

お礼率 46% (6/13)

マウスオーバーしたら、画像が変わるボタンを作成しています。
基本は英語で作成しています。
画像には文字が含まれているため、
ブラウザの使用言語が日本語の時に画像を日本語用に切り替えようと考えています。

<a id ="trs_02" href="#aaa" onFocus="this.blur()" style="display:block; width:120px; height:30px; background:url(btn10.jpg) no-repeat;"
onmouseover="this.style.backgroundImage='url(btn11.jpg)'";
onmouseout="this.style.backgroundImage='url(btn10.jpg)'";>
</a>

<script type="text/javascript">
chglg();
</script>

として作成したのですが、
btn10.jpgとbtn11.jpgを
btn10-jp.jpgとbtn11-jp.jpg
に差し替えたいのです。

<script type="text/javascript">
function chglg() {
var lang = (navigator.browserLanguage || navigator.language || navigator.userLanguage).substr(0,2);
if(lang == "ja"||"JP"){
document.getElementById("trs_02").style.backgroundImage="url(btn10-jp.jpg)";
}
}
</script>

とすれば最初は日本語ですが、マウスオーバー時とマウスアウト時は
日本語になりません。

this.style.backgroundImage='url(btn11.jpg)'

の部分を切り替え方が解らず、困っています。
出来ればdocument.getElementByIdを使いたいのですが...

よろしくお願いします。

回答 (全1件)

  • 回答No.1

ベストアンサー率 45% (5062/11035)

スタイルシートの画像を置き換えるのではなく、HTMLのlang属性を書き換えるほうが楽です。
<html lang="en-us">
 などでデフォルトの言語はen-で始まるものにされていると思います。

 HTMLのナビゲーションリストが
<div class="nav">
 <ol>
  <li><a href="/" lang="en-us">Top</a></li>
  <li><a href="/products" lang="en-us">products</a></li>
  <li><a href="/ContuatUs" lang="en-us">ContuatUs</a></li>
 </ol>
</div>
とかだと思います。
 スタイルシートは、
div.nav ol li a{overflow:hidden;width:6em;}
div.nav ol li a[href="/"][lang|=en]{background:url() 0 0;}
div.nav ol li a[href="/"][lang|=en]:hover{background:url() 0 100px;}
div.nav ol li a[href="/"][lang|=en]:active{background:url() 0 200px;}

div.nav ol li a[="/"][lang="ja"]{background:url([日本語画像]) 0 0;}
div.nav ol li a[href="/"][lang="ja"]:hover{background:url([日本語画像]) 0 100px;}
div.nav ol li a[href="/"][lang="ja"]:active{background:url([日本語画像]) 0 200px;}

とかだと、javascriptで該当要素にlang="ja"を追加するだけで背景画像は切り替わるはずです。
 要素セレクタを使ってスタイルシートを書いておけば、lang属性に関わらず、class属性でも何でも良いですし、HTMLも弄らなくてすむ。
お礼コメント
n_r_v

お礼率 46% (6/13)

ありがとうございました。
投稿日時:2012/12/20 04:09
結果を報告する
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。
AIエージェント「あい」

こんにちは。AIエージェントの「あい」です。
あなたの悩みに、OKWAVE 3,600万件のQ&Aを分析して最適な回答をご提案します。

関連するQ&A

その他の関連するQ&Aをキーワードで探す

ピックアップ

ページ先頭へ