- ベストアンサー
JavaScriptを使ったホームページ作成とボタン画像切り替えに関する質問
- JavaScriptを使用してホームページを作成しています。マウスオーバー時にボタンの画像を切り替える方法や、複数のJavaScriptを同時に使用する方法について教えてください。
- ホームページ作成にはJavaScriptを使用していますが、ボタンの画像切り替えや複数のJavaScriptの同時使用で問題が発生しています。どのように修正すればよいでしょうか？
- JavaScriptを使ったホームページ作成中に、マウスオーバー時にボタンの画像を切り替えたいですが、ボタンのタグが誤っているのか、複数のJavaScriptを同時に使用する方法が分かりません。解決策を教えてください。
- Satoshik0404
- お礼率84% (11/13)
- JavaScript
- 回答数5
- ありがとう数10
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
#3です。 すみません、手を抜いたら間違えていました。 メニューが増えると先読み部分が長くなるので短くすべきところですが、 2段階変えるとわけわからなくなるので1段階だけ直しました。 defとシンクロさせるためにnameを使って連想配列(["img1"]["img2"])にしました。 あとは["img3"]["img4"]・・・と増やしてください。 ※AとかBとかは動作確認のためつけてあるだけです。 <html> <head> <title>TAG index Webサイト</title> <script type="text/javascript"> <!-- if (document.images) { // 設定開始（使用する画像を設定してください） //元画像 var myimgA = new Array(); //後画像 var myimgB = new Array(); //メニュー1の元画像・後画像 myimgA["img1"] = new Image(); myimgA["img1"].src = "bbs1A.jpg"; myimgA["img1"].alt = "bbs1A"; myimgB["img1"] = new Image(); myimgB["img1"].src = "bbs1B.jpg"; myimgB["img1"].alt = "bbs1B"; //メニュー2の元画像・後画像 myimgA["img2"] = new Image(); myimgA["img2"].src = "bbs2A.jpg"; myimgA["img2"].alt = "bbs2A"; myimgB["img2"] = new Image(); myimgB["img2"].src = "bbs2B.jpg"; myimgB["img2"].alt = "bbs2B"; // 通常の画像 var img0 = new Image(); img0.src = "image/start.jpg"; // ポイント時の画像1 var img1 = new Image(); img1.src = "image/newyork.jpg"; // ポイント時の画像2 var img2 = new Image(); img2.src = "image/london.jpg"; // ポイント時の画像3 var img3 = new Image(); img3.src = "image/yokohama.jpg"; // 設定終了 } // ポイント時の処理 function On(o,name) { if (document.images) { document.images['def'].src = eval(name + '.src'); document.images['def'].alt = name; o.src = myimgB[name].src; o.alt = myimgB[name].alt; } } // 放した時の処理 function Off(o,name) { if (document.images) { document.images['def'].src = img0.src; document.images['def'].alt = "img0"; o.src = myimgA[name].src; o.alt = myimgA[name].alt; } } //--> </script> </head> <body> <p><img src="image/start.jpg" alt="img0" name="def" width="100" height="100"></p> <p><a href="../usatop.html"><img src="bbs1A.jpg" alt="bbs1A" width="100" height="30" onMouseOver="On(this,'img1')" onMouseOut="Off(this,'img1')"></a></p> <p><a href="../hogehoge.html"><img src="bbs2A.jpg" alt="bbs2A" width="100" height="30" onMouseOver="On(this,'img2')" onMouseOut="Off(this,'img2')"></a></p> </body> </html>
その他の回答 (4)
- fujillin
- ベストアンサー率61% (1594/2576)
#2です。 ＞のページの真ん中の右にあるメニューのように～ 実物がそこになるのなら、そのソースを見ればよいのでは？ 見た目が同じようなものを、参照例とは別に作成してみましたのでご参考まで。 ＊ ソース内のリストの <a href="b.html">◇ bbbb</a><img src="B.jpg" alt="B"> が、「リンク先」、「表示文字」、「マウスオーバー時の表示画像」でセットになっています。 ＊ リンクタグのロールオーバーはCSSにしていますので、内容を変えたい場合は #menu ul li a:hover {} の内容を変えればよいです。 （スクリプトでも可能ですが、変更時にわからない可能性があるので） 全体のレイアウトはサンプルなのでいい加減です。 CSSを修正してください。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head><title>test</title> <style type="text/css"> #menu * {margin:0; padding:0;} #menu {display:inline-block; height:auto; width:330px; padding:2px; padding-left:10px;} #menu ul {list-style-type:none; height:120px; float:left;} #menu ul li img {display:none;} #menu .screen {float:right; text-align:center; padding:10px; border:1px solid #669;} #menu .screen img {width:180px; height:100px;} #menu ul li a {display:inline-block; width:100px;} #menu ul li a:hover {color:#ff6; background-color:#669;} </style> </head> <body> <div id="menu" onmouseout="hoge(event)"> <ul> <li><a href="a.html">◇ aaaa</a><img src="A.jpg" alt="A"></li> <li><a href="b.html">◇ bbbb</a><img src="B.jpg" alt="B"></li> <li><a href="c.html">◇ cccc</a><img src="C.jpg" alt="C"></li> <li><a href="d.html">◇ dddd</a><img src="D.jpg" alt="D"></li> <li><a href="e.html">◇ eeee</a><img src="E.jpg" alt="E"></li> </ul> <div class="screen"> <img src="default.jpg" alt="default"> </div> </div> <script type="text/javascript"> <!-- var hoge = (function(get) { var def = get(get(get(document,"menu",1),"DIV",0),"IMG",0).src; return function(evt) { var img, t = evt.target || evt.srcElement; var r = evt.relatedTarget || evt.toElement || null; var d = get(get(get(document,"menu",1),"DIV",0),"IMG",0); if (t.nodeName == "A") d.src = def; if (r && r.nodeName == "A") { img = r.nextSibling; while (img && img.nodeName != "IMG") img = img.nextSibling; if (img) d.src = img.src; } } })(function(p, c, f) { return f?p.getElementById(c):p.getElementsByTagName(c)[0]; }); //--> </script> </body> </html>
お礼
ソースが見れませんでした。。 色々なやり方があるのですね。 とても参考になりました。ありがとうございます。
- zeff
- ベストアンサー率69% (137/198)
※前の方とは別人です。 ボタン、ボタンとおっしゃっていますが、 「ボタン」と聞いて連想するのは <input type="button">か<button>です。 そのソース、どこかで見たことあると思ったらtagindexですね。 http://www.tagindex.com/javascript/link/change3.html 自分だったらそういう書き方はしないと思いますが。 nameじゃなくてidだと思うし。evalもなんか違う感じ。 要はマウスを乗せる位置がアンカーでなくて複数の画像で、 それぞれに対応して任意の特定の位置にある画像を入れ替える、 ということじゃないんですか？ イベントを画像に対して付けて、引数でthisを渡して入れ替えれば良さそう。 画像の幅や高さ、画像ファイル名などは適当です。 オンマウスする画像は（面倒なので）1個だけにしています。 <html> <head> <title>TAG index Webサイト</title> <script type="text/javascript"> <!-- if (document.images) { // 設定開始（使用する画像を設定してください） var myimg0 = new Image(); myimg0.src = "bbs.jpg"; myimg0.alt = "bbs"; var myimg1 = new Image(); myimg1.src = "bbs1.jpg"; myimg1.alt = "bbs1"; // 通常の画像 var img0 = new Image(); img0.src = "image/start.jpg"; // ポイント時の画像1 var img1 = new Image(); img1.src = "image/newyork.jpg"; // ポイント時の画像2 var img2 = new Image(); img2.src = "image/london.jpg"; // ポイント時の画像3 var img3 = new Image(); img3.src = "image/yokohama.jpg"; // 設定終了 } // ポイント時の処理 function On(o,name) { if (document.images) { document.images['def'].src = eval(name + '.src'); document.images['def'].alt = name; o.src = myimg1.src; o.alt = myimg1.alt; } } // 放した時の処理 function Off(o) { if (document.images) { document.images['def'].src = img0.src; document.images['def'].alt = "img0"; o.src = myimg0.src; o.alt = myimg0.alt; } } // --> </script> </head> <body> <p><img src="image/start.jpg" alt="img0" name="def" width="100" height="100"></p> <p> <a href="../usatop.html"><img src="bbs.jpg" alt="bbs" name="myimg0" width="100" height="30"onMouseOver="On(this,'img1')" onMouseOut="Off(this)"></a> </p> </body> </html>
補足
ありがとうございます。大変参考になりました。 同時にjavascriptを動かすことは出来たのですが、 オンマウスする画像(メニューボタン)を増やすと、 その画像にオンマウスした時に // ポイント時の処理 function On(o,name) { if (document.images) { document.images['def'].src = eval(name + '.src'); document.images['def'].alt = name; o.src = myimg1.src; o.alt = myimg1.alt; } } // 放した時の処理 function Off(o) { if (document.images) { document.images['def'].src = img0.src; document.images['def'].alt = "img0"; o.src = myimg0.src; o.alt = myimg0.alt; の効果で全て一つ(myimg0？)のメニューボタンの画像に変わってしまいます。 メニューボタンを増やす場合、このjavascriptをどうやって書き換えれば良いのでしょうか？ 本当に初心者の質問で申し訳ありません。 是非よろしくお願い致します。
- fujillin
- ベストアンサー率61% (1594/2576)
なんだかどうしたいのか混乱を招くような例示ですね。 ・idocument.images['def']が存在しない。 ・マウスオーバーで、最初の画像（bbs.gif）とアウト時の画像（topic4.jpg）が違う？ （意図的にそうしているのなら良いけれど） ・一方で、On('img2')となっているけれど、マウスオーバー時はimg2？ 拡張子は？ ・Aタグ内の属性の記法（スクリプトのつもり？）が、どうなっているのか不明 ・img1とかloadImageって何のために定義しているのか？ などなど・・・ とりあえず、原理の一例として、 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head><title>test</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> </head> <body> <a href="../usatop.html"> <img src="bbs.gif" border="0" onmouseover="this.src='bbs2.gif'" onmouseout="this.src='bbs.gif'"> </a> </body> </html> 画像の先読みとかはしてません。 画像は、（最初）bbs.gif → （マウスオン）bbs2.gif → （マウスアウト）bbs.gif と仮定
補足
すみません、書き方が悪かったですね。 http://ngp.pupu.jp/ のページの真ん中の右にあるメニューのように、ボタンの変化と任意の画像の変化をマウスオーバーで同時に行いたいのです。 ご教授いただけますでしょうか？
- yyr446
- ベストアンサー率65% (870/1330)
この場合、一つのボタンに２つのＪＡＶＡ!を使う必用はまったくありません。 後のjavascriptだけで充分です。 img0.src(マウスオフ)とimg2.src(マウスオン)のファイル名を変えるだけでしょ。
お礼
ありがとうございました。参考になりました。
お礼
完動しました。本当に助かりました！ありがとうございます。