質問: マウスオーバーしたら、画像が変わるボタンを作成しています。 基本は英語で作成しています。 画像には文字が含まれているため、 ブラウザの使用言語が日本語の時に画像を日本語用に切り替えようと考えています。 として作成したのですが、 btn10.jpgとbtn11.jpgを btn10-jp.jpgとbtn11-jp.jpg に差し替えたいのです。 とすれば最初は日本語ですが、マウスオーバー時とマウスアウト時は 日本語になりません。 this.style.backgroundImage='url(btn11.jpg)' の部分を切り替え方が解らず、困っています。 出来ればdocument.getElementByIdを使いたいのですが... よろしくお願いします。
回答: スタイルシートの画像を置き換えるのではなく、HTMLのlang属性を書き換えるほうが楽です。 などでデフォルトの言語はen-で始まるものにされていると思います。 HTMLのナビゲーションリストが Top products ContuatUs とかだと思います。 スタイルシートは、 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も弄らなくてすむ。