- 締切済み
マウスオーバーするボタンの画像を英語に切り替え
マウスオーバーしたら、画像が変わるボタンを作成しています。 基本は英語で作成しています。 画像には文字が含まれているため、 ブラウザの使用言語が日本語の時に画像を日本語用に切り替えようと考えています。 <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を使いたいのですが... よろしくお願いします。
- n_r_v
- お礼率46% (6/13)
- HTML
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
スタイルシートの画像を置き換えるのではなく、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も弄らなくてすむ。
関連するQ&A
- テーブル背景を毎日入れ替える方法
以前ここで同様の質問させていただいた者です。 回答いただいた例を参考にして、自分なりに設定を直してみたのですが動かない状態です… もう一度ご教授をお願いします。 テーブルの背景画像を日によって変更できるように、と思っています。 tableタグ内は、以下のようにしました。 <table id="BACKIMG" ～中略～ style="BORDER: #7B7B7B 1px solid; background-image:url('image/tableback.jpg');"> またJavaScriptは外部ファイルにして 【Change.js】の内容↓ function fncChange() { var a; var date = new Date(); var d = date.getDate(); a = d % 7; if (a==0){ document.getElementById("BACKIMG").style.backgroundImage="url(images/images0/top.jpg)"; }else if (a=1){ document.getElementById("BACKIMG").style.backgroundImage="url(images/images1/top.jpg)"; }else if (a=2){ document.getElementById("BACKIMG").style.backgroundImage="url(images/images2/top.jpg)"; }else if (a=3){ document.getElementById("BACKIMG").style.backgroundImage="url(images/images3/top.jpg)"; }else if (a=4){ document.getElementById("BACKIMG").style.backgroundImage="url(images/images4/top.jpg)"; }else if (a=5){ document.getElementById("BACKIMG").style.backgroundImage="url(images/images5/top.jpg)"; }else if (a=6){ document.getElementById("BACKIMG").style.backgroundImage="url(images/images6/top.jpg)"; } } 使用する画像はフォルダで分けるつもりです。 HTMLにはHEADタグの間に <SCRIPT language="javascript" src="Change.js"> <!--// fncChange(); //--> </SCRIPT> を記述しています。 これで不足してる部分がありますでしょうか？ 解決策をよろしくお願いします。
- ベストアンサー
- JavaScript
- クリックして画像を表示JavaScriptについて
友人がJavaScriptに苦戦しています。 ボタンをクリックすると、画像が表示されるプログラムを作りたいそうです。以下、送られて来たコードです。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div class="box"><!--attr (DOMのsetAttributeと同じ)--> <script> addEventListener("load",()=>{ document.getElementById("btn").addEventListener("click",()=>{ //$("img").attr("src","./image.jpg"); document.getElementById("aa").style.color = "white"; document.getElementById("img").style.backgroundImage = "./image.jpg"; }); }); </script> <button id="btn">ここをクリックで画像表示</button> <p id="aa">aa</p> <img id="img"> </div> </body> </html> なぜかボタンをクリックしても、画像が表示されません。なぜなのでしょうか？教えて頂きたく思います。
- ベストアンサー
- JavaScript
- マウスオーバーで画像の入れ替え
以下のソースでマウスオーバー時に画像の入れ替えをしたいのですが、IE6では動作するのですが、firefoxでは動作しません。 firefoxでも動くようにするにはどうしたらいいですか？ アドバイスよろしくお願いいたします。 <html> <head> <script language="JavaScript"> <!-- // タイマー変数の初期化 timer = ""; // スワップイメージ function SwapImage(img) { obj = document.getElementById("image"); obj.src = img; clearTimeout(timer); timer=setTimeout('DefaultImage()',5000); } // イメージ画像の初期化 function DefaultImage() { obj = document.getElementById("image"); obj.src = 'img/default.gif'; clearTimeout(timer); } //--> </script> </head> <body> <div class="btn"><a href="#"><img src="img/sample1.jpg" onmouseover="SwapImage('img/test01.jpg')" width="100" height="50" border="0" /></a></div> <div class="btn"><a href="#"><img src="img/sample2.jpg" onmouseover="SwapImage('img/test02.jpg')" width="100" height="50" border="0" /></a></div> <div class="btn"><a href="#"><img src="img/sample3.jpg" onmouseover="SwapImage('img/test03.jpg')" width="100" height="50" border="0" /></a></div> <div id="photo"><img src="img/default.gif" name="image" width="300px" height="150px"></div> </body> </html>
- ベストアンサー
- JavaScript
- ボタンフォームに対するマウスオーバー効果追加
簡単に実現できれば、程度の要望なのですが、以下のHTMLでボタン上にマウスカーソルが乗ったら (1) この人に投票する！ が赤字になる (2) kao.pngが、nikoniko.png に変わる (3) マウスを離すと(1) (2) が既定に戻る と動作させることはできますか？ なお、(1) については、inputタグに onmouseover="this.color='red'" onmouseout="this.color='blue'" を仕込んでみましたがダメでした。 <html> <head> <style type="text/css"> .btn { background-repeat: no-repeat; color: blue; background-position: left; padding-left: 25px; background-image: url(./kao.png); /* 22px x 22px */ } --> </style> </head> <body> <input type='button' name='vote' value='この人に投票する！' class='btn'/> </body> </html>
- ベストアンサー
- CSS
- マウスオーバーして画像を入れ替えたい
YahooのジオシティーズでHPを作成していますが、教えていただきたいことが２つあります。 １.javaスクリプトを使ってマウスオーバー、マウスアウトした時に写真を入替えたいと思っていますが、全くの初心者でどこにタグを入れていいのかわかりません。 どなたか下記ＵＲＬのページの写真(1)にマウスオーバーした場合に写真(2)に変わり、マウスアウトすると写真(1)に戻るよう、下記URLのソースをすぐに使えるように手直ししていただけませんか？http://sky.geocities.jp/hokuto5131/test.html ２．Yahooのジオシティーズでマウスオーバーして画像を入替えるHPを見てみると、入替える画像のURLはimg.1のようになっていますが、私がYahooのジオシティーズに画像データを送ると上記のURLのソースのように『http://sky.geocities.jp/hokuto5131/～』になってしまいます。なぜでしょうか？またそのページに貼り付けていない画像データをどうやってYahooのジオシティーズのサーバーに送るのでしょうか？ 以上よろしくお願いします。
- ベストアンサー
- ホームページ作成ソフト
- マウスオーバーで画像を切り替えたい！
みなさん，よろしくお願いします。 リンク文字にマウスを持ってきたときに， 画像を切り替えたいと思っています。 でも，リンク文字にマウスを持ってきたときに， 指の形に変わり”ピコピコ”動いてしまいます。 とても気になるので，”ピコピコ”動かないようにしたいのですが， どのようにすればよろしいのでしょうか？ よろしくお願いします。 方法にはこだわりません，画像が切り替えれれば・・。 <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>Sample</title> <script language="JavaScript"><!-- function changeIframe(changeURL) { myFrame.location.href = jumpURL; } // --></script> </head> <body> <a href="No1.htm" onmousemove="changeIframe('Sample1.JPG')">こっちへ</a> <a href="No2.htm" onmousemove="changeIframe('Sample2.JPG')">あっちへ</a> <a href="No2.htm" onmousemove="changeIframe('Sample2.JPG')">そっちへ</a> <iframe src="First.html" name="myIFrame" width="320" height="240" scrolling="no" frameborder="0"></iframe> </body> </html>
- ベストアンサー
- JavaScript
- 画像にエリア指定をしてマウスオーバーすると画像が変わり、さらにそのマウ
画像にエリア指定をしてマウスオーバーすると画像が変わり、さらにそのマウスオーバーがフェードで切り替わるということはできないでしょうか？ 画像にエリア指定をしてマウスオーバーすると画像が変わるということはできたのですが その画像の切り替えをフェードでできないでしょうか 問題のコードです <script>function over(num){ document.getElementById("mg").src="site02/ex/ex_top03"+num+".jpg" } function out(){ document.getElementById("mg").src="site02/ex/ex_top03.jpg" } </script> <div id="main_content_ex"> <img id="mg" src="site02/ex/ex_top03.jpg" usemap="#hisigata" border="0" /> <map name ="hisigata"> <area shape="rect" coords="10,498,149,532" href="site02/lightbox/ex.htm" onmouseover="over(1)" onmouseout="out()"> <area shape="rect" coords="582,468,790,496" onmouseover="over(2)" onmouseout="out()"> <area shape="rect" coords="800,465,932,493" onmouseover="over(3)" onmouseout="out()"></div> jQueryなどのフェードのエフェクトを使用しようかとも思ったのですが、javascriptでmouseOverの画像を指定しているためどう書いていいかわからなくなってしまいました こういう質問のしかたで大変恐縮なのですが 誰かご教授願えないでしょうか？？ scriptもjQueryも基本を理解できておらず、大変困っています。 大変申し訳ありませんが、お願いいたします。
- ベストアンサー
- JavaScript
- イベントバブル、マウスオーバーなどに関して
http://okwave.jp/qa/q6681276.html に関連しますが divの中に、p、ulが同列にあり div領域からmouseoutしたらイベントが起きるようにしたいと思っています。 イベントは親要素に伝播するということなので event.cancelBubble = true; window.event.cancelBubble=true; をp,ulのイベントに入れました。 又、各要素のマウス状態の履歴をテーブルに残してみました（下にソース）。 （マウスアウトしたら「x」、オーバーで「o」） その結果、 バブリング防止策を講じたため pまたはulのマウスアウトはdivに伝わっていません(ただしFirefoxではダメ？)。 ところがよく見ると div→p div→ul と移動する際、div内ではありますが divは一旦マウスアウトしてから再びマウスオーバーとなっているようです。 まず、ここまでの理解は間違っていないでしょうか？ そして、境界線をまたぐ際、マウスアウトになるのはどうにもならないのでしょうか？ 基本的な質問で申し訳ありませんが、よろしくお願いします。 --------------------------------------------------------------------------------------------- <script style="text/javascript"> function divOn() { document.getElementById('atDiv').innerHTML=document.getElementById('atDiv').innerHTML+'o'; } function divOff() { document.getElementById('atDiv').innerHTML=document.getElementById('atDiv').innerHTML+'x'; } function pOn() { document.getElementById('atP').innerHTML=document.getElementById('atP').innerHTML+'o'; } function pOff() { document.getElementById('atP').innerHTML=document.getElementById('atP').innerHTML+'x'; } function ulOn() { document.getElementById('atUl').innerHTML=document.getElementById('atUl').innerHTML+'o'; } function ulOff() { document.getElementById('atUl').innerHTML=document.getElementById('atUl').innerHTML+'x'; } function stopBubbling() { event.cancelBubble=true; stopPropagation=true; } </script> <div onMouseover="divOn();" onMouseout="divOff();" style="background:#fee;padding:1em;height:300px;">div <p onMouseover="pOn();" onMouseout="stopBubbling();pOff();" style="background:#efe;height:100px;">p</p> <ul onMouseover="ulOn();" onMouseout="stopBubbling();ulOff();" style=";background:#eef;height:100px;"> <li><a>li</a></li> <li><a>li</a></li> </ul> </div> <table border="1"> <thead> <tr> <th>div</th> <th>p</th> <th>ul</th> </tr> </thead> <tbody> <tr> <td id="atDiv"><br /></td> <td id="atP"><br/></td> <td id="atUl"><br/></td> </tr> </tbody> </table>
- ベストアンサー
- JavaScript
- FLASHのマウスオーバーとスタートに関する質問です。
FLASHのマウスオーバーとスタートに関する質問です。 はじめまして。 FlashCS3を使用して作成しているのですが、質問があります。 ボタンを作成して、マウスオーバーで画像を変えるものを2点作成し、 どちらかをクリックするとイベントが始まるように仕掛けたいのですが、どうもうまくいきません。 別々にはできたのですが、 this.stop(); play_btn.gotoAndStop(1); と on (release) { gotoAndPlay(2); } 上記２つのスクリプトでイベントスタートさせますと、 マウスオーバーが作動しないのですが、対策は何かありませんでしょうか？ わかりにくくて申し訳ございませんがよろしくお願い致します。
- ベストアンサー
- Flash
- マウスオーバーの合体
マウスオーバーのプルダウンメニューと マウスオーバー画像変更スクリプトを組み合わせることは可能なのでしょうか？ イメージとしては所期画面に画像Ａがあり、マウスを載せると画像Ａが画像Ｂになり、 更に画像Ｂの下にプルダウンメニューが表示されるイメージです。 尚、現在は以下の組み合わせがうまくいかない為（不可能？） 個々にスクリプトを記載しておきます。 ↓↓↓↓↓↓マウスオーバーのプルダウンメニュー↓↓↓↓↓↓ <html> <head> <script language="JavaScript"><!-- vType = ["hidden","visible"]; function pdMenu(mName) { Menu = document.all[mName].style; Menu.visibility = vType[Menu.visibility.indexOf("hidden") + 1]; } // --></script> </head> <body> <img src="main.png" onMouseover="pdMenu('Menu')"><br> <div id="Menu" style="visibility:hidden" onMouseout="pdMenu('Menu')"> <a href="http://www.yahoo.co.jp/" ><img src="sub01.png" border="0"></a><br> <a href="http://www.google.co.jp/"><img src="sub02.png" border="0"></a><br> </div> </body> </html> ↑↑↑↑↑↑マウスオーバーのプルダウンメニュー↑↑↑↑↑↑ ↓↓↓↓↓↓マウスオーバー画像変更スクリプト↓↓↓↓↓↓ <img border="0" src="main.png" onmouseover="this.src='main2.png'" onmouseout="this.src='main.png'"> ↑↑↑↑↑↑マウスオーバー画像変更スクリプト↑↑↑↑↑↑
- 締切済み
- JavaScript
お礼
ありがとうございました。