- ベストアンサー
教えて下さい！リンクボタンの画像をオンマウスで変える方法
今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にて一応、上記ソースでの動作確認はしました)
お礼
お礼が遅くなって済みません。 ちょっと難しいので、もうちょっと勉強してからのちのちやってみたいと思います。 ありがとうございました。
関連するQ&A
- どうすればいいのかわかりません
今HPを縦フレームで左ページにメニュー、右ページにtarget指定でページが切り替わるようにしています。 左ページのメニューはgif画像のボタンで、画像に触れると画像が変化し、画像からマウスを放すと元の画像に戻るようにしてました。 ここで質問なのですが、 １．マウスで画像１に触れると画像２に変化（マウスを放すと画像２は１にもどる） ２．クリックした時に一瞬画像３が変わりスグに画像２に戻る。 ３．当然同時に右ページも変わる。 ４．右のページがくりっくしたメニュー画像のリンク先の間は画像２のまま変化しない。 ５．そのほかのメニュー画像をクリックすると画像２は画像１にもどる。 ６．理想的にはブラウザの「戻る」を押しても画像２は画像１にもどる。 といったものはつくれますか？ 自力ならjavascriptを使って１．２．３まではつくれます。 onmouseoutをつかってしまうと、４以降ができません・・・ やはり出来ないのでしょうか・・・ どなたか知恵をお貸しください
- ベストアンサー
- HTML
- オンマウスでクリック後の画像を変化させたままにする方法
たびたびお世話になります。 以前にも同じような質問をしたのですが・・ 状況が変わり、それとHP作成を進めて行くうちに色々解って来た事もあるので、もう一度質問させて下さい。 フレームで、上／左／右に区切っています。 上と左のフレームにメニューがあり、右のフレームにメインコンテンツがあります。 上のメニューも左のメニューもtarget属性のリンクで右フレームに 表示させるようにしたいと思っています。 まだページを作っているところなのでリンクは飛ばしてないですが。 メニューは文字ではなく、上も左も画像を作ってボタンにしました。 JAVAではなく、HTMLで、オンマウスにより画像を変化させるようにもしてあります。 それを、リンクを張り、クリックした後もオンマウスで変化したままの画像にしたいのです。リンク先を表示している間だけ、です。 タグはこうなっています。 <img alt="" src="image/MENU1.jpg" onmouseover="this.src='image/MENU1_1.jpg'" onmouseout="this.src='image/MENU1.jpg'" style="width: 119px; height: 33px;"> やり方はありますでしょうか？ それと、上のフレームからメニューをクリックした後、 左のフレームの中身も変化させる、というのはJAVAですか？ また、やり方はあるのでしょうか。 こんな風にやりたいのですが↓ http://www.dreampower-jp.com/index.html
- 締切済み
- HTML
- オンマウスで画像変更、クリックでリンク先に飛ばしたいのです。
オンマウスで画像変更、クリックでリンク先に飛ばしたいのです。 右側にメニューボタン（１～４）があり 各ボタンにオンマウスすると左側に画像を表示、 クリックすると別ページにリンクさせたいのです。 フレームは使っていません。 初心者なので具体的なタグを教えていただくと助かります。
- ベストアンサー
- ホームページ作成ソフト
- リンクボタンのラインについて
メモ帳でホームページを作っています。 画像を使ってリンクボタンを指定しました。 リンクボタンのラインを表示させたくなかったので <a href="index.html" target="index.html"><img src="あ.gif" alt=え style="zoom:54%;" border="0"></a> のようにしました。 確かにラインは消えましたが、マウスでクリックして選択すると点線のラインが出現してしまいます。他の画像のリンクボタンを選択するときえますが、今度はそのリンクボタンに点線ラインが出ます。 選択したときもラインがでないようにできるんでしょうか。ご存知の方よろしくお願いします。
- 締切済み
- CSS
- 画像にリンク
ホームページビルダー7にてHP作成しております。画像のロールオーバーを作成しましてメニューボタンを作成いたしました。そのボタンを「お問合わせ」とし、メールへリンクするようにしたいのです。通常の画像や文字などからは右クリックで「リンクの挿入」を指示しメールへリンクが出来るのですが、画像ロールオーバーで作成したものにリンクしようと思ってもできません。右クリックしますと「リンクの設定」というメニューはグレーになっていてクリックできません。右クリックし「属性の変更」でリンクの指定が出来るのですが、ファイルが対象になっているようでメールへリンクすることはできないようです。ご存知の方がいらっしゃいましたらよろしくお願いいたします。
- ベストアンサー
- ホームページ作成ソフト
- 【初心者】ＣＳＳリンクについて
外部ＣＳＳのあるテンプレートをダウンロードしました。 今まではＨＴＭＬだけでＨＰを作ってたのでＣＳＳについては全くわかりません>< ヘッダー、左にメニュー、右にメイン、そして下にフッターがあるものなんですが、 メニューをクリックして内容をメインに表示させるというのがどうやっているのかわかりません--; 本当に初歩的なことですみません。。 今までだとフレームを使ってターゲット指定でメインにリンクする方法ですがＣＳＳだと？？ 自分で本も買ってきて勉強もしてますが外部呼出しＳＣＣ…難しいですT_T
- ベストアンサー
- HTML
- 最後に押した画像ボタンが分かる、アクティブリンクのような（？）画像ボタンを作りたい
HPを作っています。使用中のソフトはDreamweaverMX2004です。 さて、左端にボタン（gifイメージ）がいくつも並んでいるとします。 各ボタンはロールオーバー指定がなされており、 リンクが貼られています。 ロールオーバーでボタンイメージは /off.gif（通常） /on.gif（オンマウス時） とします。 と、ここまでは普通のロールオーバーだけのものですね。 さて、これを、各3種作ったと仮定して、 /off.gif（通常） /on.gif（オンマウス時） /active.gif（最後にクリックした画像） そして、 ボタンをクリックする→最後に押したボタンが/active.gifの形で残る つまり、訪問者がどのボタンを最後に押したかが一目で分かる この様な手法を、HTMLで作ることは可能でしょうか。 アクティブリンクのボタン画像版といえば伝われば幸いです。 可能かどうか自信がないのですが、 もし可能でしたら、どのようにHTMLを書くのか、 その手法をお教えください。 宜しくお願いいたします。
- 締切済み
- HTML
- 訪問済みリンク識別を画像で
いつもお世話になります。 webでは、訪問済みのリンクが文字の色表示が変わることによって識別できますが、この識別を、画像をクリックして跳ぶタイプのリンクでも実現したいのですがJavascriptか何かで出来ないものでしょうか？ よく、javascriptによって、ポインタを乗せると画像が別画像に入れ替わって、ポインタをどけると元の画像に戻るページがありますが、要は、「ポインタが乗ったことを検知して画像が変わる」のではなくて「このリンクがvlinkであるということを検知して画像が変わる」ように出来ないかと思ったのですが…。 例えば、 http://www.tk3.speed.co.jp/garten/patio/ （このサイトは私が作ったものではなく、あくまでも例です） の場合、左フレームの一番下のボタンをクリックしてリンクを右ウインドウに開き、次にまた別のページにジャンプした時、さっき訪問したリンクである一番下のボタンは赤いボタンにでも変わって、このリンクは既に訪問済みであることが分かるようにしたいのです。 つまり、 ボタン1：未訪問の場合btn1.gifを表示→訪問後はbtn1_v.gifを表示 ボタン2：未訪問の場合btn2.gifを表示→訪問後はbtn2_v.gifを表示 ボタン3：未訪問の場合btn3.gifを表示→訪問後はbtn3_v.gifを表示 と言った具合に、仮にボタンが3つなら6枚の画像を用意するわけです。 尚、私は、前述の「マウスＯＮで画像入れ替え」のスクリプトさえ自分の力でプログラムできないもので、恐れ入りますが、javascriptで実現が可能でしたら、部分的でなく具体的なソースを教えて頂けるとありがたいのですが…。 javascript使用以外の方法でも何でも構いませんので、この目的を達成する方法をご存知の方がいらっしゃいましたらご伝授いただけませんでしょうか？
- ベストアンサー
- JavaScript
- 同時に２箇所にリンクは可能？
いつもお世話になっております。 カテ違いだったらごめんなさい。 たとえば、フレームページで 左がメニュー。右がメイン。という場合 左のメニューの中の画像ボタンをクリックすると、 左のメニューのデザインが変わり、右のメインも変わり。 というふうに、ワンクリックで２ヶ所のリンクに同時にジャンプすることはできるのでしょうか。 よろしくお願いします。
- ベストアンサー
- JavaScript
- 画像上にリンクを貼りたい
みなさん、こんにちは。 今、ホームページのリニューアルを考えています。 フレームで左右のページに分けて、左ページにメニューを載せて、右ページをメインにしたいと思っています。 そこまでの工程は一応分かります。 しかし、左ページ一枚の画像の中に、「profile」や「diary」というコンテンツ名を画像ソフトで載せて、そのコンテンツ名をクリックすると、右ページに反映されるようにしたいのです。 画像ソフトでコンテンツ名を載せることも、自分でできます。 しかし、画像の中に載せてあるコンテンツ名をクリック出来るようにする方法が分かりません。 調べたのですが、ビルダーを使うと簡単だということですが、ビルダーを持っていなくて困っています。 タグなどで、画像上に載せたいくつかのコンテンツ名を、リンクできるようにする方法はありませんでしょうか？ もしお分かりの方がいらしたら、教えてください。 参考になるサイト（できるだけ分かりやすいもの）を教えてくださるだけでも助かります。 どうか、よろしくお願いしますm（__）m
- ベストアンサー
- HTML
補足
ありがとうございます。 4,5は考えているうちに私も必要ないかなと思えてきました・・・。 css・・・テンプレートを使って書き換えているのですが、 それについている外部cssに書き込めばいいということでしょうか？ いつもよくわからないのは、教えていただくソースをどこに書き込むのかということなんです・・・・。