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

締切済

質問者：n_r_v
質問日時：2012/12/19 08:26
回答数：1件

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

<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

回答者： ORUKA1951
回答日時：2012/12/19 19:15

スタイルシートの画像を置き換えるのではなく、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も弄らなくてすむ。