- ベストアンサー
どうすればいいのかわかりません
今HPを縦フレームで左ページにメニュー、右ページにtarget指定でページが切り替わるようにしています。 左ページのメニューはgif画像のボタンで、画像に触れると画像が変化し、画像からマウスを放すと元の画像に戻るようにしてました。 ここで質問なのですが、 １．マウスで画像１に触れると画像２に変化（マウスを放すと画像２は１にもどる） ２．クリックした時に一瞬画像３が変わりスグに画像２に戻る。 ３．当然同時に右ページも変わる。 ４．右のページがくりっくしたメニュー画像のリンク先の間は画像２のまま変化しない。 ５．そのほかのメニュー画像をクリックすると画像２は画像１にもどる。 ６．理想的にはブラウザの「戻る」を押しても画像２は画像１にもどる。 といったものはつくれますか？ 自力ならjavascriptを使って１．２．３まではつくれます。 onmouseoutをつかってしまうと、４以降ができません・・・ やはり出来ないのでしょうか・・・ どなたか知恵をお貸しください
- anpankudasai
- お礼率33% (67/203)
- HTML
- 回答数3
- ありがとう数0
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
そのメニューのページの<body>を<body class="menu">として、 スタイルシートの記述を .menu a:link { background-image: url(1の画像ファイル名); } .menu a:visited { background-image: url(1の画像ファイル名); } .menu a:active { background-image: url(2の画像ファイル名); } .menu a:hover { background-image: url(2の画像ファイル名); } とすれば、2.の画像3に変わること以外はJavaScriptなしでできるかもしれません。ただし、背景画像を変化させているので、このままではクリックできません。下の例のように透過GIF（space.gif）をハイパーリンクの内容にします。1×1ピクセルの物を作って、大きさをwidthとheightで指定するといいと思います。 メニューということから、おそらくそれぞれ違う画像を用意するとおもうので、そのときは下の例のようにIDなどで分けてください。 例） スタイルシートの記述 .menu #top a:link { ...（略） .menu #news a:link { ...（略） （他のa:visitedなどもそれぞれメニューのID毎に記述します。） HTMLの記述 <body class="menu"> <h1>メニュー</h1> <ul> <li id="top"><a href="index.html"><img src="space.gif" alt="トップページ"></a></li> <li id="news"><a href="news.html"><img src="space.gif" alt="ニュース"></a></li> ...（略） #おそらく、背景画像がずれたりして大変と思いますが、その点は参考URLのリンク先をみてCSSで調整してみてください。 #あと、これ時間がなくて動作確認してないので、上手く動かなかったらごめんなさいです。
その他の回答 (2)
とりあえずのアイディアですが… 右側のフレームで参照しているページのURIを取得して、そのURIが特定のページであるかどうかをチェックするようにすることで、4の動作も取れるのではないかと思います。 たとえば、右側のフレーム名を「Right」としたら、 x=parent.Right.location.href; で変数xの中に右側のフレームで参照しているページのURIを取得できますので、その変数の値をチェックして、特定のページのURIであった場合はイメージの変更をせずに処理を終了させ、そうでない場合にはイメージを元のものに戻すという処理にすれば、実現可能なのではないかと思います。 例えば、変数chkURIにページのURIを取得して、適当な処理を加え(上記手段で取得できるURIはフルパスなので、適宜加工した方がいいと思います)、その変数の内容により行う処理を指定するのはいかがでしょうか。 具体例としては、Mouseout時の関数を、 function MouseOutChangeImg(){ chkURI=parent.Right.location.href; xx=chkURI.LastIndexOf("/")+1; zz=chkURI.length; chkURI=chkURI.substring(xx,zz); if (chkURI!="***.htm"){ /* 「***.htm」は右フレームがそのページだったときにはイメージを変更させたくない場合の、右フレーム内のページのURI */ document.images[x].src="画像1のURI";} } このようにすると、右側フレームで特定のページを参照している場合にはイメージの変更は行われず、特定のページを参照していないときにはイメージの変更の処理が行われると思います。 これをうまく応用すれば、4までは実現できると思います。 5まで実現させる場合は、クリックしたときに画像を差し替える処理で、クリックされた画像以外の画像を初期状態に戻す処理を入れるようにすると良いかもしれません。 こちらは少々スクリプト的にも重くなるでしょうし、思い通りに行くといえる確信もありませんが… 6の実現は、私には実現可能かどうかもわかりません… 推測ですが、結構困難なのではないかと思います。 参考になれば幸いです。
- carakawa
- ベストアンサー率35% (40/114)
左側のフレーム自体も、リンク先用にひとつづつ作らなくてはなりませんよ。 例えば、a.html というファイルのメニューファイルで a_menu.html というものをつくり、そのa_menu.thmlにクリックした状態の画像を入れておくんです。 ですから、target ページ数分menu ページを作って、全部が切り替わるようにしなくてはなりません。 もしもそれがめんどうなら、フレームを切らないページ校正をして、しまうかどちらかですね。
関連するQ&A
- 教えて下さい！リンクボタンの画像をオンマウスで変える方法
今HPを縦フレームで左ページにメニュー、右ページにtarget指定でページが切り替わるようにしています。 左ページのメニューはgif画像のボタンなのですが、画像に触れると画像が変化し、画像からマウスを放すと元の画像に戻るようにしたいのです。 １．マウスで画像１に触れると画像２に変化（マウスを放すと画像２は１にもどる） ２．クリックした時に一瞬画像２がへこみ、離すと画像２に戻る。 ３．当然同時に右ページも変わる。 ４．右のページがくりっくしたメニュー画像のリンク先の間は画像２のまま変化しない。 ５．そのほかのメニュー画像をクリックすると画像２は画像１にもどる。 というのはどうすればいいのでしょうか？ リンクボタンをへこませる方法はどこかで見たのですが、 それを今のhtmlのどこに書けばいいのかもわかりません。 ちなみに、外部のcssがあります。テンプレートを加工しているので。 宜しくお願いします！
- ベストアンサー
- 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
- 外部ファイルの記述の仕方
HTMLにリンクを指定している画像にマウスが重なったときに画像を変化するようにHTML文法にJavaScriptを指定しているのですが、外部ファイル化したいのですがどのように記述すればよいでしょうか？ <a href="1.html"> <img src="menu01.gif" onMouseOver="this.src=\'menu11.gif\'" onMouseOut="this.src=\'menu01.gif\'" height="30" width="138" > </a> <a href="2.html"> <img src="menu02.gif" onMouseOver="this.src=\'menu12.gif\'" onMouseOut="this.src=\'menu02.gif\'" height="30" width="138" > </a>
- ベストアンサー
- JavaScript
- HTML、1クリックで複数画像表示
左フレームと右フレームがあります。 左フレームの「テキスト」をクリックすると、 右フレーム（right）に画像（001.gif）を表示するように、次のように記述しています。 <a href="001.gif" target="right">テキスト</a> ここで、「テキスト」を1回クリックしただけで 001.gif だけでなく、その下に 002.gif と 003.gif を 縦に並べて表示するにはどうしたらいいのでしょうか？ あらかじめ3枚の画像を1枚にしておく、というのは無しで。 当方、必要な部分だけをつまみ食い学習しているだけで初心者以前のレベルです。 簡単に実現する方法があればご教示下さいませ。 Windows XP、IE8 です。
- ベストアンサー
- HTML
- 左右のフレームを同時に切り替えたい
２画面を使ったフレームのHPを作成しているのですが、 クリックしたら、左右同時に切り替わるリンクの仕方が分かりません。 どうのようにすればいいのでしょうか？ ・リンクのスタート地点は<左フレーム>、niji.html ・リンク先は、左は、menu.html、右はtop.htmlへと、同時にジャンプ。 ・画像を使ってリンクしたい。画像名は、momo.gif 左のフレーム内の画像をクリックしたら、左は、menu.html 右は、top.htmlと、切り替えたいという事です。
- ベストアンサー
- HTML
- このメニューボタンをクリックして、このページを見てますよー、という意味の動作
お世話になります。 ビルダー１１で作成しております。 フレーム2分割のページ（ターゲットA,ターゲットB）があります。 ターゲットAに、各メニューアイコンが並べてあり、 マウスオーバー／アウト時に、画像が変化するようになっています。 メニューアイコンをクリックすると、ターゲットBの画面が変わる …と、ここまではいいのですが、その際、ポインタを動かすと、 マウスアウト時イベントが反応して、アイコン画像が元に戻ってしまいます。 ここで、アイコン画像を元に戻さないようにしたいのですが、 どのようにしたらよいでしょうか？ ※他のメニューアイコンがクリックされたときは、今のままの動作でＯＫ。 分かりにくいかもしれませんが、どうぞよろしくお願いいたします。 （これがわかれば、晴れてサイトが完成です。＞＜）
- 締切済み
- JavaScript
- メニューの内容
フレームで、ヘッダー 左メニュー 右メインページとしている３分割のものを作っています。 左メニュー（○○○とする） ○○○―××× ＼△△△ ○○○にマウスを持っていくと、××× △△△が表示され、××× △△△をそれぞれクリックすると、右メインページに表示されるようにするにはどうしたらいいでしょうか？ できるだけ簡単なほうがいいですが、どのようなやり方でも構いません。 教えてください。 （質問する場所が違っていたらすみません）
- ベストアンサー
- JavaScript
- フレーム使用のHPでの掲示板のリンク方法について
FC2でフレーム（左にメニュー、右に本文）を使用したHPを作成しています。 左のメニューのリンクを右のフレームに表示させることはできました。 しかし、私は日記としてお絵かき掲示板を利用しているのですが、お絵かき掲示板のページを右フレームに表示させるとスクロールが上手く出来なくなってしまいます。 マウスホイールでは普通にスクロールできますが、スクロールバーでやろうとするとスクロールバーをダブルクリックしないとできません。 また、マウスポインタが十字になってしまい、リンクはクリックできてもパスワードなどを入力することができません。 web拍手も同じようになっています。 自力で調べてはみたのですが、HPづくり初心者なためか全く原因も直し方も分かりませんでした。 説明が分かりにくいと思いますが、方法を知っている方がいましたら教えていただけると嬉しいです。 よろしくお願いします。
- ベストアンサー
- ホームページ作成ソフト
- Dreamwewaver4 フレーム間のリンクについて
Dreamweaver4でＨＰを作成しています。 上下二つのフレームに分けて、上はメニュー、下をコンテンツとして使っています。 例えば、メニューの中の”news”をクリックすると 上のフレームはそのままで、下のコンテンツにはフレームなしのnewsに関する情報がでます。 次に、メニューの中の”item”をクリックすると 上のフレームはそのままで、下のフレームに左右に分かれたフレームを表示させ（左はメニュー、右は画像） 左のメニューをクリックすると、右の画像が変わるページを作りたいのですが、 左のメニューをクリックすると画像が下フレームいっぱいに表示され、左のメニューが消えてしまいます。 ちなみにフォルダは分けていません。 それも関係あるのでしょうか？ 分かりにくい説明ですみません。 タグ打ちとかわからないので、できればそれ以外の 方法でよろしくお願いします。
- 締切済み
- その他（インターネット・Webサービス）
- フレームページがうまくできないよー
とりあえず、ホムペを作っているんですけれども、 フレームページの製作がうまくいかないわけです。 とりあえず、基盤ページと右と左の分かれたページを作ることには成功したんですけれども、 左をメニューのほうとして、リンクを貼るじゃないですか そうして、ただリンク貼っただけですと、右のページじゃなくて、左のページにリンク先が表示されてしまうわけです。 どうやったら左のメニューをクリックして右の内容が変化するようにできるかわかりません。 教えてください。
- ベストアンサー
- その他（インターネット・Webサービス）
