- ベストアンサー
教えて下さい！リンクボタンの画像をオンマウスで変える方法
今HPを縦フレームで左ページにメニュー、右ページにtarget指定でページが切り替わるようにしています。 左ページのメニューはgif画像のボタンなのですが、画像に触れると画像が変化し、画像からマウスを放すと元の画像に戻るようにしたいのです。 １．マウスで画像１に触れると画像２に変化（マウスを放すと画像２は１にもどる） ２．クリックした時に一瞬画像２がへこみ、離すと画像２に戻る。 ３．当然同時に右ページも変わる。 ４．右のページがくりっくしたメニュー画像のリンク先の間は画像２のまま変化しない。 ５．そのほかのメニュー画像をクリックすると画像２は画像１にもどる。 というのはどうすればいいのでしょうか？ リンクボタンをへこませる方法はどこかで見たのですが、 それを今のhtmlのどこに書けばいいのかもわかりません。 ちなみに、外部のcssがあります。テンプレートを加工しているので。 宜しくお願いします！
- hachiko873
- お礼率70% (7/10)
- HTML
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
Javascriptを利用する方法もありますが、CSSの方法を紹介。 <a href="index.html" target="right">メニュー</a> a { display:block;←aタグをブロック要素にする width:100px;←画像サイズ height:20px;←画像サイズ text-indext:-9999px;←「押す場所」というテキストを画面外へ background:url(back1.gif);←ノーマル画像 } a:hover { background:url(back2.gif);←へこみ画像 } これで 1、2、3はクリア（工夫すれば、リンクが何箇所にあろうが画像1枚ですみます）。 4、5なんですが、フレームを使用している意味がなくなりませんかねぇ。
その他の回答 (2)
- happyseason
- ベストアンサー率36% (180/496)
No.1さんの書いたソースは、質問者さんが使用している外部のCSSソースに記載すればいいです。 その際には a{ (中略) } a:hover { (中略) } この部分を*.cssファイル内に追加します。 外部CSSファイルは記載した後、HTMLファイル内のHEAD部にて宣言しなければいけません。(以下参照) <html> <head> <title>Style Sheet Test</title> <link rel="stylesheet" type="text/css" href="xxx.css"> </head> <body> (略) </body> </html> ↓この部分がCSSファイルの宣言になります。 <link rel="stylesheet" type="text/css" href="xxx.css"> テンプレートのようなのでHTMLファイルもテンプレートを使用していれば、HEAD部に上記のような宣言が書いてあると思います。 ただ、こうした場合、外部CSSを複数のページに渡って使用する場合は、他のAタグにもCSSに追記したもの(マウスカーソルでリンクが画像に置き換わるとか凹む等)になりますので、この場合はメニューのHTMLファイルにのみNo.1さんが記載したソースを追加します。 書く場所はHEAD部になります。(以下参照) <html> <head> <title>Style Sheet Test</title> <style type="text/css"> <!-- a{ (中略) } a:hover { (中略) } --> </style> </head> <body> (略) </body> </html> 特定のページのみそのスタイルシートの情報を当てたいのであれば、該当の*.htmlファイルに追加し、全体的にスタイルシートの情報を使いたいのであれば*.cssファイルに記載するのが良いと思います。 タグにIDをつけてクラススタイルにする等色々とスタイルシートの使い方はありますが、まずは基本的な部分を理解してから一つ一つ試していくのがベストかと思います…。
お礼
お礼が遅くなって済みません。 ちょっと難しいので、もうちょっと勉強してからのちのちやってみたいと思います。 ありがとうございました。
- happyseason
- ベストアンサー率36% (180/496)
HTMLというよりはJavaScriptの処理なのでカテゴリ違いに近いのですが、以下のようにすると動きます。 -------------- <html> <head> <SCRIPT LANGUAGE="JavaScript"> <!--// var version = (navigator.appVersion.charAt(0) == "4") || ((navigator.appVersion.charAt(0) == "3") && (navigator.appName == "Netscape")); if (version) { var img = new Array(); //マウスが画像の上にないとき(初期画像) img[0] = new Image(); img[0].src = "./1.jpg"; //マウスが画像の上にあるとき img[1] = new Image(); img[1].src = "./2.jpg"; //マウスボタンを押したとき img[2] = new Image(); img[2].src = "./3.jpg"; } function change(num){ if (version) { if (num == 0) { document.images["Window"].src = img[0].src; } else if (num == 1) { document.images["Window"].src = img[1].src; } else if (num == 2) { document.images["Window"].src = img[2].src; } } } // --> </SCRIPT> </head> <body> <A HREF="***.html" target="XXX" onMouseOver="change(1)" onMouseOut="change(0)" onmousedown="change(2)" onmouseup="change(1)"> <IMG SRC="./1.jpg" NAME="Window" BORDER=0> </body> </html> -------------- JavaScriptのイベントの種類は以下のようになります。 ■onMouseOver マウスカーソルがオブジェクト(画像)の上にのった時 ■onMouseOut マウスカーソルがオブジェクト(画像)から外れた時 ■onmousedown マウスボタンが押された時 ■onmouseup マウスボタンが離された時 (IE6にて一応、上記ソースでの動作確認はしました)
お礼
お礼が遅くなって済みません。 ちょっと難しいので、もうちょっと勉強してからのちのちやってみたいと思います。 ありがとうございました。
補足
ありがとうございます。 4,5は考えているうちに私も必要ないかなと思えてきました・・・。 css・・・テンプレートを使って書き換えているのですが、 それについている外部cssに書き込めばいいということでしょうか？ いつもよくわからないのは、教えていただくソースをどこに書き込むのかということなんです・・・・。